Membuat Related Post Ringan Dan Kondusif Di Blogger
Related Post merupakan sebuah belahan yang selalu ada dari sebuah blog, sanggup dikatakan bahwa related post ialah salah satu unsur yang cukup penting dan sangat direkomendasikan untuk disisipkan pada halaman blog alasannya ialah dengan adanya related post seorang pengunjung sanggup mencari hal-hal lain yang terdapat pada blog tersebut sekaligus sanggup membantu pemilik blog meningkatkan traffic blog tersebut.
Banyak cara yang sanggup dipakai untuk menampilkan related post di blog, terdapat banyak sekali aba-aba dan metode yang sanggup menjadi pilihan, bahkan bila beruntung anda sanggup menampilkan related post dengan pertolongan dari Google Adsense sehingga anda akan diberikan beberapa fitur yang ditawarkan oleh Google Adsense. Namun tentu saja tidak semudah kedengarannya, Google Adsense hanya akan memperlihatkan 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 ihwal related post Google Adsense, namun saya akan mencoba memperlihatkan salah satu cara yang sanggup teman-teman gunakan untuk menampilkan related post pada blog. Yaitu dengan memakai aba-aba javascript. Kode related post ini mempunyai beberapa kelebihan yang mungkin anda sukai, diantaranya mempunyai tampilan yang simpel dan sederhana, ringan, serta gampang diatur dengan hanya memodifikasi aba-aba CSS.
Pertama-tama saya sarankan kepada teman-teman untuk melaksanakan backup terlebih dahulu terhadap keseluruhan aba-aba blog, barangkali tampilan related post ini tidak sesuai dengan impian anda, maka akan lebih gampang untuk mengembalikan perubahannya.
1. Masuk Ke Blogger
Silakan masuk ke Blogger.2. Masuk Ke Edit HTML
Pada belahan Template pilih Edit HTML.
3. Salin Kode CSS
Salin dan tempel aba-aba CSS berikut ini sempurna sebelum/diatas aba-aba]]></b:skin> atau sanggup 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/AVvXsEjUg6uVuAqbPVTncrXeMode9uXvGhljGRfF9RRLDxD4vADF6bdJhnjfLWqF7mM43i_pJOT1foQ2YCzNl3V7owEauxg3RbI5WQigVfRdr7LKsDdI9-Q4I5uG7frcUoQd9on2_xCECdRYMkc/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 aba-aba javascript berikut ini sempurna sebelum/diatas aba-aba</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 aba-aba<data:post.body/> pada aba-aba HTML blog anda dan tempatkan aba-aba berikut ini sempurna setelah/dibawahnya. Kode <data:post.body/> mungkin ada lebih dari 1 pada aba-aba HTML blog anda, biasanya gunakan aba-aba yang kedua, atau bila gagal silakan coba aba-aba 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 belahan paling bawah dari halaman posting tersebut, bila berhasil anda akan menemukan beberapa posting yang mempunyai usang sama dengan halaman posting yang ketika ini anda buka. Jika gagal, ada beberapa hal yang sanggup menjadi penyebabnya. Pertama, kesalahan penempatan aba-aba belahan ke (5.), temukan aba-aba<data:post.body/> yang sempurna 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 ketika ini anda buka, silakan coba posting yang lebih terkenal di blog anda (posting dengan label terbanyak). Anda sanggup melihat demonya pada halaman ini.
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 biar anda sanggup memahaminya. Anda sanggup menghubungi admin melalui halaman contact blog ini, bila sedang tidak sibuk admin akan segera menjawab jawaban anda. Atau biar lebih gampang dilihat anda sanggup meninggalkan komentar di belahan bawah halaman ini dengan memakai Disqus, anda sanggup berkomentar tanpa harus mempunyai akun Disqus. Terima kasih dan hingga jumpa.
