Tạo Bài viết liên quan dạng ảnh thu nhỏ cho blog

Đăng bởi Admin | 12/7/13 | 0 nhận xét

Bài viết liên quan (related post) là một phần không thể thiếu với các blogger muốn hướng đến sự chuyên nghiệp và thu hút độc giả. Tiện ích related post hôm nay mình sẽ giới thiệu sẽ có dạng list ảnh thumbnail và tiêu đề sẽ hiện ra khi bạn dê chuột lên ảnh đó. Nhìn khá đẹp thích hợp cho các blog về hình ảnh hay các blog chuyên về báo trí.

Xem Demo:

XEM DEMO

Các bạn có thể xem ảnh minh họa bên dưới:

=> Làm thế nào đẻ thêm Related post với hình ảnh thumbnail vào blogspot.

1- Đăng nhập vào blog

2- Chọn mẫu (template)

3- Chọn chỉnh sửa HTML => Chọn mở rộng tiện ích mẫu

4- Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>:

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/AVvXsEi8hIykx-nUVYl5IcoOeKfClzlZcqTXMcrvgwxmuszfxyPEYOC5UuSV5LC7-gbxdnqcQdwxFsY_VT8QNm-oCGJV2vIfaR9TIUC8N8iCHwxL_eZfygCaBUYuclja-FLPdV-f3EQfl23CzCCr/s1600/transparant-namkna-blogspot-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}

5- Tìm thẻ 1 trong 4 thẻ sau:
Thẻ 1:

<div class='post-footer'>

Thẻ 2:

<div class='post-footer-line post-footer-line-1'>

Thẻ 3:

<div class='post-footer-line post-footer-line-2'>

Thẻ 4:

<div class='post-footer-line post-footer-line-3'>

=> Thêm và sau 1 trong các thẻ trên đoạn code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2>Related product you might see:</h2>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNhAyMw5gJPAS8VMb5BHGQecQzKhOnMR-X0cRzteH-Ebhn9JZhNSkmwk3CO7nbw_Vyf2nhzcX4XXIr40PyAB0NQ1SRJo9GQJyIezlYqbsL4oSeKM-Y7tQkdSjGMtg6puBlGKdPL1EOY5LO/s1600/no-image-namkna-blogspot-com.jpg&quot;;
var maxresults=5;
</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/AVvXsEiNwaojnMAM2YFzshcc46P0efJSdrsgPhsamhceULUJGM8nfhN2kcw2ucaP0oyYGRrDBu8u7Hk90gwTc_oxxK0Es4uhyphenhyphen1d3le2msU-m7chXbHgTCFMJSOBSfgh6eONanC620TwGH9bwrijV/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 != &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=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>      

Tùy chỉnh:

var maxresults=5; là số hình ảnh thumbnail muốn hiển thị.

Thay Related product you might see: thành chữ bạn muốn như: bài viết liên quan hoặc có thể bạn quan tâm hay từ nào khác tùy ý bạn,

6- Lưu mẫu lại và xem kết quả nha!
Xem thêm:

• Bài viết liên quan theo nhiều label cho Blog (đã sửa lỗi hiển thị font Tiếng Việt)
• Tạo Bài viết liên quan theo chủ đề cho Blogger
• Tạo tiện ích Bài viết liên quan cho Blogger
• Tạo Bài viết liên quan có hình ảnh cho Blog
• Tạo Bài viết liên quan có ảnh và hiệu ứng mô tả tooltip
• Tạo hộp bài viết liên quan dưới tiêu đề bài viết cho blog
• Bài viết liên Quan gồm danh sách ảnh và bài viết

                                                                                                                         Theo : namkna

                                                                                                                        Thu thuat vi tinh