cara pasang artikel Terkait plus shere media sosial rensposiv

Di pagi ini yang cerah!!!!!

Sahabat anna berbagi shared nih cara membuat artikel terkait di bawah postingan
dan sekaligus di sebelahnya terdapat shere media sosail rensposiv tepatnya bersebelahan deh..
seperti di blog ana lumayan bagus kan

artikel terkait adalah artikel yang berhubungan dengan artikel yang sahabat baca atau di buka. maka, di bawahnya akan terdapat bebera judul postingan yang sudah kedalam kategorikan oleh pihak penerbit.

untuk shere media sosial rensposiv yang anna pasang seperti Facebook.twitter,google plus dan Rss semuanya sudah menggunakan efek hanover.
 ok sahabat langsung ajj  ya  di pagi ini yang cerah

pertama sahabat log in terlebih dahulu ke blog sahabat
 setelah itu sahabat
cari kode </head> letakan kode di bawah ini tepat di atasnya.

<script type='text/javascript'>
  var relatedpoststitle=&quot;Baca juga Artikel ini:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script> 

setelah itu sahabat  cari kode <data:post.body/> letakan kode di bawah ini tepat di bawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='0' cellspacing='0' color='#ffffff' width='600'>
<tr>
<td align='left' style='background-color: #ffffff; padding: 5px;' width='300'>
&lt;style&gt;
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7g2fSqaSzBpwbN_6rtwQOwOgGWxpMuvq_cnIaUmr1RIdaEfPJhcnWwsCNVowgcuPiF7QF__X91KyKjR2CFi6IIvhqjwJ-DIdO7GhOPBsuqSOPyeXJsHTkNzYZ7X-xJ0P6RDI2l5v_o-Y/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
&lt;/style&gt;&lt;a href=&quot;http://desalinggarjati.blogspot.com&quot; style=&quot;font-size:0pt&quot;&gt;CB Blogger&lt;/a&gt;&lt;ul id=&quot;abt&quot;&gt;
&lt;li data-alt=&quot;Follow us on Facebook&quot;&gt;&lt;a class=&quot;icon facebook&quot; href=&quot;https://www.facebook.com/desa.linggajati&quot; target=&quot;blank&quot;&gt;Follow us on Facebook&lt;/a&gt;&lt;/li&gt;
&lt;li data-alt=&quot;Follow us on Google+&quot;&gt;&lt;a class=&quot;icon googleplus&quot; href=&quot;https://plus.google.com/103936483444691797511/posts&quot; target=&quot;blank&quot;&gt;Follow us on Google+&lt;/a&gt;&lt;/li&gt;
&lt;li data-alt=&quot;Follow us on twitter&quot;&gt;&lt;a class=&quot;icon twitter&quot; href=&quot;https://twitter.com/desalinggajati/&quot; target=&quot;blank&quot;&gt;Follow us on Twitter&lt;/a&gt;&lt;/li&gt;
&lt;li data-alt=&quot;Subscribe via RSS&quot;&gt;&lt;a class=&quot;icon rss&quot; href=&quot;http://feeds.feedburner.com/Desa Linggajati&quot; target=&quot;blank&quot;&gt;Subscribe via RSS&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</td>

<td align='left' style='background-color: #ffffff; padding: 5px;' width='300'>
<div id='related-posts'>
<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&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</td>
</tr>
</table><span style='font-size: 8px; text-decoration: none; text-align:right;'><a href='http://desalinggajati.blogspot.com' target='_blank'>[Get this widget]</a></span>
</div>
</div>
</b:if>
</b:if>

setelah itu sahabat cari kode ]]></b:skin>

#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:14px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0973CF;font:14px Arial}
#related-posts li{background:none;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

Save dan Lihat hasilnya gimana