Cara Membuat Related Post di Blog

Hai apa kabar sobat, semoga lagi sehat yah, dan jangan lupa untuk selalu bersyukur atas apa yang telah kita nikmati hari ini..
Kali ini akan membahas tentang cara membuat Related Post. Mungkin diantara Blogger Pemula ada yang sudah mencari kemana-mana sampai keliling sana sini ke Blog tetangga. Tapi tidak apa lah, yang penting tidak sampe memakai selimut tetangga yah, hehe.  Ok bicara tentang cara membuat "artikel terkait" atau dalam bahasa kerennya "Related Post" ini, ternyata tidak sedikit postingan yang membahas tentang cara ini akan tetapi, tidak sedikit juga yang tidak work atau tidak bisa diterapkan pada blog. Yang lebih parahnya lagi kadang bisa diterapkan di blog namun didalam kodenya di sisipi link oleh si pembuat kode tersebut. makanya sobat jangan langsung asal COPAS begitu saja, sobat harus teliti dulu sebelum copas yah. Nah kalau kode disini aman dari sisipan link, pokoknya super aman lah.

Ok lansung saja, ini tahapan membuat Related Post
1. Masuk ke Blogger
2. Pilih "Template" kemudian "Edit HTML"
3. Cari kode ]]></b:skin> atau biar cepat klik Ctrl+F
4. Lalu Copy kode dibawah ini kemudian Paste kode dibawah ini tepat diatas ]]></b:skin> tadi.


#related-posts{float:left;width:100%;border-top:2px solid #88daed;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:#0973CF;font:13px Arial} #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 #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. Cari kode </head>
6. Kemudia Paste kode dibawah ini tepat 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>

7. Selanjutnya cari kode <data:post.body/>

8. kemudian Paste kode dibawah ini tepat dibawahnya, Kode <data:post.body/> biasanya lebih dari satu, maka pilihlah yang kedua. (soalnya kalau yang pertama biasanya tidak work)

<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=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'/>
</b:if>

9. Kemudian pilih Save Tamplate lalu lihat hasilnya



Sekian saja cara membuat Related Post Semoga bisa..
Previous
Next Post »

2 komentar

Click here for komentar
6 December 2016 at 20:32 ×

oh jadi gitu gan
sedikit bingung tapi sipplah
nambah wawasan

Reply
avatar
6 December 2016 at 22:04 ×

iya gan, semoga bermanfaat

Reply
avatar
Orang bijak itu selalu meninggalkan jejak