Bài viết liên quan phong cách Metro kết hợp nút chia sẻ mạng xã hội cho blogger

Ở bài viết trước Viettin365.com đã chia sẻ đến các bạn Bài viết liên quan mới và cũ cùng chủ đề dạng 2 cột (Xem tại đây). Thủ thuật Related post(Bài viết liên quan) hôm nay Viettin365 giới thiệu đến các bạn khác với các thủ thuật trước ở chỗ : về tính thẩm mỹ, giao diện tiện ích, tự lấy ảnh tự động từ bài viết.... Đây là một thủ thuật mà mình thấy nó đáp ứng rất nhiều yếu tố của người sử dụng. Ngoài ra mình tích hợp luôn các nút chia sẻ lên các mạng xã hội (Nếu trang của bạn đã có thì có thể xóa đi)
Ảnh minh họa :

Bắt đầu thủ thuật 
1.Đăng nhập Blogger
2.Chọn mẫu ==> Chỉnh sửa HTML
3.Đặt code bên dưới trước thẻ :  ]]></b:skin>
                      

#related_posts2 { background-color:#FFF; margin:10px 0 0 0; padding:10px; -moz-box-shadow:inset 0 0 1px #000000; -webkit-box-shadow:inset 0 1px 1px #000000; box-shadow:inset 0 0 1px #000000 }
#related_posts2 h4 { color:#fff; font-size:15px; margin:-10px -10px 10px; padding:5px 3px; text-align:center; font-weight:bold; -moz-text-shadow:2px 0 0 #333; -webkit-text-shadow:2px 0 0 #333; text-shadow:2px 0 0 #333; position:relative; background-color:#00B4FF }
#related_posts2 ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#related_posts2 ul { margin-top:10px }
#related_posts2 li { float:left; width:100%; margin:0 0 5px}
#related_posts2 .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }
#related_posts2 strong { font-weight:bold; font-size:15px; line-height:1.1em }
#related_posts2 p { margin:2px 0 0; font-size:12px }
.loadingxx { width:100%; min-height:150px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy58v23DEiB6bqcHg2pl2H8hyphenhyphenxlfnzj11U8jXgMq9-OtFgtvEm-iytX2JVnheJwd55t-MWqs_fCcSIU4L8QsXUwA3AbEJexSuKs2BywGX2Z-u1FMjGBlQDwXnpDUw0A9zYEK1dV92w9b-D/s1600/loading-dip.gif) no-repeat center; display:block; text-indent:-9999px }
.kotak-dalem { background-color:transparent; padding:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; margin-bottom:0 }

4. Tìm đến 1 trong các thẻ :   

<div class='post-footer'>

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

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

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

và đặt code bên dưới sau thẻ trên

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.custom_images ul {display:inline; list-style:none}
.custom_images ul li {float:left; margin-right:1px}
#related-posts {clear: both;margin-top:20px;margin-bottom:20px;}
#related-posts h3{
border-bottom: 4px solid #333333;
font-family: Oswald,arial,Georgia,serif;
font-size: 18px;
padding-bottom: 5px;
text-transform: uppercase;
}
#related-posts ul li a {
    color:#fff;text-align:center;
}#related-posts ul li:nth-child(2) a {text-align:center;
color:#fff;
}
#related-posts ul li:nth-child(3) a {text-align:center;
color:#fff;
}

#related-posts ul li:nth-child(4) a {text-align:center;
color:#fff;
}

#related-posts ul {   margin-bottom: 20px; padding: 10px 0; }
#related-posts ul li {list-style:none;
float: left;
height: 180px;
margin: 0 10px 10px 0;
width: 200px;
font-size: 13px;

padding-bottom:10px;color:#fff;text-align:center;
}
#related-posts img:hover{opacity:0.7;height: 125px;}
#related-posts img {height: 130px;width: 200px;}
  #related-posts li:nth-child(2) img {display:none;width: 400px;}

#related-posts li:nth-child(3) img {display:none;width: 400px;}
#related-posts li:nth-child(4) img {display:none;width: 400px;}



  #related-posts  li:nth-child(2)  {background: #2C84EE;width: 400px;height: 40px;color:#fff;padding-bottom:10px;}
#related-posts  li:nth-child(1)  {background:#781766;}
#related-posts  li:nth-child(3)  {background:#CD5B45;width: 400px;height: 40px;color:#fff;padding-bottom:10px;}
#related-posts  li:nth-child(4)  {background: #000;width: 400px;height: 60px;color:#fff;padding-bottom:10px;}
#related-posts  li:nth-child(5)  {background: #044E94;}
#related-posts  li:nth-child(6)  {background:#E81750;}
#related-posts  li:nth-child(7)  {background:#FB8F02;height: 180px;
margin: 0 0px 10px 0px;
width: 200px;
font-size: 13px;}
</style>
<div class='addthis_toolbox'>
<div style='margin: 50px 0px 10px; font-size: 30px;'>Share this post</div>
<div class='custom_images'>
<span class='fade'><ul>
  <li><a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDNw-5lG5adqnkzVuE8nXZcpSVStDhz-RLMool7W5XdfK5lqMcBmVjpVkomAgMqLawrS_8BgxuExUK7eRSTHEgNt2KL6Atwok-Wh-Vl9t22jMccOnXyBY0Etpwgp-S3gAgYZkU653Fv0S/s57/Facebook%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_KILpaWLEdHbzkMVf_bNp_z5_HtRyDXxS5c4qBg2GNgILDThyphenhyphen1iy4iqmvL1YKy4PA4t5-2ffQ9O_Hj9UaG7ofzbwdm1pVPsjPJlVgVetFnpRisvxe-_BEeLzj68uVb4oEvt2zFxDvNBK/s57/Twitter%2520alt%25204.png' width='57'/></a></li>
  <li><a class='addthis_button_google_plusone_share'><img alt='Share to Google+' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGPQg4lwEzbruQbirYKUejTjn33iQwxu8Gnssjxz-JqNLtbyBzMYsB0As0xM2SNr2lg-G8pCyY8OZ1-cUPhMwIfZqrRsc81wfsXHx-V2lPi2fDcqjXFo47gBvShvzB0um_MrApUli3pZNP/s57/Google%252B%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_stumbleupon'><img alt='Share to Stumble Upon' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZLJEUXV8fQVBHHuwvpiZujSLNYcWN8l8Omf5AepTuH7VIUjwfCY9Du9AYPOfU-ZWB9Zb07LmPVudFwJZ_VV1rexdMOjkZ48OovCUbCFUt0zgOj54WZLL-aHIGM0GvS7YyorkGWfc_-LU/s57/StumbleUpon%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTjO5kZGFB1Wb5toLCXQaYxqaJh-_IASNIRUugURafJ93sczGuugrkQ3J9fkyCfcsNpwIYbp514zxE8SfbSIiQfZv9k0EFMwuioSPpXig72h3f_Be46Sl1c2AnjTF6zffCzWzm8YnkKpw/s57/evernote-icon.png' width='57'/></a></li>
  <li><a class='addthis_button_blogger'><img alt='Share to Blogger' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4TEONYM0gPUu3seaU9Ytv3J9KmjIbCbq-nzKm1KFkQOxkyeSk12fjr2Z50qHoKdPc0wtI80ynka_KyWDV5Kl1s2c1eboaVBfMcgKfJhgpsCMD9rwvSUSu0_JiT_0sgEE5dCHmlkeoZAik/s57/Google%2520Blogger.png' width='57'/></a></li>
  <li><a class='addthis_button_email'><img alt='Share to Email' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vof1j9fQsMcyKlSmPC5Cea-e-x677Ulg1iM252alSHcshmx-z-cChyNFOGWGOBvAOYrUvn6dnyucY37frJPPMKUhdSGXGCJzaHZGbYQ2AcZ7OjuEskIKRTvabBjW5yf11Id9n2Aq7Kkf/s57/Mail%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_yahoomail'><img alt='Share to Yahoo Messenger' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrEUgN299cHczHRH6BX6P9pNTVCmowXyD4BinxQhF14sFT3Ytkj-0DWPoGzWNChO-zP-VlYiYUGR5puVTFL5ymFVjGKH7T8ei-VY09TlBvSIv8q3XaTnzoweIEhiwq5Utm5aPpJvEh1yqN/s57/Yahoo%2521%2520alt%25201.png' width='57'/></a></li>
  <li><a class='addthis_button_more'><img alt='More...' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihY6rQRoGYehK3wZrKFkVI8WA9qWk4veckr2X9v7CqWDNYTam1B2T4qsdIaKhAS2F-5_knaIlQ3NX4gqIYR8IPoA800qGyvRKGyfy_sOOzY9SwEyIunlcV-bv8aSPR6_chqXhR4Ynjt5LF/s57/Share%2520alt%25201.png' width='57'/></a></li>
</ul></span>
</div>
</div>

<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h2>Các tin cùng chủ đề</h2>&#39;;rn=&#39;<h2>None Realated Posts</h2>&#39;;rcomment=&#39;Comments&#39;;rdisable=&#39;No Comments&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9uvacxPh8ZJ1xqyF-i_9V01M9RLyEAKLvooDABcTF3O9qYhOyYk1XnjJwGawVf6aA85tIV_Y0U4evaIyIkFmVvocMLovEKM2gn6d5PK8ItGB3VmmDcQv6epbcErQtaIJPzBZPt2UEf2o/s200-c/last%2528gr%2529256.jpg';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h4><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h4></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<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=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=7;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear:both'/>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("related-posts");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
 <div style='clear:both'/>

<div id='related_posts2'/>
<script type='text/javascript'>
//<![CDATA[
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:100,relatedTitle:"Các tin khác",readMoretext:"Chi tiết",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCjUxDLMfTV08pUwZsZJ38xZcxuwD47jgTJKs-BbtNwg1Klsy9o28DFcA_K3UWJv5TBC6hBm59OSptWgtp0M-rjBG9H4FUa2oJJGv8abYFplLfE9mAj2qyb7s_LFmH_y5zmr9hTEA2KY0/s70-c/20.jpg",rlt_thumb:55,recentTitle:"Recent Posts",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="related_posts2"></div>');f.containerSelector="#related_posts2"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#related-posts2-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#related_posts2"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related_posts2"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="related-posts2-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
relatedPostsWidget({
related_title: "Các tin khác",
containerSelector: "#related_posts2",
maxPosts: 4,
loadingClass: "loadingxx",
rlt_thumb: 50
});
//]]>
</script> 
    
</b:if>

Các bạn có thể thay đổi các mã mình đổi màu cho phù hợp với blog của mình.
Mình đã đổi màu đánh dấu để các bạn chỉnh sửa cho phù hợp với size và giao diện của Blog mình 
Chúc các bạn thành công .