Bài viết liên quan cho blogger là 1 tiện ích không thể thiếu trong mỗi Blog. Nó giúp lượt View Blog của bạn tăng lên và hiệu quả giữ chân độc giả trên blog của bạn.
Với mẫu bài viết liên quan dạng hiệu ứng thu nhỏ này giúp giao diện blog không bị chiếm quá nhiều dành cho phần bài viết liên quan.
Demo Blog: Ảnh bìa cho Facebook
- Hướng dẫn thủ thuật:
1. Đăng nhập vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F)Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
ul#related-posts{font:14px Oswald;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:95px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:89px;line-height:16px;position:absolute;width:84px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeN14e5zopScNN1TiBUxpcbgZ3B7qHdOH9tsRWNeYzTbXmLJxLLsb9UM-9UU5-PeRttRY-CUe8rmlKuC1O4cHpG9kEnd21wEDQ4kSLDuJgaVD2usY6qfmjy6KmIGEFaH9qCdyVcODEyyP/s1600/transparant-itviet360-com.png);display:block!important;}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}
3. Tìm đến 1 trong 4 tag sau:
Tag 1:
<div class='post-footer'>
Tag 2:
<div class='post-footer-line post-footer-line-1'>
Tag 3:
<div class='post-footer-line post-footer-line-2'>
Tag 4:
<div class='post-footer-line post-footer-line-3'>
4. Dán code dưới đâu vào dưới 1 trong 4 tag trên:
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr7X-q5hdXicOpASWMEk78lp1-dPXnc2yonr2i3-Wvn9qjPpPDZTzyOx_P0J35yGjY2_4qgC3M0CfpvrBBfK87UdQvkJJQAJ2zs-qCkTbkYmVAxrPcDp3iG7YWqZPLfWvSy42sEF8a0qWh/s1600/no-image-namkna-blogspot-com.jpg";
var maxresults=10;
</script>
<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.media$thumbnail.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{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUgE4Y6YZU-Di4DBLN7_Gc-4J0KWbkZM7wXvmks606Uai12hH3Tu-St_L5BU_GBZk4L4X0z-7YJyajWrvBX59cRIHvEEcMFcRa6o2yG1EvhpDYtk9fSOpaQ_9zwuQZTcBVkPgp2yzT9ZV/s1600/noimage-namkna-blogspot-com-1.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(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!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('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:90px;height:90px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<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=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
- Trong đó:
+ maxresults=5 là số bài viết liên quan các bạn muốn hiển thị.
5. Lưu lại và xem kết quả