Cara Menciptakan Related Post Simple (Kode Css)

Cara Membuat Related Post Simple (Kode CSS) - Related Post merupakan sebuah cuilan yang selalu ada dari sebuah blog, mampu dikatakan bahwa related post yakni salah satu unsur yang cukup penting dan sangat direkomendasikan untuk disisipkan pada halaman blog lantaran dengan adanya related post seorang pengunjung mampu mencari hal-hal lain yang terdapat pada blog tersebut sekaligus mampu membantu pemilik blog meningkatkan traffic blog tersebut.

Membuat Related Post dengan Kode CSS

Banyak cara yang mampu digunakan untuk menampilkan related post di blog, terdapat banyak sekali instruksi dan metode yang mampu menjadi pilihan, bahkan jikalau beruntung anda mampu menampilkan related post dengan pemberian dari Google Adsense sehingga anda akan diberikan beberapa fitur yang ditawarkan oleh Google Adsense. Namun tentu saja tidak semudah kedengarannya, Google Adsense hanya akan mengatakan 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 mengatakan salah satu cara yang mampu 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 memiliki tampilan yang simpel dan sederhana, ringan, serta simpel diatur dengan hanya memodifikasi instruksi CSS.

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

1. Masuk Ke Blogger

Silakan masuk ke Blogger.

2. Masuk Ke Edit HTML

Pada cuilan Template pilih Edit HTML.

Related Post merupakan sebuah cuilan yang selalu ada dari sebuah blog Cara Membuat Related Post Simple (Kode CSS)

3. Salin Kode CSS

Salin dan tempel instruksi CSS berikut ini tepat sebelum/diatas kode ]]></b:skin> atau mampu 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq_-4K8mjEaz2uU3UXAx0RNVq_M7XLeB01RKW843PNC81flfEISsO8CbUEepTNx8iuzLTFWN8EfOm-fTZMlxQYzsFrHG86LsvXw1p0Onm159qAMdorODH_rdQlmx3n2mdzy1aS6bj-gvE/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 instruksi javascript berikut ini tepat sebelum/diatas kode </head>.

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</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 instruksi HTML blog anda dan tempatkan instruksi berikut ini tepat setelah/dibawahnya. Kode <data:post.body/> mungkin ada lebih dari 1 pada instruksi HTML blog anda, biasanya gunakan instruksi yang kedua, atau jikalau gagal silakan coba instruksi yang selanjutnya.

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=8"' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=6;removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");</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 cuilan paling bawah dari halaman posting tersebut, jikalau berhasil anda akan menemukan beberapa posting yang memiliki lama sama dengan halaman posting yang dikala ini anda buka. Jika gagal, ada beberapa hal yang mampu menjadi penyebabnya. Pertama, kesalahan penempatan instruksi cuilan ke (5.), temukan kode <data:post.body/> yang tepat kemudian 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 dikala ini anda buka, silakan coba posting yang lebih populer di blog anda (posting dengan label terbanyak).

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 semoga anda mampu memahaminya. Anda mampu menghubungi admin melalui halaman contact blog ini, jikalau sedang tidak sibuk admin akan segera menjawab tanggapan anda. Atau semoga lebih simpel dilihat anda mampu meninggalkan komentar di cuilan bawah halaman ini dengan menggunakan Disqus, anda mampu berkomentar tanpa harus memiliki akun Disqus. Terima kasih dan sampai jumpa.