Bài viết liên quan chuyên nghiệp kết hợp chia sẻ mạng xã hội cho Blog

Người đăng: yeu mai em on Thứ Ba, 27 tháng 8, 2013

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 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/AVvXsEiXf6En40IcY8AuIemlIQr1wMgHi8yCJ8CJy6WoO8lnB3HmNmQkm5LemQ4mwFnEY-pHCJ6tIAXLD6ZMSJUA96Nc6r5-ynXKY9ybejmIcLygfQy8ArSMGgULefz4921yCSoj1ZyYMzTeV6h0/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 == &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/AVvXsEh4-caudzNVz22EIi8xT0zUf5bVzQj-rR2v6-HeZq65k322rgwXQadgl2rfpp9F6eH5ZtXCdo2pONIXCqIrSMlbCZNJQUeRz7JRMSxVBPBuKeQGR3v9C21wL7a_LhMNyhD2s4KNzCtXnSnx/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/AVvXsEh3cdbzeh8h8Qxec4RhB9qs7_8wLb_eUKqph-bO8HDxlbare3P9ugb6JrgVqBGHAnk7VaOJ0knQzigD6mq4NJP21BwTTPymS171jQWucn4ngKRwRQNothtKXsSe52xj425acv1l59sryYty/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/AVvXsEiDVgW433fL9iHnNrP-h6JwP51mPVbj2qKPy67cPHSm5LVtQztr0JJrt3oFq6OjemRtLtvVZsZYNgjlZKt7l0TPoNqoLYiKJww2SfgfWf1MrC1PB1xDTKMF6-vU8T9Gp4KGB50QvInp-EnY/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/AVvXsEh5LwCPcSyA8B13D_mk1DD047e1iUQJHVJOGVaG0O92DbvVhbtgCnJeCMsIZ2SDn-xXKL9F9ehrjsNdj-e-8FarYauLSsbfdeApBbBqLlI63o7_xwJe8DD1r04vLjZAMP-xV-k67mttW7yF/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/AVvXsEhK4hwJDdVo7p7kRml_8x0VlbXzTfKl4MXINLdr4EZvzN7rQbBlitnfVMD26zGP2kVpNJsVeNmE0EWlYi1YBwq_wfUsfsTHUgZlgmJpm2ht-nvP-fiSs5e3kgxdfrWJPy_YX_7BsaVdqrv5/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/AVvXsEgqXhb4CRfCq-rtzFZuhTUmimH6DQ-PDBebWjY1BiJKg2rEDNIRaePavzGXjwiVoJ0JreqMpDRQZaoxyRLIZm1lc4t64YHpqN3C0FGqC-J-c7eKS4I9bZp59_tz3H8x6OoSkWOkX1ta1LQ6/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/AVvXsEiNJHBNRLiVV2JLCGM-wGbHvvJPtC9eIQH2eMctuCnkBKOoKwex7YKK_mprLoHI3a-DsqrYghW_pBKoyl6kEdsMeg5kQI8caEzbH3ef0sUhaldfq1Tkzu7Y_Fzu38efqrohnL66EJ0wDH1h/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/AVvXsEjDTus4TkxeYd8GDAIsrTg49AM2tazNfgMFNtQ6GJWDBL1Mr2SxvXpc088XAdxjWfkncsTsWBKgL_jpwbnIOBk_OYiHk1enRqKwqWOnN9J5mUlD4T_7lyUFCMWfop-kcvNq715rWg8Ivk27/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/AVvXsEhfY-Zj2_jRPaMJuxB7w3JZuBw2bEntOK1-syrK5QKeim5RkwdPO7E6Krv6rYgAVuo3PvNN7_eB0FIn1X1AT61hKuNfas6BXEqt0_Y1sRYY8WQHTZhBygjSKx1qhsgq59hg0YBYlLnPX9uC/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/AVvXsEj0XVLf4h4VLd71Cb5QpQedt5uBQn6eI4xYUCXAh-ZML23YwEqZud17EtKUkaPpbwGLJ1zn3Tyh1r45No0P2GGVTK23nqYmznVMnQsGnMEXw_XyjoPUpe1ehhdn0WZLKFJzJm-dzQBdEJg/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/AVvXsEgDqq8kg9AwE-joQKTIZM3wd0Ocw0spuJV7f_sG5gQBHna1FNdJF7j0wZqqkSGDef478kbxycGna7V3JjrbdrWJOJfkwP0Bgm9ZOvb6HWPV8ADiBrPi6FhyphenhyphenjOxIqcA0hWmB_w7LiS5zxhY/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 .

Bài viết liên quan chuyên nghiệp kết hợp chia sẻ mạng xã hội cho Blog

{ 0 nhận xét... read them below or add one }

Đăng nhận xét

shares

Like

menu

Category

Popular Posts

About Me

Labels

Recent Posts

Categories

Subscribe

Recent Comments

Popular Posts

Connect With Us

Popular Posts

Bài viết liên quan chuyên nghiệp kết hợp chia sẻ mạng xã hội cho Blog

Related Post on Blogspot tips , Related posts

{ 0 nhận xét... read them below or add one }

Đăng nhận xét

shares

Like

menu

Category

Popular Posts

About Me

Labels

Recent Posts

Categories

Subscribe

Recent Comments

Popular Posts

Connect With Us

Popular Posts