Cara Memasang Widget Related Post di Blog

Hai Sobat....di postingan kali ini saya akan membahas bagaimana cara memasang widget related post. seperti yang kita ketahui bahwa widget related post bukan bawaan dari blogger sehingga kita memerlukan kode / script html untuk membuat widget ini.

Related Post / Tulisan Terkait berfungsi untuk menampilkan konten atau artikel yang se-kategori / se-label setelah pengunjung selesai membaca satu artikel. Fungsi lainnya menurut saya juga sama dengan Popular Post yaitu untuk membuat pengunjung berlama-lama di blog anda (Baca juga : Cara Memasang Widget Popular Post di Blog ) Nahh...cara nya juga tak sulit kok tinggal ikutin langkah-langkah yang akan saya ajarkan ini. Lets check it out....

Langkah-langkahnya adalah :

#1. Silahkan anda login ke Blog anda

#2. Lalu klik Template → Edit Template

#3. Cari (lebih mudah dengan Ctrl + F ) kode  ]]></b:skin>

#4. Copy kode dibawah ini dan pastekan diatas kode  ]]></b:skin>

#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0QQ81eZkaauG6Qk7sRwx6-VDRaiz50WmdkeagYElMp_o9jpI9Q6wY83QJzPdEtFY_Pd6smcastaAQ8xBqN4NNHnp1RJBOD-l1svN-IyGsq9cJw3GvNvOcIOTGycShver3NfNJb50KV4/s1600/bullet-list.gif) no-repeat 0 10px;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}

#5. Setelah itu cari kode </head>

#6. Copy kode dibawah ini dan pastekan diatasnya 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<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>

#7. Bentar lagi kita mau selesai. Cari kode <div class='post-footer'> atau kode <data:post.body/>

#8. Copy kode berikut ini diatas  <div class='post-footer'> atau kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='clear'/>
<div style='clear: both;'/>
</b:if>

#9. Klik Simpan Template

Akhirnya selesai juga untuk membuat Widget Related Post tersebut, Terima Kasih sudah berkunjung di blog ini silahkan anda menjelajahi blog ini sepuasnya. Semoga artikel yang saya bagikan bermanfaat bagi kalian. Happy Browsing!!

Tweet

Postingan terkait:

Ditulis Michael — Saturday 28 January 2017 — Add Comment — Tutorial Blog