Thủ thuật Related post(Bài viết liên quan) hôm nay Viettin24h 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. Mình tích hợp chia sẻ lên các mạng xã hội ngay trên tiện ích. Ảnh minh họa :Bắt đầu thủ thuật 1.Đăng nhập Blogger2.Chọn mẫu ==> Chỉnh sửa HTML3.Đặ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/AVvXsEiyl7XPuEXhiho1OrQlkkwpu19hOu_vQnKjAqAbKrTkf95_NYriBx4be3jGoBaiUAN9IvynkSYBLmF_mRxC0hZvqgto8urmzYTMnfo57Yz_hflJXzzNLNeGXidWUKMpGVDj_sNGlUjr-7Y7/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 code như : <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 == "item"'>
<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/AVvXsEiEa49EYj6HBGFH6TUmCYLh7QFpxvwEFIFxDgc_IydaTrWwJSTIPV99N_FLXRdyCFD0ghCvHKrnNhieNofw-6ZkDdZ7RM3QBqZyuHQgITquysMVI1e4xAg1jvubEiYZ4nhukF17cU5Z3mqV/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/AVvXsEh5PQWO1ZHxLiX6NWHL2oOV_LiFS36T2alCZ6Zeg7imtakMP_t_w08ppKoLCNJnHY6l0EJdX670IaWxUc5YdIocqOQxzCDI0zWs9b5bwibSCS35ZKRazrOYFUClq-JWLhF0yR19AJ-2ZOd0/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/AVvXsEjTDQqeZu4VInjtyojsex_Fc8vCZt6OdCvQPL9IdTE2EOJp1GxmkBu45BAygjnT_KX9KKu6KSiw-A_pXw-c3yMVMrpdNtNq-UaPIUHTO2fUScY0bSinpWG29C7iz1s_P0gv_ovoWLNXlCP0/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/AVvXsEjA8tA4Y4nWRG19e_p1zxp6dA5sMBr0IShEkrBwCrvoYsOVXV-yHdYEYbagLiyTnBcpdA9mpOVwm8iU9Q8qZxYqM1BCTvEI0P26v1p-VagzW-c_1CtM_mvTUtYa-x-pCU359WvtL7RYoyIB/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/AVvXsEhGCpl-09QMGs2odXIQqq1n6Nu2jmvKLA4wu1mWaT2ZI6BMh5xFsdUHPGPUx3AtzP3jlVhtQnP_d-xQtOhJ1fIONsp2GVq1Oxb53uRb6VvaC5dr5XcvzlWPE3Kif5HzlUzO_ipeYGpY5B4o/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/AVvXsEgPVihC4wFSB3ZX9MllccRFDanF_O5Fk0BxUNOCNYC1NntCNXwX-9sFuQM9xrVioZv0JeHZydY798Au5wXFkiUNV2_y-0NBJQhitGIXVbYgp1wMmPRUVMEFcQJeoQifmEidP7UlEHd-aQWn/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/AVvXsEgOOCzITAM3MzeEve4qN-id7HjXU6W1lX5Z9xJ6DLTBFHBEtlQHd4CK8NVKQEsKPLdUciCWFXCYSd8Z3LF3aqdGRe5wgUvXAbkkgdviOR6Y0y8j8NXdfJhNYGRoPTlRWsYz0oGWz4c99WIM/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/AVvXsEgmScx3u9c31E0saeiIy2QlYGyNc9Fch0Ytf7VPTZDaYwfz6YMMDBjYMfK-wsjy3cV4uHIf2rZCAQI4WtkY9OHpflpBQu6tL9BdpRkNZvnOzS0VgIv2GSSSQoWeOGeD9r7ppthjGaH_CGVc/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/AVvXsEjB0u-DHHzBXm1GosfEFMt3RTbGZi_tLx4KCC_kIAkBpCV6fit8tqbF0KYBVvM2jMLh78lVF6wKICYnMCxCGStBorn6FRe8M8bO9HizWJmx2LGDR4uaJ3_HHGHK4aJzuRtcxqHnLyXFmCl8/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='<h2>Các tin cùng chủ đề</h2>';rn='<h2>None Realated Posts</h2>';rcomment='Comments';rdisable='No Comments';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='https://lh6.googleusercontent.com/-eEyKnIr4mcw/TJ9r0SlNAUI/AAAAAAAAEOI/KK1Hew2EHwQ/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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=7;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</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/AVvXsEjYyRBlmsx_-yiGZibUnkvU3z5wOQ5yZACR4PaKoxNRuB2TMapk7ekDf-uFnlOKK-OVkOIaQJKmrNWn1FgZmRvIBEMcX_oZ4XK0I5wZgjsMOV85UC0BD4pvbtHw5g6ixLHrm4jgFOHqhgE/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>
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 .
Về trang chủ bạn sẽ thấy nó trắng toát không còn gì trên đó hết.
