Membuat Related Post Cantik di Blogspot

Category : Labels: , , , ,

Related Post merupakan sesuatu yang simple kelihatannya tapi mempunyai efek yang cukup bagus bagi blog kita. Dengan Related Post, pageview terhadap blog kita akan meningkat. Selain itu pengunjung bisa dengan mudah mengeksplore konten - konten yang ada dalam blog kita.




Untuk cara membuat related post ini, tentu sudah banyak yang memberikan tutorial dan trik untuk ini. Dan salah satunya bisa dengan cara :
  • Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger ► LayoutEdit HTML
  • Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
  • Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> .
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#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 {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>

Cari kode <p><data:post.body/></p> . Kode setiap template berbeda - beda. Biasanya kodenya bisa berupa seperti berikut <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.

Setelah mendapatkan kode <p><data:post.body/></p> . Copy-paste kode dibawah ini tepat dibawah kode tersebut.
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

  • Simpan Template anda .

Related Post anda akan tampak seperti gambar berikut.
Related Post List Picture

► Untuk menempilkan link related post sebanyak mungkin ganti angka yang berwarna biru diatas dengan yang anda inginkan.
► Untuk mengganti icon di samping kiri link related post, anda harus mengganti kode URL  gambar yang berwarna merah dengan URL gambar yang anda kehendaki. Anda bisa menggunakan situs penyedia jasa hosting gambar gratis seperti photobucket dan imageshack atau di blogger sendiri di sini.
► Untuk mengganti warna atau style hover ( warna atau style yang muncul di related post ketika disorot oleh mouse ) anda bisa mengutak - atik kode css nya. Tepatnya di kode
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

Bila ingin mengganti warnanya, anda tinggal mengganti kode #E2EBF8 dengan kode warna HTML yang anda kehendaki.


Semoga berguna.  :)

51 Komentar:

saya p[ake langsung

Wow cantik deh hasilnya. related post saya belum ada. Coba dulu ya sob. Thanks :)

Makasih untuk tutorialnya sobat...

Wah apik yaw...
cool sob...

wah, nice info sob, aku coba dulu yah :D

kenapa saya gag ktemuyang kaya gini dari dulu, hehe

kalo pake linkwithin gimana?

@ Mas doyok : Thanks mas doy :)
@ The Fachia : Terima kasih kembali
@ Rock : Sama - sama sob
@ Akhatam : Thanks supportnya bang
@ Bolang : Silahkan ..silahkan.
@ Kakve : Kenapa yach.?? hehe :D
@ Helmysuperstudent : Maksudnya bagaimana?

blognya bagus euy.

Salam kenal

thanks atas sharingnya brow

@ Ardiawan : Terima kasih yach.. ya salam kenal juga :)
@ Moenas : Sama - sama..
@ D' blogger : silahkan.. silahkan..

@ Fadil : silahkan :)
@ Kuliah gratis : Terima kasih supportnya.. :)

nahh ini yang saya cari

thx sob..!!
ntar sy cobain di blog saya yang ada di blogspot.. :D

@ Septian : Wah..wah.. hehe :D
@ jamal23 : ya silahkan.. :)

wah keren nih nanti aq gandi deh, trima kasih sharenya sob

sob kalau misalnya d kasih scrool caranya gimana ? d tunggu jawabannya

Mantap sob triknya,, lajutkaan!!!

@ Rizky : Cara yang termudah dengan memberi kode

overflow:scroll; */Untuk memberi fungsi Scroll/*

height:200px; */Menetapkan berapa tinggi dari related post/*

border:1px solid #ccc; */Menentukan border dari kotak scroll related post/*

^^

@ Imam77 : Wah terima kasih yach.. ^^

@ Rizky : Maaf kelupaan tambahan.. hehe :D
Naruh kodenya di container related post utama atau didalam/dibawah tepat kode #related-posts { di atas.. ^^

saya panasaran, gimana kalo di bagian post body, trus pas bagian ul li nya dibikin kek ada gambar rssnya tuh, ngefek gak yah ke hack artikel terkaitnyah...mnrt aku mah c ngepek, tapi blon dicobain c ... kekekekekekkk

@ Kang Beben : Di coba saja mas.. wekekeke.. :P

sudah aku terapkan di blog gw...makasih sob...
Ilmunya berguna banget

@ Shariawa : Terima kasih kembali :)

makasih tipsnya...langsung di praktekkan.
salam kenal ya......

Wooow mantaabbb!!
Tapi tampilanku kok malah aneh ya?
misal di http://dunia-mikro.blogspot.com related postnya malah ada di atas sebelum konten. Tyuzz di http://www.fastchip.co.cc kagak muncul judul2 related post. Tulung dunk... T_T

Manstab, Udah tk coba dan hasilnya bagus bgt. Thanks Berat. sekalian Mw Follow ah, Follow balik ya Kang. He2,..

Terima kasih, infonya

mantab gan...langsung dipasang ya, thx

Segera meluncur ke TKP gan... :D

terima kasih ilmunya

Langsung cek gur bro... thanks banget.

Langsung pake sob..

aq heraaannn...
knpa seh related post q jdi kren....
hahahahaaa
mksih y Mas.....

Wow ini mantap buanget....
setelah cari kesan kesini gak jalan 2 skrip nya pake yang ini langsung tok cer..........
makasih ya mas...

http://www.agam-on.blogspot.com

izin share gan...
http://cendanahomestay.blogspot.com
http://cendanahomestay.multiply.com

Mantap!
Langsung ke TKP dan hasilnya benar-benar efektif!

Trims banget, Brother..!
GOD Bless You!

Dany JOY

thanks mas infonya,,berguna banget

tipsnya bagus, templetnya menarik banget

saya dah cobain, tulisan related postnya ada, tp kok isi dari related postnya gak ada ya? salah dimana ya? :((
makasih. tolong bantuannya.

Terima kasih banyak Gan triknya...Related post nya emang bener2 cantik nih...kalo ini cewe udah ane pacarin deh, heuheuheu
Salam kenal ya sob

lumayan bagus juga...

terima kasih. beneran cantik. mohon izin untuk nyobain

mantap nih..
cobain ah..

manteb nih infonya..dicoba langsung work aja. thanks ya :)

wah. saya ingin mencobanya. karna mungkin blog saya blum memakai related post seperti itu...

Post a Comment