zibll子比主题添加右侧悬浮导航教程

前言

子比主题现在右侧悬浮导航还是比较不错的，功能页比较全面，如果有喜欢折腾的朋友可以自己修改下，右侧悬浮导航，此教程是从其他博客看到后觉着不错，可以学习下，喜欢的朋友可以自己测试，只显示电脑端，手机端空间太小，影响阅读、美观。右侧悬浮导航主要以zibll子比主题来进行样式的美化，一些css都采用zibll子比主题，若其他主题使用请自己修改代码中一些颜色代码或者其他部分代码，样式借鉴很多主题的右侧导航优秀的样式。没有代码基础（目前就只写了python），所以右侧悬浮导航一些功能很难完美实现，本站教程所使用的图片，请自觉下载保存本地，然后上传到图床或者其他地方。

效果图

使用教程

设置前，请关闭[电脑端的“回到顶部”按钮，后台子比主题设置里面自己找一下]

第一步：添加CSS代码

后台子比主题设置—>自定义代码—>自定义CSS样式，添加下面的CSS代码。

基础版CSS样式

/*右侧导航栏*/
.elevator_item .hd-time-limited{display: block; position: fixed; right: 5px; bottom: 450px; width: 40px; height: 140px; animation: vip-key 2.4s infinite; margin-top: 10px; border-radius: var(--main-radius);}@keyframes vip-key{0%{bottom: 442px;} 50%{bottom: 450px;} 100%{bottom: 442px;}}.elevator_item{font-weight:700; position: fixed; right: 5px; bottom: 150px; z-index: 10;}.elevator_item .feedback{width: 40px; height: 40px; background-color: #fff; color: #fa3c64; font-size: 12px; padding: 3px 6px; display: block; border-radius: 5px; text-align: center; margin-top: 10px; /* box-shadow: 0 1px 2px rgba(0, 0, 0, .35);*/ box-shadow: 0 0 10px var(--main-shadow); cursor: pointer;}.elevator_item .medium{position: relative; background-color: #fa3c64; color: #fff;}.elevator_item .medium .lf-box{display: none; position: absolute; right: 41px; top: -90px; width: 370px; height: 280px; padding-right: 10px;}.elevator_item .medium .sp-list{width: 360px; height: 280px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);}.elevator_item .medium .sp-list li:first-child{height: 70px; border-bottom: 1px solid #e5e5e5; padding: 20px 50px;}.elevator_item .medium li:first-child span{font-size: 14px; color: #383838;float: left; line-height: 30px;}.elevator_item .medium .btn-addGroup{width: 90px; height: 30px; border-radius: 8px; background: #fa3c64; color: #fff; line-height: 30px; text-align: center; float: left; margin-left: 14px;}.elevator_item .medium .spl-li{padding: 22px 34px 0;}.elevator_item .medium .spl-li span{display: block; font-size: 14px; color: #383838; margin-bottom: 8px;}.elevator_item .medium .spl-li img{width: 130px;}.elevator_item .feedback:hover .lf-box{display: block;}.fl{float: left;}.fr{float: right;}.graHover{position: relative; overflow: hidden;}.graHover:before{display: none; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .5);}.graHover:hover:before{display: block;}.clearfix{*zoom: 1;}.clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.wiiuii-why{background-color: var(--main-bg-color); width: 50px; height: 100%; position: fixed; right: 0; top: 0; z-index: 10; /*box-shadow: -2px 0px 4px 0px rgb(0 0 0 / 10%);*/ box-shadow: 0 0 10px var(--main-shadow);}@media screen and (max-width:768px){.wapnones{display:none;}

最终版CSS样式

（适用子比主题，基础版出现了一些css污染，所以我对类进行了修改）

第二步：添加HTML代码

后台子比主题设置—>自定义代码—>自定义底部HTML代码，添加下面的HTML代码。

基础版HTML

<!--右侧浮动 开始-->
<div class="wapnones wiiuii-why">
  <div class="elevator_item">
    <a class="hd-time-limited" href="#" style="background: url(https://img.wiiuii.cn/img/26666.png) no-repeat center;" target="_blank" rel="nofollow"></a>
    <a class="feedback graHover signin-loader" style="background-color: #44BBA1;color:#fff;" href="javascript:;" rel="nofollow">点击登陆</a>
    <a class="feedback medium signin-loader hover-show pay-vip" href="javascript:;"  style="background-color: #f2c69f;color:#383838;">活动专区
      <div class="lf-box">
        <ul>
         <li> 
           <!--若用我的图片一定要把图片下载到本地！-->
           <div style="padding-bottom: 5px;">
           <img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVSVIP.jpg">
             </div>
           <img style="border-radius: 8px;" src="https://img.wiiuii.cn/img/VVVIPS.jpg">
          </li>
        </ul>
      </div>
    </a>
    <a class="feedback graHover main-shadow toggle-theme" style="background-color: var(--key-color);color:var(--main-bg-color);" href="javascript:;" rel="nofollow">模式切换</a>
    <a target="_blank" class="feedback graHover" style="background-color: #3ba4f9;color:#fff;" href="https://www.wiiuii.cn/newposts" rel="nofollow">发布文章</a>
    <div class="feedback medium">官方客服
      <div class="lf-box">
        <ul class="sp-list">
          <li>
            <span>官方客服：1431258805</span>
            <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1431258805" target="_self" class="btn-addGroup graHover" rel="nofollow">一键联系</a></li>
          <li class="spl-li clearfix mobile-hide">
            <div class="fl">
              <span>微信公众号</span>
              <img src="https://www.wiiuii.cn/wp-content/uploads/2021/02/9ce98472f1e7.png" ></div>
            <div class="fr">
              <span>微信公众号</span>
              <img src="https://www.wiiuii.cn/wp-content/uploads/2021/02/0af9da361143.png" ></div>
          </li>
        </ul>
      </div>
    </div>
          <a class="feedback graHover main-shadow muted-2-color ontop radius8 fade" style="background-color: #1e6be3;color:#fff;display: block;" href="javascript:(scrollTo());" >返回顶部</a>
 </div>
</div>
  <!--右侧浮动 结束-->

最终版HTML

说明：

若需要上面的图片，自己下载保存。自己添加、修改代码。添加模块请自己修改CSS的“elevator_item”类里的“bottom：150px;”高度，不然很丑哦。蓝色的图片大小是40×140。