Wednesday, May 30, 2018

Membuat Related Post Ringan dan Aman di Blogger

Membuat related post sederhana di Blogger

Related Post merupakan sebuah bagian yang selalu ada dari sebuah blog, dapat dikatakan bahwa related post adalah salah satu unsur yang cukup penting dan sangat direkomendasikan untuk disisipkan pada halaman blog sebab dengan adanya related post seorang pengunjung dapat mencari hal-hal lain yang terdapat pada blog tersebut sekaligus dapat membantu pemilik blog meningkatkan traffic blog tersebut.

Banyak cara yang dapat digunakan untuk menampilkan related post di blog, terdapat berbagai kode dan metode yang bisa menjadi pilihan, bahkan jika beruntung anda dapat menampilkan related post dengan bantuan dari Google Adsense sehingga anda akan diberikan beberapa fitur yang ditawarkan oleh Google Adsense. Namun tentu saja tidak semudah kedengarannya, Google Adsense hanya akan memberikan fitur related post untuk blog yang telah memenuhi syarat dan ketentuan yang telah ditetapkan oleh Google Adsense.

Akan tetapi pada posting ini saya tidak akan membahas lebih jauh tentang related post Google Adsense, namun saya akan mencoba memberikan salah satu cara yang bisa teman-teman gunakan untuk menampilkan related post pada blog. Yaitu dengan menggunakan kode javascript. Kode related post ini memiliki beberapa kelebihan yang mungkin anda sukai, diantaranya mempunyai tampilan yang simpel dan sederhana, ringan, serta mudah diatur dengan hanya memodifikasi kode CSS.

Pertama-tama saya sarankan kepada teman-teman untuk melakukan backup terlebih dahulu terhadap keseluruhan kode blog, barangkali tampilan related post ini tidak sesuai dengan keinginan anda, maka akan lebih mudah untuk mengembalikan perubahannya.

1. Masuk Ke Blogger

Silakan masuk ke Blogger.

2. Masuk Ke Edit HTML

Pada bagian Template pilih Edit HTML.

Membuat related post sederhana di Blogger

3. Salin Kode CSS

Salin dan tempel kode CSS berikut ini tepat sebelum/diatas kode ]]></b:skin> atau bisa juga di dalam tag <style>.

#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px 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:12px Verdana}
#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}

4. Salin Kode Javascript

Silakan salin dan tempel kode javascript berikut ini tepat sebelum/diatas kode </head>.

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

5. Pasang Related Post

Temukan kode <data:post.body/> pada kode HTML blog anda dan tempatkan kode berikut ini tepat setelah/dibawahnya. Kode <data:post.body/> mungkin ada lebih dari 1 pada kode HTML blog anda, biasanya gunakan kode yang kedua, atau jika gagal silakan coba kode yang selanjutnya.

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

Penutup

Setelah semuanya selesai, silakan periksa salah satu posting yang terdapat di blog anda, kemudian scroll untuk menampilkan bagian paling bawah dari halaman posting tersebut, jika berhasil anda akan menemukan beberapa posting yang mempunyai lama sama dengan halaman posting yang saat ini anda buka. Jika gagal, ada beberapa hal yang bisa menjadi penyebabnya. Pertama, kesalahan penempatan kode bagian ke (5.), temukan kode <data:post.body/> yang tepat lalu periksa lagi. Kedua, belum ada posting lain dengan label yang sama, artinya posting anda mungkin terlalu sedikit atau tidak ada posting lain dengan label yang sama dengan posting yang saat ini anda buka, silakan coba posting yang lebih populer di blog anda (posting dengan label terbanyak). Anda bisa melihat demonya pada halaman ini.

Membuat related post sederhana di Blogger

Mungkin itulah beberapa langkah memasang sebuah related post yang amat sederhana di Blogger. Cara di atas mungkin amatlah sederhana namun saya mencoba menjelaskan dengan serinci mungkin agar anda dapat memahaminya. Anda dapat menghubungi admin melalui halaman contact blog ini, jika sedang tidak sibuk admin akan segera menjawab tanggapan anda. Atau agar lebih mudah dilihat anda dapat meninggalkan komentar di bagian bawah halaman ini dengan menggunakan Disqus, anda dapat berkomentar tanpa harus memiliki akun Disqus. Terima kasih dan sampai jumpa.

Next

Related