WordPress主题美化:给侧边小工具添加多彩侧边栏

2018年8月31日08:10:13 发表评论 382 views
广告也精彩

WordPress主题美化:给侧边小工具添加多彩侧边栏

WordPress多彩推荐侧边栏。在别的站点扒了个多彩推荐侧边栏的代码来,也有些小伙伴看到觉得不错,来找我问这个如何搞的。其实挺简单的,我是扒过来的~你们也就可以扒走了。

WordPress主题美化:给侧边小工具添加多彩侧边栏

效果图的话,就上面这个了,每篇文章中都有~~代码如下。

  1. <ul class="colorbar">
  2. <li><a href="http://www.zhushuming.cn/haohaoshuohua.html" target="_blank" style="background-color:#ff3030;">《好好说话》在线阅读</a></li>
  3. <li><a href="http://www.zhushuming.cn/code.html" target="_blank" style="background-color:#428BCA;">HTML多功能代码转换器</a></li>
  4. <li><a href="http://www.zhushuming.cn/ssyqrk.html" target="_blank" style="background-color:#e84266;">各大搜索引擎提交入口</a></li>
  5. <li><a href="http://www.zhushuming.cn/game.html" target="_blank" style="background-color:#91c24f;">HTML在线小游戏</a></li>
  6. <li><a href="http://www.zhushuming.cn/seo/3091.html" target="_blank" style="background-color:#f49800;">SEO优化常见问题解答</a></li>
  7. <li><a href="http://www.zhushuming.cn/minjiangushi/" target="_blank" style="background-color:#A6A600;">民间小故事大全</a></li>
  8. <li><a href="http://www.zhushuming.cn/meitu.html" target="_blank" style="background-color:#B766AD;">美图秀秀在线编辑工具</a></li>
  9. </ul>
  10. <style type="text/css">
  11. .colorbar li {
  12.     width: 100% !important;
  13. }
  14. .colorbar li a {
  15.     color: #fff;
  16.     line-height: 40px;
  17.     display: block;
  18.     width: 100%;
  19.     text-align: center;
  20. }
  21. .colorbar li a:hover {
  22.     opacity: 0.8;
  23. }
  24. </style>

使用方法:使用知更鸟主题的朋友,这个代码需要放到增强文本中。使用其他主题的朋友,把代码放到文本中就可以了。

注:代码是死的,人是活的。以上代码可根据个人喜好更改~

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • QQ群:431710796
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: