cara memasang related post versi list pada blogspot . pada postingan sebelumnya saya pernah memostingkan tentang related post tapi versi thumbnail nya . untuk postigan kali ini saya akan memostingakan versi list nya .

lah apa bedanya jika kita memasang versi list dengan versi thumbnail ?? 

sebenarnya sih tidak ada bedanya . dari segi fungsi dan letaknya sudah tentu sama .

         tapi disini perbedaannya mungkin dari segi tampilannya dan juga segi estimasi kecepatan loading blog. keunggulan versi list ini menurut saya adalah dari segi estimasi kecepatan loading blog . versi list ini lebih cepat dibanding kan dengan versi thumbnail .

tapi kelemahannya adalah tampilan yang memang lebih unggul versi thumbnail . untuk contoh tampilannya lihat gambar dibawah ini :

 cara memasang related post versi list pada blogspot
cara memasang related post versi list pada blogspot

CARA MEMASANG RELATED POST VERSI LIST PADA BLOGSPOT

  • silahkan login terlebih dahulu
  • kemudian masuk ke dashboard – setelah itu klik bagian menu template

 cara memasang related post versi list pada blogspot
cara memasang related post versi list pada blogspot
  • kemudian klik edit html ( cat: untuk mengantisipasi kegagalan -silahkan download dulu template sobat dengan mengklik cadangkan/pulihkan – kemudian klik unggah )

 cara memasang related post versi list pada blogspot
cara memasang related post versi list pada blogspot

  • setelah itu sobat cari kode ]]></b:skin> ( untuk mencari kodenya gunakan kombinasi ctrl + F )

  • kemudian kopi kode dibawah ini dan letakan diatasnya :


   #related-posts{float:left;width:100%;border-top:2px solid #F79F81;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#FE2E2E;font:14px Coda, Arial, Sans-serif}
#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #FE2E2E;margin:0;padding:3px 0 8px 12px;list-style-image:none;}
#related-posts a:hover{color:#FF4000;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0;list-style-image:none;}

cat : ganti warna orange dengan ukuran yang dinginkan dengan ukuran yang diinginkan

  • setelah itu sobat cari salah satu kode dibawah ini ( untuk mencari kodenya gunakan kombinasi ctrl + F )
  1. <div class=’post-footer’>
  2. <div class=’post-footer-line post-footer-line-1’/>
  3. <div class=’post-footer-line post-footer-line-2’/>
  4. <div class=’post-footer-line post-footer-line-3’/>
  • kemudian kopi kode dibawah ini dan letakan diatasnya :

<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=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

cat : ganti yang warna merah dengan jumlah postingan yang ingin ditampilkan

  • setelah itu sobat cari kode </head>
  • kemudian kopi dan letakan kode dibawah ini diatasnya

<script type=’text/javascript’>
var relatedpoststitle=&quot;Related Posts&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>

  • kemudian langkah terakhir klik simpan dan lihat hasilnya 

selesai deh mungkin sekian postingan kali ini semoga bermanfaat dan terima kasih atas  kunjungannya.