Widget "Related Post" untuk blogger

Widget posting terkait adalah "perangkat" penting untuk setiap blogger. Anda harus melihatnya di setiap situs. Ini sebenarnya adalah posting terkait dari apa yang sedang Anda baca. 
Saya selalu mencatat bahwa tidak ada blog yang sama, sehingga kejutan mungkin terjadi, jangan salahkan saya. Meskipun, betapapun sulit tampaknya, selalu ada solusi - misalnya, saya dapat menghabiskan tiga atau empat jam mencari satu kode di blogger atau wordpress atau platform apa pun. Solusinya ada, secara pribadi untuk widget ini, yang juga paling sederhana, itu yang paling merepotkan, misalnya, Bagi mereka yang berat, saya menginstal tanpa masalah. 
Bagaimana tampilan widget ini? 
Widget ini sedemikian rupa sehingga tidak menampilkan pos seperti mis. linwithin atau outbrain atau sudah ada bos tetapi yang benar-benar dibutuhkan. Dengan menggerakkan tetikus Anda di atas thumbnail, Anda akan melihat tulisan tulisan tersebut. 
Screenhoot:

Pertama-tama, Demo: Klik Demo
Langkah demi Langkah:  
Masuk, buka blog yang Anda inginkan, klik pada "Templat" ke "HTML" dan kemudian lanjutkan ke ini. 1. Cari tahu  ]]> </ b: skin> (selalu gunakan CTRL + F), Anda akan merasa lebih mudah untuk menemukan apa yang Anda butuhkan, 2. Segera di atasnya, tambahkan kode di bawah ini

  

/* Mixer Thumbnail Related Posts With ToolTips --- */
.related-post .post-thumbnail {
 z-index: 1;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0;
 display: block;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: inset 2px 2px 5px #444;
 -moz-box-shadow: inset 2px 2px 5px #444;
 box-shadow: inset 2px 2px 5px #555;
}
.related-post {
 float: left;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0 10px 10px 0;
 background: #F6F6F6;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 }
.related-post .related-post-title {
 display: none;
 float: left;
 background: #000;
 color: #fff;
 text-shadow: none;
 font-weight: bold;
 padding: 10px;
 position: absolute;
 top: -20px;
 left: 40px;
 z-index: 2;
 width: 200px;
 -webkit-box-shadow: 0 0 2px #444;
 -moz-box-shadow: 0 0 2px #444;
 box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;} 
 

3. Sekarang cari kode ini atau yang sejenis, pasti ada.

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

4. Setelah Anda menemukan kode ini atau yang serupa, tambahkan kode berikut tepat di bawahnya.

<div id='related-posts'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>
Related Posts</h3>
';rn='<h3>
   No related post available</h3>
';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=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;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJvA62F89OoUD0IXHAuQzE5H8H1LnhUw7zcKP-YZ3aq6y4Ev6QoaP-gC-alifGIMjF3eGBAfylh8p16cK506dCqsP5JI5wTvDbcODDd__svNqTFsKbHhNuenA-qgdJh4axbmvoMoKaWge/'};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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=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);timeR.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+='<div class="clear"/>
</div>
<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+='<div class="related-post">
<div class="related-post-title">
'+titles[c]+'</div>
<a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div>
</div>
';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'>varmaxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</b:if>
</div>
<div class='clear'/>

 
5. Kustom
Saat ini, jumlah posting adalah 6 (varmaxresult = 6), tetapi Anda dapat menambah atau mengurangi jumlahnya tergantung pada template Anda - tema blog. 
Anda juga dapat mengubah tinggi (tinggi: 98px;) dengan diff adalah 98px, tetapi jika Anda ingin widget yang lebih tinggi maka tambahkan saja angka ini. 
Itu saja, ada banyak lagi widget ini, jadi saya akan menulis tentang hal itu pada waktunya atau bagaimana blogging baru dan bahagia akan muncul.