Thêm mẫu quảng cáo với bài viết liên quan ngay dưới tiêu đề chi tiết bài viết

Gần đây cộng đồng Blogger rất thích tự mình sáng tạo trang trí thêm cho blog của mình nhiều hiệu ứng đẹp đồng thời với sự sáng tạo về việc chèn thêm các vị trí ads (quảng cáo vào blog còn giúp các Blogger tăng thu nhập qua việc phân phối quảng cáo nữa. Ngoài ra "chèn nút xem thêm cho bài viết", "link liên quan cho bài viết" còn giúp cho các bài viết trong blog của bạn liên kết chặt chẽ làm tăng lượt xem cũng như giảm tỷ lệ thoát site cho blog
Hôm nay Bchiase.com xin giới thiệu và hướng dẫn các bạn tạo mẫu bài viết liên quan kèm quảng cáo
Thêm mẫu quảng cáo với bài viết liên quan ngay dưới tiêu đề chi tiết bài viết
Đầu tiên các bạn truy cập quản trị vào mục Mẫu - Chỉnh sửa HTML
Các bạn chèn đoạn mã style vào trước thẻ </b:skin>
/* Bchiase.com Related Post & Ads */
.qc-header-post { float:left; width:100%; }
.post-ads { float:left; margin:0 10px 10px 0; position:relative; }
@media (max-width:600px) {
.post-ads { width:100%; } .post-right { margin-left:0 !important; width:100%; float:left; }
}
.post-body img { transition:all .3s; max-width:100%; }
.post-right { margin:0 0 0 310px; padding:0 0 10px; }
p.post-excerpt { margin:0; padding:10px; background-color:#ECF0F1; font-size:17px; line-height:1.5em; color:#F88C00; }
#related-posts { margin:10px 0; }
#related-posts ul li { list-style-type:none; color:#F88C00; font-size:16px; line-height:22px; max-height:22px; overflow:hidden; }
#related-posts ul li a { color:#006250; }
#related-posts ul li a:hover { color:#F88C00; }
#related-posts h4 { color:#E74C3C; border-bottom:1px dashed #E74C3C; padding:5px 0; font-size:18px; margin-bottom:5px; }
#related-posts ul { margin-left:0; }
#related-posts .fa { margin-right:5px; }
#random-posts img { border-radius:1000px; border:5px solid; color:#dddddd; float:left; margin-right:5px; width:75px; height:75px; background-color:#F5F5F5; padding:3px; transition:all 0.2s linear 0s; }
#random-posts img:hover { opacity:0.6; }
ul#random-posts { list-style-type:none; padding:0; }
#random-posts a { font-size:12px; text-transform:uppercase; padding:3px 0 5px; }
#random-posts a:hover { text-decoration:none; }
.random-summary { font-size:11px; background:none; padding:5px; margin-right:8px; }
#random-posts li { margin-bottom:10px; border-bottom:1px solid #EEEEEE; padding:4px; }
Đây là đoạn style mẫu cho tiện ích này. Các bạn có thể tùy chỉnh cho phù hợp với blog của bạn lưu ý cần hiểu rõ css cơ bản nhé.
Tiếp theo các bạn chèn đoạn mã sau vào sau đoạn mã tiêu đề bài viết nhé
    <!-- Block start content index -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='qc-header-post'>
<div class='post-ads' style='width:350px'>
<!-- Start of banner code -->
<script src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- display-post content -->
<ins class='adsbygoogle' data-ad-client='ca-pub-6659396293835516' data-ad-format='auto' data-ad-slot='4520424980' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- End of ouo.io banner code -->
</div>
<div class='post-right'>
<p class='post-excerpt'><data:post.snippet/></p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
<div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;<i class='fa fa-bullhorn'/>Bài viết liên quan&lt;/h4&gt;&quot;,numPosts: 2,summaryLength: 0,titleLength: &quot;auto&quot;,thumbnailSize: 0,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetStyle:1,homePage:"http://www.bchiase.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:0,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><i class="fa fa-check-square-o"></i><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a>'+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'></a></li>'}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</div>
</div>
</b:if>
</div>
</b:if>
</div>
</div>
<div style='clear:both'/>
</b:if>
Chúc bạn thành công với hướng dẫn này
Demo: http://duplexnhapkhau.blogspot.com/2016/05/cong-ty-tnhh-san-xuat-va-thuong-mai.html

Bài viết liên quan

loading...