分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 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添加一个底部漂浮栏
    5 + 4 =
    1. 1楼
      我爱动感单车网
      最后评论时间:2017/10/27 22:20
      来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信
      具体效果怎么样,如果能够有个清晰、完整的截图就好了!
      我爱动感单车网 2个月前 (10-27)回复