Hướng dẫn tạo bài viết liên quan có chèn vị trí quảng cáo
Hôm nay mình sẽ hướng dẫn các bạn tạo bài viết liên quan cho blogspot có vị trí đặt quảng cáo đẹp.
Việc này cũng không có gì khó và quá phức tạp, tuy nhiên nó sẽ làm blog của bạn đẹp và được tối ưu vị trí đặt ads cũng như quảng cáo….
Bước 1: Vào Mẫu -> chỉnh sửa HTML–> Ctrl+F tìm đoạn này ]]></b:skin> bỏ code sau dưới nó.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
//]]>
</script>
<style>
.post-ads{width:300px;overflow:hidden}
.post-ads{display:block;margin:0;position:relative}
.post-ads{float:left;margin:0 10px 10px 0;position:relative}
.post-right{margin:0;padding:0 0 10px}
.post-right{margin-left:310px}
p.post-excerpt{margin:0;padding:10px;background-color:#ECF0F1;font-size:15px;font-weight:100;line-height:1.5em}
.tags-right{margin:0;padding-bottom:10px;background-color:#ECF0F1}
.tags{font-size:14px;color:#333;padding:5px}
.post-break-link{line-height:1.3em;margin:0 0 10px;color:#666}
@media screen and (max-width:599px){
.post-ads{float:none;margin:0 0 15px;width:100%}
.post-ads #HTML3{margin:auto}
.post-right{margin:0;padding:0 0 10px}
}
.related-post ul li{list-style-type:none}
.related-post{font-family: 'Roboto Condensed', sans-serif;margin:10px 0}
.related-post h4{color:#E74C3C;border-bottom:1px dashed #E74C3C;padding:5px 0;font-size:18px;margin-bottom:5px}
.related-post ul li{list-style-type:none;color:#2980B9;font-size:15px}
.related-post ul li a{list-style-type:none;color:#2980B9;font-size:15px}
.related-post ul li a:hover{list-style-type:none;color:#E74C3C;font-size:15px}
.related-post ul li:hover{list-style-type:none;color:#E74C3C;font-size:15px}
.related-post ul{margin-left:0}
#stars {
color: darkorange;
}
.author-profile {
background: rgba(255, 255, 255, 0);
border: 1px solid #E0E0E0;
margin: 0;
padding: 22px;
position: relative;
}
.author-profile img {
border: 1px solid #EFEFEF;
float: left;
border-radius: 50%;
margin-right: 15px!important;
}.author-profile > div > a{color:#444}
.author-profile > div{font-size:14px;font-family:helvetica;margin:0}
p.description{font-size:16px;line-height:1.7em;margin:0}
p.description a{color:#333;font-family:arial rounded mt bold}
a.g-profile{font-size:18px;margin:15px 0 5px}
.author-profile > div > div > div{float:right;font-size:12px}
</style>
</b:if>
Các bạn có thể chỉnh width của .post-ads, .post-righ thành kích thước phù hợp với blogspot của các bạn nha.
Bước 2: Chèn bài viết liên quan cho blogspot có vị trí đặt quảng cáo vào vị trí tương ứng.
Thướng bạn đặt dưới title của bài viết. Title bài viết nằm ngay dưới thẻ này <b:includable id=’post’ var=’post’> bạn chỉ cần tìm đoạn trên và kéo xuống 1 chút là thấy.
<!--quangcao-->
<b:if cond='data:blog.pageType == "item"'>
<div class='post-ads'>
<a href='http://www.congnghewebblog.com/' target='_blank'>
<img alt='Kho template blogspot đẹp' height='251' id='Image1_img' original='http://lh4.googleusercontent.com/-3BjEZpAKfCU/VoX_YDBWKgI/AAAAAAAAAeY/hzI35uQORXw/s1600/template-blogspot.gif' src='http://lh4.googleusercontent.com/-3BjEZpAKfCU/VoX_YDBWKgI/AAAAAAAAAeY/hzI35uQORXw/s1600/template-blogspot.gif' width='295'/>
</a>
</div>
<div class='post-right'>
<p class='post-excerpt'>
<data:post.snippet/>
</p>
<div class='tags-right'>
<span class='tags'>
<i class='fa fa-tags'/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>+</b:if>
</b:loop>
</span></div>
<script>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<5){document.write('<li><i class="fa fa-check-square-o"></i> <a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();}//]]>
</script>
<div class='related-post'>
<h4><i class='fa fa-bullhorn'/> Bài liên quan <i class='fa fa-star' id='stars'/><i class='fa fa-star' id='stars'/><i class='fa fa-star' id='stars'/><i class='fa fa-star' id='stars'/><i class='fa fa-star-half-o' id='stars'/></h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?max-results=3&alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
</div>
</b:if>
<!-- end quảng cáo-->
Nếu các bạn muốn tăng giảm số lượng bài viết liên quan thì chỉnh đoạn này: relatedTitles.length&&i<5
Đây mình đang để số lượng bài viết là 5. các bạn có thể để thành còn số khác.
Thay đoạn này dưới thành link ảnh quảng cáo hay ads của bạn.:
<a href='http://www.congnghewebblog.com/' target='_blank'>
<img alt='Kho template blogspot đẹp' height='251' id='Image1_img' original='http://lh4.googleusercontent.com/-3BjEZpAKfCU/VoX_YDBWKgI/AAAAAAAAAeY/hzI35uQORXw/s1600/template-blogspot.gif' src='http://lh4.googleusercontent.com/-3BjEZpAKfCU/VoX_YDBWKgI/AAAAAAAAAeY/hzI35uQORXw/s1600/template-blogspot.gif' width='295'/>
</a>
Mình vừa hướng dẫn các bạn xong các chèn bài viết liên quan có vị trí đặt quảng cáo. nếu các bạn không làm được comment bên dưới mình giải đáp. Thân!
DienDan.Edu.Vn Cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.DienDan.Edu.Vn! là một website với tiêu chí chia sẻ thông tin,... Bạn có thể nhận xét, bổ sung hay yêu cầu hướng dẫn liên quan đến bài viết. Vậy nên đề nghị các bạn cũng không quảng cáo trong comment này ngoại trừ trong chính phần tên của bạn.Cám ơn.
