Trik Pasang Related Posts di Blogger

Kamis, 10 Februari 2011

Related posts atau biasa juga disebut dengan artikel yang berkaitan atau berhubungan adalah salah satu navigasi yang bisa diterapkan untuk memudahkan pengunjung dalam mencari tulisan lain pada blog yang berkaitan dengan artikel yang sedang dibacanya.
Pada blogger untuk menampilkan navigasi ini biasanya menggunakan label sebagai acuanya. Misalkan pada tulisan yang sedang anda baca ini "Trik Pasang Related Posts di Blogger" saya beri label Tips blogger, maka nantinya related posts yang ditampilkan adalah semua postingan pada label "Tips Blogger" dan juga bisa kita atur berapa postingan yang akan ditampilkan (hanya judulnya saja).

Cara Pasang Related Posts di Blogger

Langkah awalnya adalah dengan menambahkan kode javascript dengan cara login ke account blogger dan masuk pada tab Rancangan -> Edit HTML, cari kode </head> dan letakan script dibawah ini tepat diatas tag </head> tersebut.

<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(){var b=Math.floor((relatedTitles.length-1)*Math.random());var a=0;document.write("<ul>");while(a<relatedTitles.length&&a<20){document.write('<li><a href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
//]]>
</script>
Ket : kode diatas sudah dicompress

Langkah selanjutnya menambahkan style (CSS) untuk related postsnya. caranya cari lagi kode ]]></b:skin> dan sisipkan kode css berikut tepat diatas ]]></b:skin>.

/* RELATED-POSTS */
#rel-posts {font : 11px Verdana;border: 1px solid #ccc; margin-top: 20px;}
#rel-posts .widget h2, #rel-posts h2 {color : #940f04;background: #f4f4f4;font-size : 20px;font-weight : normal;margin : 0 ;padding : 5px ;border-bottom:1px solid #ccc;border-top:0;}
#rel-posts a {color : #054474;font-size : 11px;text-decoration : none;}
#rel-posts a:hover {color : #054474;text-decoration : none;}
#rel-posts ul {margin : 0;padding : 0;padding-left: 5px;}
#rel-posts ul li {line-height : 2em;border-bottom:1px dotted #cccccc;display: block;}
#rel-posts ul li:last-child{ border-bottom:none}
Tips : Sesuaikan kode tersebut dengan template yang anda gunakan.

Dan langkah terakhir yaitu memanggil/meletakan related posts dibawah postingan, masih dalam tab Edit HTML cari kode <data:post.body/> dan letakan kode berikut tepat dibawah <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rel-posts'>
<h2>Artikel yang Berkaitan</h2>
<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'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>
Tips :
  • Artikel yang Berkaitan -> Judul dari Related Post, bisa diganti sesuai keinginan
  • 5 -> Jumlah postingan yang ingin ditampilkan, juga bisa diganti.
Simpan template anda dan coba lihat hasilnya apakah sudah sesuai atau belum. Jika tampilannya belum sesuai itu biasanya karena template masing-masing berbeda dan untuk mengatasinya coba edit css related post diatas agar sesuai dengan template yang anda gunakan.

Selamat Mencoba !

Dapatkan update terbaru:
* Cek email konfirmasi untuk berlangganan yang telah dikirimkan ke email anda

20 komentar:

Technology Review mengatakan...

berhasil..!!
tapi related post yg tampil dalam tabel kotak gitu ya


31 Mei 2011 20.29
Wawan mengatakan...

makasih juragan infonya, maju terus .........


31 Agustus 2011 23.33
For All Friends mengatakan...

..bagaimana caranya menyesuaikan css related post css related post


12 September 2011 20.12
Dee @ download soal UN mengatakan...

woooo...
sudah lama saya cari tampilan related posts yang kaya' ginie... apik mas, dah saya pasang. Mohon dilihat dunk..., dah bener apa belum, hehe...


13 Oktober 2011 23.41
Super Bowl Commercials 2012 mengatakan...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.


21 Desember 2011 18.57
Abdul Rosyid mengatakan...

Thank's Info nya gan
Mampir lah ke blog Ane Gan
http://ziggy-one.blogspot.com


19 Februari 2012 15.48
Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012 mengatakan...

Related Post akan berpengaruh baik dalam upaya optimasi blog yang penting ga menambah berat blog. makasih gan


15 Maret 2012 21.48
Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012 mengatakan...

baik mas....saya mencoba untuk menyimak


15 Maret 2012 21.49
UEFA EURO 2012 BERTARUH DI 12BET mengatakan...

ternyata cukup banyak juga kode HTML yanh mesti ditambahkan


15 Maret 2012 21.50
pasang iklan baris gratis tanpa daftar mengatakan...

thanks ..ijin untuk mencoba gan


21 Juni 2012 22.42
Dollar Gratis mengatakan...

siapn menuju tkp bos..,makasih infonya


21 Juni 2012 22.44
pusat ace maxs mengatakan...

oh,,,gitu caranya,,,jadi harus pasang ketiga kode tersebut


9 November 2012 14.23
Cara Alami Mengobati Penyakit Gondok mengatakan...

terimakasih atas informasinya,triknya boleh di coba...


24 Desember 2012 14.41
putri mengatakan...

Informasinya sungguh sangat menarik sekali...
Banyak pelajaran yang saya dapatkan...
Makasihnya... Semoga sukses...


23 Agustus 2013 09.00
digital agency indonesia mengatakan...

akhirnya saya menemukan juga tutorialnya terima kasih gan


24 Februari 2014 11.33
bwin agenjudi mengatakan...

============================

Keep sharing gan, kunjungi balik yaa..

Bwin368 Agen Judi Terpercaya
Bwin368 Agen Judi Online

Bwin368 Agen Bola Terpercaya
Bwin368 Agen Judi Terbesar

Dewa Bola Online
Dewa Bola

============================


11 Mei 2014 19.06
obat perangsang ampuh mengatakan...

Makasih artikelnya gan bermanfaat sekali, sukses selalu..


26 Desember 2014 13.47
Launch Business in Delhi mengatakan...

I certainly agree to some points that you have discussed on this post. I appreciate that you have shared some reliable tips on this review.


26 Februari 2015 18.21
Setup Business in Delhi mengatakan...

What you're saying is completely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I'm sure you'll reach so many people with what you've got to say.


9 Maret 2015 14.09
Start Business in Delhi mengatakan...

I am extremely impressed along with your writing abilities, Thanks for this great share.


11 April 2015 16.57

Posting Komentar

 

Info

Pengikut

Earn Money ($$$)

© 2010 Tutorial Blog Gratis | Wordpress | Blogger All Rights Reserved Thesis WordPress Theme by Hack Tutors.info