梦站博客-免费资源
  技术教程分享平台

wordpress丨更知鸟Begin主题增强文本

Pulpit rock

增强文本之多彩文字广告位

后台-外观-小工具-增强文本,填入以下代码,移动到你需要的位置即可

  1. <div class=”colorbar-box”>

    <ul class=”colorbar”>

    <li><a href=”链接地址” target=”_blank” style=”background-color:#ff3030;”>我是文字</a></li>

    <li><a href=”链接地址” target=”_blank” style=”background-color:#428BCA;”>我是文字</a></li>

    <li><a href=”链接地址” target=”_blank” style=”background-color:#e84266;”>我是文字</a></li>

    <li><a href=”链接地址” target=”_blank” style=”background-color:#91c24f;”>我是文字</a></li>

    <li><a href=”链接地址” target=”_blank” style=”background-color:#f49800;”>我是文字</a></li>

    </ul>

    </div>

    <style type=”text/css”>

    .colorbar-box ul {

    padding: 0;

    }

    .colorbar li {

    width: 100% !important;

    }

    .colorbar li a {

    color: #fff;

    line-height: 40px;

    display: block;

    width: 100%;

    text-align: center;

    }

    .colorbar li a:hover {

    opacity: 0.8;

    }

    </style>

增强文本之九宫格图标

后台-外观-小工具-增强文本,填入以下代码,移动到你需要的位置即可

  1. <div class=”top-author lx8″>

    <a rel=”external nofollow” target=”_blank” title=”链接” href=”#”>

    <img src=”http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg”>

    </div>

    <div class=”top-author lx8″>

    <a rel=”external nofollow” target=”_blank” title=”链接” href=”#”>

    <img src=”http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg”>

    </div>

    <div class=”top-author lx8″>

    <a rel=”external nofollow” target=”_blank” title=”链接” href=”#”>

    <img src=”http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg”>

    </div>

    <div class=”top-author lx8″>

    <a rel=”external nofollow” target=”_blank” title=”链接” href=”#”>

    <img src=”http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg”>

    </div>

    <div class=”top-author lx8″>

    <a rel=”external nofollow” target=”_blank” title=”链接” href=”#”>

    <img src=”http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg”>

    </div>

    <div class=”top-author lx8″>

    <a rel=”external nofollow” target=”_blank” title=”链接” href=”#”>

    <img src=”http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg”>

    </div>

    <div class=”top-author lx8″>

    <a rel=”external nofollow” target=”_blank” title=”链接” href=”#”>

    <img src=”http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg”>

    </div>

    <div class=”top-author lx8″>

    <a rel=”external nofollow” target=”_blank” title=”链接” href=”#”>

    <img src=”http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg”>

    </div>

增强文本小工具带图标链接HTML代码

首先,将相应样式添加到主题选项→定制风格“自定义样式”中或者主题样式文件style.css最后。

  1. .qz-box a{background:#08c;float:left;width:50%;color:#fff!important;text-align:center;padding:15px 10px 10px 10px}.g-col .qz-box a,#cms-widget-one .qz-box a{width:25%;padding:25px 10px 20px 10px}@media screen and (max-width:900px){.qz-box a{width:50%}#cms-widget-one .qz-box a{width:50%}}@media screen and (max-width:700px){#group-widget-one .qz-box a{width:50%}}.qz-box a:hover{background:#777}a.qza{background:#699}a.qzb{background:#c96}a.qzc{background:#969}a.qzd{background:#9c9}.qz-icon{padding:5px 0 10px 0;display:block}.qz-icon .be{font-size:40px!important}.g-col .qz-icon .be{font-size:60px!important}

上面代码是以主题自带的图标字体为例,使用自定义阿里图标库,请将上面代码中的be改成zm.

其次,将下面代码添加到增强文本小工具中:

  1. <div class=”qz-box”>
  2.     <!– 链接A –>
  3.     <a class=”qz-link qza” href=”链接” rel=”bookmark”>
  4.         <span class=”qz-icon”><i class=”be be-home”></i></span>
  5.         <span class=”qz-title”>关注WordPress</span>
  6.     </a>
  7.     <!– 链接B –>
  8.     <a class=”qz-link qzb” href=”http://localhost/wordpress/203.html” rel=”bookmark”>
  9.         <span class=”qz-icon”><i class=”be be-folder”></i></span>
  10.         <span class=”qz-title”>给我投稿</span>
  11.     </a>
  12.     <!– 链接C –>
  13.     <a class=”qz-link qzc” href=”链接” rel=”bookmark”>
  14.         <span class=”qz-icon”><i class=”be be-sort”></i></span>
  15.         <span class=”qz-title”>WordPress最新版</span>
  16.     </a>
  17.     <!– 链接D –>
  18.     <a class=”qz-link qzd” href=”链接” rel=”bookmark”>
  19.         <span class=”qz-icon”><i class=”be be-thumbs-up-o”></i></span>
  20.         <span class=”qz-title”>在线咨询</span>
  21.     </a>
  22.     <div class=”clear”></div>
  23. </div>

修改其中的链接、文字及字体图标….

未经允许不得转载:梦站博客-一切皆起源于兴趣 » wordpress丨更知鸟Begin主题增强文本
分享到: 更多 (0)

留个足迹 抢沙发

天猫淘宝优惠券-省钱第一步

省钱通道领券通道