Để giúp độc giả thuận tiện hơn trong quá trình xem blog. Đồng thời giữ chân độc giả thì bài viết liên quan là một phần rất quan trong không thể thiếu: Nó sẽ giúp bạn điều hướng độc giả đi theo các nội dung bài viết của bạn và giữ chân họ ở lại blog của bạn lâu hơn (đây chính là yếu tố rất quan trong trong SEO)

Hôm nay namkna giới thiệu cho các bạn tiện ích bài viết liên quan dạng ảnh thumbnail thu nhỏ đại diện cho cả bài viết kết hợp với hiệu ứng mô tả tooltip, phần tiêu đề và mô tả sẽ hiện ra khi dê chuột vào hình ảnh. Điểm đặc biệc hiệu ứng chuyển động trượt ngang của phần tiêu đề và mô tả hoàn toàn từ CSS3.

Ảnh minh họa:
Bài viết liên quan có ảnh và hiệu ứng mô tả tooltip
Xem demo:

» XEM DEMO


» Cách tiến hành:

1- Đăng nhập vào blogger
2- Chọn Mẫu (Template)
3- Chọn Chỉnh sửa HTML → Chọn Mở rộng mẫu tiện ích
4- Dán trước thẻ ]]></b:skin> đoạn code bên dưới 
#related_posts h4{font-size:16px;font-family:&#39;georgia&#39;,&quot;Arial Narrow&quot;,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:&quot;&quot;;width:0;height:0;border-width:10px 5px;border-style:solid;border-color:black transparent transparent transparent;position:absolute;top:100%;left:11px}
» Tùy chỉnh!
  • font-size:16px là cỡ chữ bài viết liên quan
  • width:120px;height:120px; lần lượt là chiều rộng và chiêu cao của ảnh.
  • border:1px solid #ddd là đường viền của ảnh. có độ rộng 1 picel và màu #ddd
  • opacity:0.9 là dộ mờ của ảnh khi dê chuột vào.
  • background:#F4F4F4 là màu nền của phần tooltips mô tả. Xem bảng mã màu của namkna tại đây
  • font-size:15px là cỡ chữ tiêu đề bài viết.
  • width:300px; là độ rộng của tooltips
  • top:-50%;Vị trí tooltip so với lề dưới.
  • left:200px Vị trí toolips so với lề trái.
5- Dán đoạn code bên dưới vào trước thẻ </head>
<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/AVvXsEg4X8BFdQ-Cf6Ixr2aUQdE66Kz6szvn7QFjYSXe7GkH-j83Vjd5oadIzSTCPZdvSwrehMjcZM-jAUXJwCwNRB7hAvKi3wulZVmDblEbxoYon59IW4CzTQgmPfZHw2toDg3VOjxXSYrg3Wc/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>
6- Tìm thẻ sau:
<div class='post-footer'>
Hoặc:
<div class='post-footer-line post-footer-line-1'>
- Dán sau nó đoạncode bên dưới:
<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>
7- Lưu mẫu lại và quay trở lại một bài viết bất kỳ.