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 == "item"'> <b:if cond='data:blog.isMobileRequest == "false"'> <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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' expr:title='data:post.title' type='text/javascript'/> </b:loop> <script type='text/javascript'> var maxresults=5;removeRelatedDuplicates();printRelatedLabels("<data:post.url/>");</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 == "item"'> <div id='related-posts'> <h4> Bài cùng chủ đề: </h4> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:loop> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </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 == "item"'>
<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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSSYX0pvk4t5ncojbwf6dT0GE7McBO71DR2nIwBUptDamkXxD7zJ9JMA6yVllOJtoS5YFfkN5Ln8vLMtJKbYXV2dqad2KH4jh67vOrl_n_9nqE4xfuvI2qDM1nKINa1DKHfARa_mG7TqE/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 == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="<b>Related Posts:</b>"; 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
0 nhận xét: