Cara Membuat Widget Related Posts V2

Posted by Herman on Friday, September 17, 2010 47 comments

Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya cara membuat widget related posts sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting di blog ini. Oleh karena itu, pada postingan ini saya akan menjelaskan cara membuat related posts seperti yang saya gunakan pada blog ini atau yang saya beri nama related posts v2.

Mungkin anda akan bertanya apa perbedaan antara related posts v1 dan v2?
Kalau pada related posts v1, related posts akan ditampilkan bersamaan dengan judul labelnya dan dikelompokan berdasarkan labelnya masing-masing. Sebagai contoh, perhatikan screenshot dibawah ini.


Sedangkan versi 2, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:

widget related posts
Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:

1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode ]]></b:skin>

4. Letakkan kode css berikut diatasnya

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; }
#related-posts a{ color:#4b4b4b; }
#related-posts a:hover{
color:#ca1717; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#related-posts a { text-decoration : none; }
#related-posts a:hover { text-decoration : none; }
#related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }
5. Selanjutnya cari </head>

6. Letakkan kode javascript berikut diatasnya

<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/>
7. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>

8. Jika ada dua kode yang sama, pilih yang pertama

9. Letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
Keterangan:
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan

10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah


Recent Posts:

47 comments

Raden said... 26 September, 2010
:D makasih infonya ya bang herman
Herman said... 26 September, 2010
@Raden: iya, sama2. semoga bermanfaat ;)
yahaya said... 26 October, 2010
info yg bermanfaat..ambil ilmunya mas
gayuh said... 10 November, 2010
makasih tutorialnya kak.. gayuh langsung praktek
Master said... 22 January, 2011
thx, nice post.. ;)]
chanthuque said... 27 January, 2011
thanks infonya....
Toto widiyanto said... 31 January, 2011
:))
SUKAFILM said... 16 February, 2011
makasih ilmunya mas :D
Bayu Permadi Sasmita said... 02 March, 2011
wah mkasih bnyak mas, infonya sngat bermanfaat skali buat blogger pemula kyak saya..
terima kasih.
Zay Shepard said... 02 April, 2011
GG bsa gan.........
Kandar said... 03 June, 2011
gan gimana cara kasi garis lurus di atas Related Posts itu

makasi infonya
BLUE ZONE said... 14 June, 2011
mas cara membuat related post dan recents post berdampingan kyk pnya mas itu kyk mna buatnya y?
dekap said... 16 June, 2011
salam kenal?,,,,,, anda benar benar hebat, makasih atas infonya.
Izul said... 09 July, 2011
berhasil bos. akhirnya bisa juga pasang ini
makasih bos
andi juhandi said... 24 July, 2011
linknya udah terpasang di blog saya. pasang balik ya...
riffmoker said... 25 July, 2011
kk koq saya nyari kode pada cara nomor 7. di atas.
di edit HTML saya selalu ga ada??? mohon pencerahannya..
riffmoker said... 25 July, 2011
tolong kasih pencerahan di blog saya kk.. ditunggu yah.. sekalian minta tuker linknya ok ok :-*
Patrisia said... 30 August, 2011
Great article kawan, semoga sukses selalu.
Ekanita said... 31 August, 2011
Makasih ya mas............ salam kenal
Asmara Susanto said... 07 September, 2011
ini yg sy cari2 ;))
Dinamika Pendidikan said... 09 September, 2011
Makasih ya pak...smoga bpak tak kbratan tukar link dengan kami. Salam kenal...
PKBM CIBANGGALA said... 10 September, 2011
ma kasih infornya sangat berguna (http://pkbmcibanggala.blogspot.com/)
KAPAK Comunity said... 11 September, 2011
maz punya sya ko' g bsa ea.....

cek di...

http://kapakcomunity.blogspot.com/
katils said... 23 September, 2011
tak cobane gan mdah-mudahan bsa lah udah lama gagal trusudah lama gagal trus
Ryan AB said... 30 September, 2011
langsung berhasil gan,,thanx buanggett :D
anggabp said... 29 November, 2011
ini berjalan diblog saya yang sulit dipasangi related post. makasih mas
download-game-baru said... 11 December, 2011
wow, mantap gan. Makasih tutorialnya.
Cukup membantu.
Th3'MZ CybeR said... 26 January, 2012
keren,,ijin praktek dulu omz..
ambulanzigzag said... 14 March, 2012
nice share ....
MaYaSTA said... 21 March, 2012
Kalo gak ada kode yang di poin 3 nya gimana kang bro?

dan kode yang poin 7 nya ada 3 ...

mudah-mudahan ada jawabannya hehe
Junnaedy Muis said... 10 April, 2012
saya ngga dapat yg ke 7 nya gmana bantu dong mas?
onlyx-45 said... 03 July, 2012
mantap artikelnya sob..
informasi bermanfaat sekali.

thx udah sharing
wa kucel said... 10 July, 2012
:))makasih info nya gan, dah ane pasang... alhasil mulus gan....
Michael Steven said... 21 August, 2012
Berhasil... thanks ya admin salam kenal :)
Redaksi said... 22 August, 2012
siap dan bagus banget
Edo Bago said... 15 September, 2012
thanks gan, sukses terpasang di blog ane.. ;)
Andrian Sulistiana said... 17 September, 2012
This comment has been removed by the author.
andriansulistiana said... 17 September, 2012
akhirnya ketemu juga yang cocok nih, setelah muter-muter di rumah mbah google..
makasih gan, sangat bermanfaat. langsung saya praktekan dan pasang widgetnya malah.
hasilnya bisa di liat di http://andriansulistiana.blogspot.com
ade putra said... 21 September, 2012
makasih infonya
jangan lupa mampir ke
http://adeputra-pkp.blogspot.com
ade putra said... 21 September, 2012
makasih infonya
jangan lupa mampir ke
http://adeputra-pkp.blogspot.com
Bunda Radit said... 11 October, 2012
Udah sukses terpasang related postnya.Tapi kok berantakan y?Related postnya sejajar sama kalimat terakhir artikel.Jd,q otak atik lagi.Jadinya seperti yang terlihat sekarang.Tapi nggak ada titik bulat hitam disamping judul di related post.Tolong cek y gan,disini http://dapurbundaradit.blogspot.com
Mohon pencerahannya,gan...
Edwin Suhenda said... 04 November, 2012
clickdownloadgame.blogspot.com
S Remen Rae said... 26 November, 2012
aku gak ada kode ne, gimana donk, gak bisa buat releated post donk,,,
ajarin ya,,, ane baru.....
Bunda Radit said... 12 December, 2012
Siiippp.....
Akhirnya terpasang manis di my blog.
Makasih tutorialnya,Mas....
Ditunggu kunbalnya ya?
Makasih.... :)
umstrie23,com said... 11 January, 2013
thanks..
http://umstrie23.blogspot.com
ane sudah coba gan,sukses
de eka Sas said... 29 January, 2013
berhasil dipasang pada blog saya...
makasi banyak ya ilmunya...

www.puteka85.blogspot.com :))
van cesc said... 11 March, 2013
hmm bagus nih, jadi keliatan rapi susunan buat2 article2 yang sebelumnya.

Rumah Dijual

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment