Tạo Bài viết liên quan có ảnh và hiệu ứng mô tả tooltip

Cách tiến hành:

#related_posts h4{font-size:16px;font-family:'georgia',"Arial Narrow",Arial,sans-serif;text-transform:capitalize;margin:10px;text-shadow: 0.5px 0.5px 1px #666}
#related_posts{height:180px}
#relpost_img_sum img{width:120px;height:120px;border:1px solid #ddd}
#relpost_img_sum li:hover .isirelated{visibility:visible;opacity:0.9;left:10px}
#relpost_img_sum li{list-style:none;width:120px;height:120px;position:relative;float:left;margin-right:5px}
.isirelated h5{text-transform:capitalize;font-size:15px;margin-bottom:3px}
.isirelated{width:300px;z-index:2;padding:5px;background:#F4F4F4;position:absolute;top:-50%;left:200px;visibility:hidden;opacity:0;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s}
.isirelated::after{content:"";width:0;height:0;border-width:10px 5px;border-style:solid;border-color:black transparent transparent transparent;position:absolute;top:100%;left:11px} 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relnojudul=0,relmaxtampil=5,numchars=150,reljudul=[],relurls=[],relcuplikan=[],relgambar=[];function saringtags(b,e){for(var a=b.split("<"),c=0;c<a.length;c++)-1!=a[c].indexOf(">")&&(a[c]=a[c].substring(a[c].indexOf(">")+1,a[c].length));a=a.join("");return a=a.substring(0,e-1)}
function relpostimgcuplik(b){for(var e=0;e<b.feed.entry.length;e++){var a=b.feed.entry[e];reljudul[relnojudul]=a.title.$t;postcontent="";"content"in a?postcontent=a.content.$t:"summary"in a&&(postcontent=a.summary.$t);relcuplikan[relnojudul]=saringtags(postcontent,numchars);postimg="media$thumbnail"in a?a.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3-RPCEVLRTZCeu9or9drJ5KCGL6vFDrMQvH6NskueFAckyNpMN76CGpTE1PtpvoNnh0CRIW58j0Rbsy5ltH6xbzMCl2uFFwvAIDHNSheIKCwvoKXW45ybFgyDQTZ1IP50vPTxnAK87o/s1600/no-image-namkna-blogspot.PNG";relgambar[relnojudul]=postimg;for(var c=0;c<a.link.length;c++)if("alternate"==a.link[c].rel){relurls[relnojudul]=a.link[c].href;
break}relnojudul++}}function contains(b,e){for(var a=0;a<b.length;a++)if(b[a]==e)return!0;return!1}
function artikelterkait(){for(var b=[],e=[],a=[],c=[],d=0;d<relurls.length;d++)contains(b,relurls[d])||(b.length+=1,b[b.length-1]=relurls[d],e.length+=1,e[e.length-1]=reljudul[d],a.length+=1,a[a.length-1]=relcuplikan[d],c.length+=1,c[c.length-1]=relgambar[d]);reljudul=e;relurls=b;relcuplikan=a;relgambar=c;for(d=0;d<reljudul.length;d++){var b=Math.floor((reljudul.length-1)*Math.random()),e=reljudul[d],a=relurls[d],c=relcuplikan[d],f=relgambar[d];reljudul[d]=reljudul[b];relurls[d]=relurls[b];relcuplikan[d]=
relcuplikan[b];relgambar[d]=relgambar[b];reljudul[b]=e;relurls[b]=a;relcuplikan[b]=c;relgambar[b]=f}d=0;e=b=Math.floor((reljudul.length-1)*Math.random());for(c=document.URL;d<relmaxtampil&&!(relurls[b]!=c&&(a="<li class='news-title clearfix'>",a+="<a href='"+relurls[b]+"' rel='nofollow'  target='_top' title='"+reljudul[b]+"'><img src='"+relgambar[b]+"' /></a>",a+="<div class='isirelated'><h5>"+reljudul[b]+"</h5>",a+="<span class='news-text'>"+relcuplikan[b]+" ... </span></div>",a+="</li>",document.write(a),
d++,d==relmaxtampil))&&!(b<reljudul.length-1?b++:b=0,b==e););};
//]]></script>
</b:if>

<div class='post-footer'> 

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear: both;'/>
<div id='related_posts'>
<h4>Bài Liên Quan</h4>
<div id='bpslidein_place_holder'/>
<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=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<span class='glap'><ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul></span>
</div>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("related_posts",120);
//]]>
</script>
</b:if>

• 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 hộp bài viết liên quan dưới tiêu đề bài viết cho blog
• Tạo Bài viết liên quan dạng ảnh thu nhỏ cho blog
• Bài viết liên Quan gồm danh sách ảnh và bài viết