多年手赚资深者
免费分享各种手赚软件与线报

网赚网站如何添加文章页底部五栏网赚项目推广区

可能有的人懂了,可能有的人一脸懵逼,因为我也不知道该如何来表达这个意思,给大家看张图大家应该就懂了。如下:

这是在文章页底部增加的推广区,因为大家都知道个人博客网站不像手机赚钱下载网站(AppCMS)一样能简单粗暴直观的展示各种APP,增加了下面这个推广专区后,我们的文章底部也增加了五个项目直观曝光的机会,这对某些要重点推荐的项目的曝光率可想而知,好了,不多说了,我们直接看接下来怎么做。

由于目前我所使用的是WordPress下的DUX 主题,一切修改以dux主题为准,WordPress的修改大同小异,其他程序的修改大家见机行事,因为我也是个代码小白

此次对主题的修改操作主要涉及css文件夹中的main.css,可能有些模板有所不同但是wp模板基本上都是按照这个模式开发的,其他程序的自行摸索,在主题修改之前还是提醒大家备份一下相关文件以防误操作引起的网站崩溃。

main.css文件修改

把如下代码复制到main.css中去,至少大前端dux主题是这样,其他模板可能复制到style.css中去

/* CSS Document */
#wendibu{text-align: left;}
#wendibu{overflow:hidden;}
#wendibuyd{margin-left:-10px;}
#ads-banneryd,.fabiaokuangyd,#wendibuyd{display:none;}
#ads-banner img,#ads-banneryd img,#wendibu img,.fabiaokuang img,.fabiaokuangyd img{max-width:100%;height:auto;}
#wendibuyd img{max-width:103%;height:auto;}

.xmlist{padding:10px;margin: 8px 0;border: 1px dashed #B9AB9E;background-color: #FCFAF7; font-family:'Microsoft YaHei',;border-radius:10px; color:#111; line-height:20px; font-size:14px;}
.xmlist a{ color:#4E0A13; text-decoration:underline}
.xmlist p{ margin-bottom:0;}
.xmlist img{ max-width:100%;}

.list .app{position:relative;padding:10px 5px 8px 80px;border-bottom:1px solid #d7d7d7;}
.list .app .icon{height:60px;width:60px;position:absolute;top:10px;left:10px;border-radius:5px; line-height:60px; font-size:48px; text-align:center; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif;}
.list .app .name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:0; padding:0; text-indent:0; margin:0 0 10px 0;}
.list .app .name a{color:#333;}
.list .app .info p{margin-bottom:4px;font-size:13px;color:#666;}
.list .app .info p span{margin-right:2px;}
.list .app .rc{position:absolute;top:30px;right:8px;width:80px;text-align:left;}
.list .app .rc .download{ display:inline-block; border:1px solid #a1e3ff; background:#c0eff9; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(3%,#d6f9ff), color-stop(95%,#c0eff9), color-stop(100%,#d2f5f7)); background: -moz-linear-gradient(top, #fff 20%, #d6f9ff 3%, #c0eff9 95%, #d2f5f7 100%); padding: 4px 8px;border-radius: 3px;color: #008fcb;font-size:14px;text-shadow: 1px 1px 2px #f2f2f2;}
.list .app .rc .stars{margin-top:5px; display:inline-block; background:url(images/star2.png) no-repeat; width:77px; height:13px;}
.list .app .rc .stars em{display:inline-block;background:url(images/star1.png) no-repeat; height:15px;}
.list a{ text-decoration:none;}

前端显示

大前端dux主题广告位就可以直接复制添加下面代码了,大家把里面的链接和文字换成自己的项目名称和链接就成了,其他模板的小伙伴试试广告位和single

<div class="asb asb-m asb-post asb-post-02"><div id="wendibu">
<div class="xmlist">
<ul class="list" style="margin:0; padding:0;">

<!--众人帮 -->

<li class="app" onmouseover="this.style.backgroundColor='#FFF5F0'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="background-color: rgb(255, 255, 255);"><a href="https://www.wszqz.com/99.html"><img src="https://www.wszqz.com/wp-content/uploads/2019/09/70138cf8e8e2894.jpg" width="72" height="72" border="0" class="icon"></a>
<div class="lc">
<h3 class="name"><a href="https://www.wszqz.com/99.html" target="_blank">众人帮 - 手机做任务日赚30元<span style="color:#FF0000">Hot!</span></a></h3>
<div class="info">

<p style="text-indent:0; padding:0;">

<span style="color:#CC3366">支持:</span><img src="https://www.wszqz.com/wp-content/uploads/2019/09/4779d1a5a1706a0.png" alt="安卓" style=" display:inline">
<img src="https://www.wszqz.com/wp-content/uploads/2019/09/1bdf605991920db.png" alt="苹果" style=" display:inline"></p>
<p style="text-indent:0; padding:0;"><span class="dl-count" style="color:red">邀请码:2072161</span></p></div>

</div>
<div class="rc"> <a href="https://www.wszqz.com/99.html" target="_blank" class="download">查看教程</a><span class="stars"><em style="width:100%"></em></span></div> </li>


<!--卡银家 -->

<li class="app" onmouseover="this.style.backgroundColor='#FFF5F0'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="background-color: rgb(255, 255, 255);"><a href="https://www.wszqz.com/162.html"><img src="https://www.wszqz.com/wp-content/uploads/2019/09/dd046e709f67d74.jpg" width="72" height="72" border="0" class="icon"></a>
<div class="lc">
<h3 class="name"><a href="https://www.wszqz.com/162.html" target="_blank">卡银家 - 推广一张信用卡奖励150元<span style="color:#FF0000">Hot!</span></a></h3>
<div class="info">

<p style="text-indent:0; padding:0;">

<span style="color:#CC3366">支持:</span><img src="https://www.wszqz.com/wp-content/uploads/2019/09/4779d1a5a1706a0.png" alt="安卓" style=" display:inline">
<img src="https://www.wszqz.com/wp-content/uploads/2019/09/1bdf605991920db.png" alt="苹果" style=" display:inline"></p>
<p style="text-indent:0; padding:0;"><span class="dl-count" style="color:red">满1元即可提现</span> </p></div>

</div>
<div class="rc"> <a href="https://www.wszqz.com/162.html" target="_blank" class="download">查看教程</a><span class="stars"><em style="width:100%"></em></span></div> </li>

<!--共享赚 -->

<li class="app" onmouseover="this.style.backgroundColor='#FFF5F0'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="background-color: rgb(255, 255, 255);"><a href="https://www.wszqz.com/87.html"><img src="https://www.wszqz.com/wp-content/uploads/2019/09/65f043e5c4c0e5c.jpg" width="72" height="72" border="0" class="icon"></a>
<div class="lc">
<h3 class="name"><a href="https://www.wszqz.com/87.html" target="_blank">共享赚 - 微信挂机赚钱日赚50元<span style="color:#FF0000">Hot!</span></a></h3>
<div class="info">

<p style="text-indent:0; padding:0;">

<span style="color:#CC3366">支持:</span><img src="https://www.wszqz.com/wp-content/uploads/2019/09/4779d1a5a1706a0.png" alt="安卓" style=" display:inline">
<img src="https://www.wszqz.com/wp-content/uploads/2019/09/1bdf605991920db.png" alt="苹果" style=" display:inline"></p>
<p style="text-indent:0; padding:0;"><span class="dl-count" style="color:red">0.3元即可提现</span> </p></div>

</div>
<div class="rc"> <a href="https://www.wszqz.com/87.html" target="_blank" class="download">查看教程</a><span class="stars"><em style="width:100%"></em></span></div> </li>

<!--趣闲赚 -->
<li class="app" onmouseover="this.style.backgroundColor='#FFF5F0'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="background-color: rgb(255, 255, 255);"><a href="https://www.wszqz.com/144.html"><img src="https://www.wszqz.com/wp-content/uploads/2019/09/498e89aa2f85b83.jpg" width="72" height="72" border="0" class="icon"></a>
<div class="lc">
<h3 class="name"><a href="https://www.wszqz.com/144.html" target="_blank">趣闲赚 - 做悬赏任务日赚80元<span style="color:#FF0000">Hot!</span></a></h3>
<div class="info">

<p style="text-indent:0; padding:0;">

<span style="color:#CC3366">支持:</span><img src="https://www.wszqz.com/wp-content/uploads/2019/09/4779d1a5a1706a0.png" alt="安卓" style=" display:inline">
<img src="https://www.wszqz.com/wp-content/uploads/2019/09/1bdf605991920db.png" alt="苹果" style=" display:inline"></p>
<p style="text-indent:0; padding:0;"><span class="dl-count" style="color:red">满2元既可提现</span> </p></div>

</div>
<div class="rc"> <a href="https://www.wszqz.com/144.html" target="_blank" class="download">查看教程</a><span class="stars"><em style="width:100%"></em></span></div> </li>

<!--蚂蚁帮扶 -->
<li class="app" onmouseover="this.style.backgroundColor='#FFF5F0'" onmouseout="this.style.backgroundColor='#FFFFFF'" style="background-color: rgb(255, 255, 255);"><a href="https://www.wszqz.com/137.html"><img src="https://www.wszqz.com/wp-content/uploads/2019/09/428ed001e37a254.jpg" width="72" height="72" border="0" class="icon"></a>
<div class="lc">
<h3 class="name"><a href="https://www.wszqz.com/137.html" target="_blank">蚂蚁帮扶 - 威客任务赚钱平台<span style="color:#FF0000">Hot!</span></a></h3>
<div class="info">

<p style="text-indent:0; padding:0;">

<span style="color:#CC3366">支持:</span><img src="https://www.wszqz.com/wp-content/uploads/2019/09/4779d1a5a1706a0.png" alt="安卓" style=" display:inline">
<img src="https://www.wszqz.com/wp-content/uploads/2019/09/1bdf605991920db.png" alt="苹果" style=" display:inline"></p>
<p style="text-indent:0; padding:0;"><span class="dl-count" style="color:red">满1元即可提现</span> </p></div>

</div>
<div class="rc"> <a href="https://www.wszqz.com/137.html" target="_blank" class="download">查看教程</a><span class="stars"><em style="width:100%"></em></span></div> </li>

</ul></div></div></div>

大家可以像我一样把这些代码放在文章页评论上方或者文章页底部,如图。

网赚网站添加文章页底部五栏网赚项目推广区就介绍到这儿了,下期我们再见。

赞(0) 打赏
未经允许不得转载:手赚线报网 » 网赚网站如何添加文章页底部五栏网赚项目推广区
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用支付宝就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏