Cara Memasang Related Posts (Tulisan Terkait) Simple Keren di Blogger

Baca Juga

Cara Memasang Widget Related Posts (Tulisan Terkait) Simple Keren di Blogger.

Related Posts, Related Articles, Posting Terkait, atau Tulisan Terkait adalah widget atau elemen yang biasa ada di bawah setiap tulisan di blog.

Fungsinya menampilkan posting lain yang se-label atau kategori sama sekaligus menawarkan konten blog lain setelah pengunjung selesai membaca satu tulisan.

Widget Related Posts ini membuat blog atau website lebih ramah mesin telusur (seo friendly) dan ramah pengguna (user friendly).

Widget Related Posts tidak ada di template bawaan blogger. Jika Anda menggunakan template default blogger dan akan menambahkan widget related post, lakukan langkah di bawah ini.

Cara Memasang Widget Related Posts (Tulisan Terkait) di Blogger

Yang berikut ini memasang jenis posting terkait simple, hanya berupa judul posting, seperti yang saya pasang di blog Romeltea Media ini. Jika ingin pasang yang lebih variatif, misalnya plus gambar, bisa dilihat di DTE.

1. Di dashboard blogger: klik "Template" > "edit HTML"

2. Cari (Ctrl+F) kode ]]></b:skin>
3. Copy & Paste kode berikut ini di atas 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/AVvXsEh_K10wtJDh35lZ04FzSnRpBzWU6okYd0U7_sRBBuXMLlQsKT1oitxHEeVAkH6zMpEISKF_uimbVQMuKNv_EUbLn8ysW4sLelx2M9hortNe6wU9Mrg-VAen37rkWFT00L8qlW64fYRiFLw/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}

3. Cari kode </head>
4. Copas kode berikut ini di atasnya:

<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>

Kode warna merah gak usah ditambahkan jika sudah ada di template blog Anda.

5. Cari kode <div class='post-footer'> atau <data:post.body/>
6. Copas kode berikut ini di atas kode <div class='post-footer'> atau <data:post.body/> yang kedua:

<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>

7. Save Template!
Simpan. Beres.

Itu dia Cara Memasang Widget Related Posts (Tulisan Terkait) Simple di Blogger. Wasalam. (www.romelteamedia.com).*