Like nhé

Search This Blog

Sunday, April 9, 2017

CÁCH TẠO BÀI VIẾT LIÊN QUAN CÓ THUMBNAILS ĐẸP VÀ ĐƠN GIẢN CHO BLOGSPOT

Khi thiết kế Blogspot, nếu bên dưới mỗi bài viết trống trơn không có gì thì nhìn thật là đơn điệu và thiếu chuyên nghiệp đúng không, vậy chúng ta nên chèn gì vào dưới bài viết nhỉ? Theo cá nhân mình nghĩ cần thiết nhất chính là tiện ích Bài viết liên quan. Khi có Bài viết liên quan phía dưới, trong blog của bạn sẽ chuyên nghiệp hơn, đẹp hơn và đồng thời đây cũng là một công cụ vô cùng tốt để cung cấp thêm thông tin có liên quan cho người đọc, tất nhiên người đọc click vào bài viết khác thì lượt xem của blog bạn tăng lên, mà bạn biết mức độ quan trọng của lượt xem rồi đấy.

Mình thì không phải dân thiết kế Template chuyên nghiệp gì nhưng lên mạng thấy nhiều bạn tìm kiếm rồi làm hoài mà không được nên mình xin hướng dẫn các bạn chèn tiện ích Bài viết liên quan vào dưới bài viết cho blogspot có thumbnails (ảnh thu nhỏ) luôn, đơn giản mà lại đẹp. Đây cũng là mẫu mà mình đang áp dụng luôn nhé.



Bước 1: Bạn vào giao diện điều khiển chính của Blogspot -> chọn Templates -> Edit HTML

Bước 2: Bạn tìm thẻ </head> (bằng cách Ctrl+F rồi nhập vào </head>

Bước 3: Copy đoạn code dưới đây và Dán vào bên trên thẻ </head> vừa tìm được

<!--BAI VIET LIEN QUAN-->
<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>
<!--BAI VIET LIEN QUAN-->


Ghi chú: Bạn có thể chỉnh sữa một số thông số in đỏ (kích cỡ ảnh thu nhỏ) để Bài viết liên quan hiển thị theo ý của bạn nhé. Còn nếu không rành thì cứ để nguyên, mình thấy mặc định của nó cũng đẹp rồi

Bước 4: Tìm đoạn code này :    <div class='post-footer'> 

Bước 5:  Copy đoạn code dưới đây và dán vào bên trên đoạn code vừa tìm được ở trên.

<!--BAI VIET LIEN QUAN-->
<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>
<!-- BAI VIET LIEN QUAN-->



Ghi chú: Số 5 in đỏ là số bài viết liên quan bạn muốn hiển thị, bạn hãy sủa lại theo ý muốn của mình nhé.

Bước 6: Save Template lại và vào bài viết nào đó trên blog của bạn để xem thành quả nhé. 

Chúc bạn thành công.
Comment blog của bạn nếu bạn thành công để mình ghé thăm nhé.
Có vấn đề gì bạn cứ comment mình sẽ cố gắng hỗ trọ :D

CHIA SẼ BÀI VIẾT NÀY