分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress添加一个底部漂浮栏
+

WordPress添加一个底部漂浮栏

  • 添加功能代码
  • 添加CSS代码
  • WordPress添加一个底部漂浮栏-BanYuner

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但是如果你的内容不是广告的话,那么我想也不会有人觉得反感了。

    那么今天推荐一个添加这个功能的方法,希望对大家有用,通过这个代码的原理,我相信很多了应该都会利用这个代码做出更多的扩展功能吧。

    那么这个功能我个人方面没有想那么复杂,我的思路就通过两个DIV标签将有需要的内容写进去,如果你有更多的话,那么就是用更多的标签,之后通过CSS将最外围标签固定在屏幕底部,同时右上角添加一个按钮,控制整个DIV标签,实现点击添加display:none的功能,仅仅就是这么简单。

    下面我就简单的说说这个流程是一个上面样的流程,大家根据这个原理加以改变,会实现不错的功能。

    添加功能代码

    <div class="float_ad">
    <div class="ad_text">
    站点通告测试
    </div>
    </div>
    

    上面的代码添加到footer.php文件中的body结束标签之前即可。

    添加CSS代码

    添加CSS代码来实现固定,以及相关样式的标记,整体来说,CSS才是整个代码的关键:

    .float_ad {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        background: red;
        height: 100px;
        z-index: 1111;
    }
    

    上面的代码是根据自身情况来决定的,我这里仅仅是给大家一个参考,那么整个方面大概就是这么简单的了,如果你想要更加优化一点的话,可以尝试加上一个关闭标签,或者修改一下颜色,透明度什么的都是可以的,这里就不在赘述了,毕竟我还没有使用,如果使用上了,大家届时可以直接查看相关CSS,借(抄)鉴(袭)一下就好了。 WordPress添加一个底部漂浮栏-BanYuner

    关注我们 打赏 分享此文
    微信扫码,关注我们
    扫码,支持我
    WordPress添加一个底部漂浮栏
    支付宝(点击图片切换)
    扫码,支持我
    WordPress添加一个底部漂浮栏
    微信(点击图片切换)
    扫码,手机看
    WordPress添加一个底部漂浮栏
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    相关推荐

    • WordPress前端配合后台指定分类判断办法

      WordPress前端配合后台指定分类判断办法

      这个标题说实话我真的不知道该怎么说明,但是看完了内容之后可能你就知道我说的是什么意思了。 今天在实现一个功能的时候,遇到了问题,首选描述一下...

      点击查看
    • WordPress站点搜索添加标签过滤功能

      WordPress站点搜索添加标签过滤功能

      很久之前我已经给我的站点搜索添加了分类搜索,也就是搜索的时候可以指定分类来增强搜索的精准性,那么今天介绍的同样是利用标签来精准进行搜索,具体...

      点击查看
    • WordPress留言数据到搜狐畅言

      WordPress留言数据到搜狐畅言

      前段时间才说了,多说因为不知道什么原因已经决定关闭了,那么我们需要做的事情就是导出数据了,但是我有理由相信,习惯多说的用户可能不会习惯Wor...

      点击查看
    • 帅气小琦琦
    • 我爱动感单车网
    WordPress添加一个底部漂浮栏
    5 + 6 =
    • 昵称 (必填)  
    • 邮箱 (必填)
    • 网址 (选填)
    1. 1楼
      我爱动感单车网
      具体效果怎么样,如果能够有个清晰、完整的截图就好了!
      我爱动感单车网 4个月前 (11-21)回复