从RiPro美化包里移过来的首页四格小工具,感觉特别好看,稍微改了下分享出来给大家,当然,除了b2,其他主题同样适用,只不过b2用起来比较方便,因为它的模块化布局,所以只需在后台加一个广告位模块,修改代码就可以实现首页四格小工具了。
教程开始
因为工具里涉及到文字图标,所以需要调用文字图标得js代码,我调用的是Font Awesome中文网的cdn在线js,比较方便,将下面的代码放到主题设置里的自定义代码中就可以了
<link rel="stylesheet" href="//at.alicdn.com/t/font_1324673_0fwuxikv8155.css" type="text/css" media="all">
b2模板首先在模块管理里添加一个广告位,删除里面的代码,将下面的代码复制进去,其他模板一般要将代码添加到index.php合适的位置
<div class="section"> <div class="home-first"> <div class="sgcontainer hide_sm"> <div class="col-1-4"> <div class="hf-widget hf-widget-1 hf-widget-software"> <h3 class="hf-widget-title"> <i class="fa cscloud"></i> <a href="https://www.aliyun.com/sale-season/2020/procurement-new-members?userCode=uh4uhvkz" target="_blank">云产品</a> <span>云服务器等云产品推荐</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li> <a href="https://www.aliyun.com/sale-season/2020/procurement-new-members?userCode=uh4uhvkz" rel="external nofollow" target="_blank"> <i class="thumb " style="background-image:url(http://img.cmboke.cn/diy/ali.png)"></i> <span>阿里云</span></a> </li> <li> <a href="https://url.cn/5QqJQ8V" target="_blank"> <i class="thumb " style="background-image:url(http://img.cmboke.cn/diy/txy.png)"></i> <span>腾讯云</span></a> </li> <li> <a href="https://url.cn/5QqJQ8V" target="_blank"> <i class="thumb " style="background-image:url(http://img.cmboke.cn/diy/qyy.png)"></i> <span>企业云</span></a> </li> <li> <a href="https://url.cn/5T61RBd" target="_blank"> <i class="thumb " style="background-image:url(http://img.cmboke.cn/diy/xgy.png)"></i> <span>香港云</span></a> </li> </ul> </div> </div> </div> </div> <div class="col-1-4 sxweb"> <div class="hf-widget hf-widget-2"> <h3 class="hf-widget-title"> <i class="fa csremen"></i> <a href="#" target="_blank">看热门</a> <span>主题模板库精品推荐</span></h3> <div class="hf-widget-content"> <div class="no-scroll hf-tags"> <a class="style_orange" href="#" target="_blank"> <span>RiPro美化</span></a> <a class="" href="#" target="_blank"> <span>wordpress教程</span></a> <a class="" href="#" target="_blank"> <span>源码</span></a> <a class="" href="#" target="_blank"> <span>样机</span></a> <a class="" href="#" target="_blank"> <span>配色神器</span></a> <a class="" href="#" target="_blank"> <span>本站服务</span></a> <a class="" href="#" target="_blank"> <span>服务器特惠</span></a> </div> </div> </div> </div> <div class="col-1-4 sxweb"> <div class="hf-widget hf-widget-1 hf-widget-hot-cats"> <h3 class="hf-widget-title"> <i class="fa csiconfontweixin"></i> <a href="#" target="_blank">热门专区</a> <span>推荐设计热点</span></h3> <div class="hf-widget-content"> <div class="icon-b"> <ul> <li> <a href="#" target="_blank"> <i class="fa csqiandao"></i> <span>签到</span></a> </li> <li> <a href="#" target="_blank"> <i class="fa cshuiyuan"></i> <span>领会员</span></a> </li> <li> <a href="#" target="_blank"> <i class="fa cssucaiku"></i> <span>素材库</span></a> </li> <li> <a href="#" target="_blank"> <i class="fa cschart"></i> <span>一只狗</span></a> </li> </ul> </div> </div> </div> </div> <div class="col-1-4 sxweb"> <div class="hf-widget hf-widget-4"> <h3 class="hf-widget-title"> <i class="fa cshuodong-copy"></i> <a href="#" target="_blank">最新活动</a> <span>免费会员享福利</span> </h3> <div class="hf-widget-content"> <div class="scroll-h"> <ul> <li> <h3> <a href="#" target="_blank"> <i class="icon-time"></i> <span>RiPro美化服务火热售卖中</span> <em>网站美化</em></a> </h3> </li> <li> <h3> <a href="#" target="_blank"> <i class="icon-time"></i> <span>关于本站积分付费阅读获取内容说明</span> <em>积分说明</em></a> </h3> </li> </ul> </div> </div> </div> </div> </div> </div> </div>
最后只需要将css放到自定义代码中就可以了,对于其他模板,可以放到style.css中
隐藏内容,您需要满足以下条件方可查看
End
学些学习,我来康康
学习一下
很好,学习学习,mark一下
正需要
学习一下
学习学习,mark一下
感谢分享
回复支持一下哈哈
学习学习。
学习一下
感谢楼主分享
感谢楼主分享
很好,学习学习,mark一下
学习学习
学些学习
太漂亮了哈哈哈
学习
我就喜欢这个,嘿嘿