Một số code bài viết liên quan cho Blogspot nhẹ nhất 2018

Một số code bài viết liên quan cho Blogspot nhẹ nhất 2018. Đây là những code bài viết liên quan hay, đơn giản với những js load nhẹ và gọn. Đính kèm trực tiếp lên file HTML của theme. Đây là mình lấy từ một số mẫu mình đã làm, nó rất ok.

Một số code bài viết liên quan cho Blogspot nhẹ nhất 2018
Một số code bài viết liên quan cho Blogspot nhẹ nhất 2018

Mẫu số 1- Mẫu điển hình từ template hỗn tạp blog

Ưu điểm của mẫu này là css rất gọn, JS cũng vô cùng đơn giản và tiện lợi. bài viết liên quan cho Blogspot  theo dạng này rất được phổ biến và không có thumnail.

Css:

#related-posts{margin:10px 0}
#related-posts ul li{list-style-type:none;color:#00f;font-size:16px;line-height:22px;max-height:22px;overflow:hidden}
#related-posts ul li:before{font-family:FontAwesome;content:"\f04b";padding-right:5px}
#related-posts ul li a{color:#00f}
#related-posts ul li a:hover{color:#fa3e3e}
#related-posts h4{color:#d83f3f;border-bottom:1px dashed #333;padding:5px 0;font-size:18px;margin-bottom:5px;font-weight:700}
#related-posts ul{margin-left:0}
#related-posts .fa{margin-right:5px}

Và đoạn JS cực kì đơn giản, vô cùng gọn nhẹ trước thẻ đóng </head>

<script type='text/javascript'>
 //<![CDATA[
 function related_results_labels(a){for(var b=0;b<a.feed.entry.length;b++){var c=a.feed.entry[b];titles[titlesNum]=c.title.$t;for(var d=0;d<c.link.length;d++)if("alternate"==c.link[d].rel){urls[titlesNum]=c.link[d].href,time[titlesNum]=c.published.$t,titlesNum++;break}}}function removeRelatedDuplicates(){var a=new Array(0),b=new Array(0);e=new Array(0);for(var c=0;c<urls.length;c++)contains(a,urls[c])||(a.length+=1,a[a.length-1]=urls[c],b.length+=1,b[b.length-1]=titles[c],e.length+=1,e[e.length-1]=time[c]);titles=b,urls=a,time=e}function contains(a,b){for(var c=0;c<a.length;c++)if(a[c]==b)return!0;return!1}function printRelatedLabels(a){var b=a.indexOf("?m=0");b!=-1&&(a=a.replace(/\?m=0/g,""));for(var c=0;c<urls.length;c++)urls[c]==a&&(urls.splice(c,1),titles.splice(c,1),time.splice(c,1));var d=Math.floor((titles.length-1)*Math.random()),c=0;if(document.write("<ul>"),0==titles.length)document.write("<li>Không có bài viết liên quan → </li>");else for(;c<titles.length&&c<20&&c<maxresults;)b!=-1&&(urls[d]=urls[d]+"?m=0"),document.write('<li><a href="'+urls[d]+'" title="'+time[d].substring(8,10)+"/"+time[d].substring(5,7)+"/"+time[d].substring(0,4)+'">'+titles[d]+"</a></li>"),d<titles.length-1?d++:d=0,c++;document.write("</ul>"),urls.splice(0,urls.length),titles.splice(0,titles.length)}var titles=new Array,titlesNum=0,urls=new Array,time=new Array;
 //]]>
 </script>

Tiếp theo chèn đoạn sau chèn vào bất cứ đâu bạn muốn. Thường là ngay dưới tiêu đề:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
 <div id='related-posts'>
 <h4>
 <i class='fa fa-bullhorn'/>
 Bài viết liên quan:
 </h4>
 <b:loop values='data:post.labels' var='label'>
 <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' expr:title='data:post.title' type='text/javascript'/>
 </b:loop>
 <script type='text/javascript'>
 var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script>
 </div>
 </b:if> </b:if>

Xem demo bài viết liên quan cho Blogspot  ở đây 

Mẫu số 2: Demo giống blog đầu to

Thêm css sau

/* Related post */
#related-posts{float:left;width:100%;margin:0}
#related-posts h4{font-size:16px;padding:0;color:#4aa02c}
#related-posts ul{padding:0 15px;margin:0}
#related-posts ul li{list-style-type:none;border-bottom:1px solid #e6e6e6;padding-bottom:5px}
#related-posts li{font-size:15px}
#related-posts ul li:before{content:"\f006";font-family: FontAwesome;text-decoration: inherit;padding-right:0.5em;font-size:15px}

Thêm Js trước  thẻ đóng </head>

<script type='text/javascript'>
 //<![CDATA[
 function related_results_labels(a){for(var b=0;b<a.feed.entry.length;b++){var c=a.feed.entry[b];titles[titlesNum]=c.title.$t;for(var d=0;d<c.link.length;d++)if("alternate"==c.link[d].rel){urls[titlesNum]=c.link[d].href,time[titlesNum]=c.published.$t,titlesNum++;break}}}function removeRelatedDuplicates(){var a=new Array(0),b=new Array(0);e=new Array(0);for(var c=0;c<urls.length;c++)contains(a,urls[c])||(a.length+=1,a[a.length-1]=urls[c],b.length+=1,b[b.length-1]=titles[c],e.length+=1,e[e.length-1]=time[c]);titles=b,urls=a,time=e}function contains(a,b){for(var c=0;c<a.length;c++)if(a[c]==b)return!0;return!1}function printRelatedLabels(a){var b=a.indexOf("?m=0");b!=-1&&(a=a.replace(/\?m=0/g,""));for(var c=0;c<urls.length;c++)urls[c]==a&&(urls.splice(c,1),titles.splice(c,1),time.splice(c,1));var d=Math.floor((titles.length-1)*Math.random()),c=0;if(document.write("<ul>"),0==titles.length)document.write("<li>Không có bài viết liên quan → </li>");else for(;c<titles.length&&c<20&&c<maxresults;)b!=-1&&(urls[d]=urls[d]+"?m=0"),document.write('<li><a href="'+urls[d]+'" title="'+time[d].substring(8,10)+"/"+time[d].substring(5,7)+"/"+time[d].substring(0,4)+'">'+titles[d]+"</a></li>"),d<titles.length-1?d++:d=0,c++;document.write("</ul>"),urls.splice(0,urls.length),titles.splice(0,titles.length)}var titles=new Array,titlesNum=0,urls=new Array,time=new Array;
 //]]>
 </script>

Tiếp theo

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='related-posts'>
 <h4>
 Bài cùng chủ đề:
 </h4>
 <b:loop values='data:post.labels' var='label'>
 <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
 </b:loop>
 <script type='text/javascript'>
 var maxresults=10;
 removeRelatedDuplicates();
 printRelatedLabels(&quot;<data:post.url/>&quot;);
 </script>
 </div>
 <div style='clear:both'/>
 </b:if>

Xem demo ở đây

Bài viết liên quan với thumnail

css +js  code bài viết liên quan cho Blogspot nhẹ nhất 2018 trước thẻ đóng </head>

 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Chèn đoạn code sau xuống cuối bài viết

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Chúc các bạn tạo  bài viết liên quan cho Blogspot  tốt nhất 2018. Đây là những code mình đã tổng hợp lại. Hi vọng sẽ hữu ích với các bạn trong năm mà blog hỗ trợ https cho tên miền tùy chỉnh chính thức.

Ngoài ra thì nó còn hỗ trợ các bạn seo rất tốt nhé. Đây là điểm cộng lớn trong seo.

Bài viết cùng Serie<< Tin cực vui: Blogspot chính thức hỗ trợ https cho tên miền tùy chỉnh
Cùng chuyên mục:

Add Comment