Membuat Related Posts dengan Thumbnail

Posted by Herman on Wednesday, July 14, 2010 65 comments

related-post
Sebelumnya saya sudah pernah memposting mengenai cara membuat related post untuk menampilkan list judul postingan yang berhubungan dengan postingan utama. Sehingga memudahkan pembaca untuk mencari topik yang berkaitan. Untuk mengetahui lebih banyak tentang related post baca disini.

Nah kali ini saya ingin membahas cara membuat related post yang lebih menarik yaitu dengan menambahkan thumbnail atau gambar didalamnya. Agar lebih jelas perhatikan gambar dibawah ini.


Menarik bukan? Cara ini bisa digunakan bersamaan dengan related post tanpa thumbnail. Bagi anda yang tertarik untuk memasangnya, ikuti langkah-langkah berikut:

1. Buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widgets Templates"

3. Letakkan kode berikut diatas </head>

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

4. Lalu cari <p class='post-footer-line post-footer-line-1'/>

5. Kalau tidak ketemu coba cari post-footer-line

6. Letakkan kode berikut dibawahnya.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Kalau sudah Save template anda.

Keterangan:
var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.

var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.

var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.

var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.


Bagi anda yang merasa cara diatas terlalu sulit, anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1. Buka situs http://www.linkwithin.com

2. Isi data-data yang diperlukan pada form yang telah disediakan

Email: alamat email anda
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih Other
Width: pilih jumlah related post yang mau ditampilkan
Beri centang pada kotak kecil jika anda menggunakan background template yang gelap

3. Klik Get Widget

4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai

Jika ada yang kurang jelas atau mengalami kendala dalam memasang related post dengan thumbnail silahkan tinggalkan komentar anda dibawah ini. Saya akan berusaha untuk membantu anda.


Recent Posts:

65 comments

Linazz said... 16 July, 2010
Tutorialnya sangat mantap Mas. Terimakasih informasinya
Prast Ismanto said... 18 July, 2010
Thanks Bro... Nyoba ah... :)
Anonymous said... 11 August, 2010
I would like to exchange links with your site www.hermanblog.com
Is this possible?
febriyanto said... 22 August, 2010
thx gan...... tapi setelah saya coba kok ada yg nongol ada yg gak ya....... :-/
herman said... 22 August, 2010
febriyanto:
memang begitu mas karena artikel yang ditampilkan diambil dari label atau kategori. Kalau dalam label hanya terdapat satu artikel maka tidak ada yg nongol
Full Software Collextions said... 13 November, 2010
Pakai ini aja lebih gampang sob :
http://www.linkwithin.com/learn?ref=widget
baim said... 14 November, 2010
Thanks banget infonya. Mampir y.....
DJ NELO TEAM said... 23 November, 2010
Thanks mas, udah aku coba di blog ane, tyus sdikit aku rubah, bagus banget jadinya, n g ada tulisan linkwithinya :D
fajarnoverdi said... 10 January, 2011
thx y kang sangat berguna nih.
hehe
Gardjoew said... 30 January, 2011
kalo pake linkwithin kok muncul di halaman utama (home) juga? ada solusi gak, biar munculnya hanya di postingan aja? ~x(
MyAnimeGirls said... 09 February, 2011
nice info gan ;;) tapi ane bingung ganti font nya...minta pencerahannya gan, alnya font ma background ane sama. tkyu gan.
clp.imvmnt said... 17 February, 2011
saya juga pengennya cuma di postingan aja, bukan di halaman muka.. ada yg tau caranya g? biar bisa dibawah postingan aja jadi keliatan lebih rapi :D@Gardjoew
imroee said... 25 February, 2011
saya sudah pernah coba yang kayak gini, tapi saya maunya related post yang ada gambarnya muncul di sidebar kiri atau kanan, bukan di bawah postingan. Gimana tuh caranya???
Song eun cha said... 19 March, 2011
Tutorial'a keren bgt gan!
Tapi ane pengeb'a related post'a tuh muncul di bawah postingan'a ajh, bukan di home'a biar lebih rapi gitu gan.gmna yaa cara'a? -_-a
Flash_Fisika said... 17 April, 2011
thanks bro ;)
randy oktaran said... 17 April, 2011
thanks bro,.btw bisa pake efek marquee gak ya??kalo bisa gimana caranya??
Blog Berita said... 14 July, 2011
ni infoooo
aman said... 15 July, 2011
Thanks....
mantab gan.....

please kunjungi my blog...
http://dwilynx.blogspot.com/
RiP666 said... 22 July, 2011
thanks mas buat tutornya, sebenernya ane lebih suka relatednya muncul di tiap bawah read more di homepage, kmrn pake linkwithin, tapi gara ane ganti domain blog pas mo daftar ulang malah muncul yg lama trus >_<
Andhe Teguh said... 23 July, 2011
binggung makai na gan kata na tidak cocok

http://bojetmarantau.blogspot.com/
muhammad abduh said... 06 August, 2011
napa gak keluar thumbnail ya..??
cuma dalam bentuk bullets za...
RUMAH MOVIES said... 09 August, 2011
Gak bisa boss, cara nampilkannya gimana gak ada tutorialnya. tahnks mohon jawabannya yah...
id-blogNetwork said... 30 August, 2011
Mantap dan berhasil
PakuAlam said... 15 September, 2011
Terima kasih banyak tutorialnya gan, saya coba di blog saya yaa..hehe :)
BRAJA PB321 said... 18 September, 2011
sukron
StopSmooking said... 26 September, 2011
dari dulu ini yang aku cariiiiiiiii akhirnya ketemu terimakasih gan!!
Agus H said... 27 September, 2011
thanks infoh nya...
ngunjung ya... info yang seger - seger
Fantasya said... 30 September, 2011
boss ,, ni blog ku http://weirdboard.blogspot.com
Mathew David said... 03 October, 2011
mantap gan....makacruttttt sangatttt ,kalo berkenan singgah bos, bagi bagi ilmu di www.seminkota.blogspot.com
katils said... 09 October, 2011
gagal terus kang
Shofa Giggsy said... 11 October, 2011
terimakasih banyak mas herman... akhirnya selamat juga tampilan saya.. ;;)

Soalnya awalnya saya pakai linkwithin lalu saya ubah web adress blog saya, malah jadinya kacau, link ngarahnya ke alamat sebelumnya, dengan ini jadi bener lagi linknya..

mampir blog saya mas.. www.sofaempuk.co.cc
tolong dikoreksi juga..
greenthesky said... 16 October, 2011
Waw Mantapo bro, keren jadi nya
Risma2006 said... 26 October, 2011
Berfungsi tapi image nya gak muncul bos. thanks ya
fauzi said... 01 November, 2011
gak muncul nih
thefreak said... 06 November, 2011
makasihh bang,, langsung jadi gwa bikin
Raden Rahadhian said... 21 November, 2011
makasih buat infonya
D-Viz said... 27 November, 2011
Cantik Manis postingannya....
thank's ya bro.....


Peace, Love And Respect....!

http://vizology.blogspot.com
Indra said... 04 December, 2011
sukses terpasang di blog ane mas bro. ;;)

Silahkan berkunjung kalo berkenan :)
empol said... 04 December, 2011
kok aku gagal ya masbro? :(

http://catatanlinuxku.blogspot.com
Rick said... 08 December, 2011
thx gan...udah ana terapin di blog ana...:)
KALEPIT my blogs said... 03 February, 2012
keren banget
Rey said... 19 March, 2012
trima kasih panduannya.
Sangat membantu. :)
Ari Fahriansyah said... 17 April, 2012
thanks infonya bro... sangat membantu
Rudy Hartono said... 05 May, 2012
makasih informasinya
Mr. Bey ; (www.eyuana.com) said... 27 May, 2012
Terimakasih Infonya mas... Salam Kenal.
Udah saya Coba dan Berhasil
Tahirkz said... 07 June, 2012
Klu yang tanpa tumbnail gimana?? harap dikirim ke email gua.. atahirkz@gmail.com
rootsrock said... 10 July, 2012
iya mas, gimana cara supa related post nya hanya tampil di single post saja? soalnya saya coba, tapi tampil di hompage juga. mohon bantuannnya..
FileHippo.Com said... 17 July, 2012
kunjungan nya gan ~x(
Igovic said... 18 July, 2012
Mantab tutorialnya,,, sekarang dah terpasang di blog ane http://igovic.blogspot.com
suryadhii said... 22 July, 2012
makasih infonya gan,, ;)
Yustin Annisa said... 04 August, 2012
Thanks gan.... berhasl ;;)

http://infoiki.blogspot.com
ki soak said... 22 August, 2012
ijin sedot ilmu nya mas... terima kasih...
compaznet said... 31 August, 2012
nice artikel gan hehehe,,,,moga sukses sllu visit me back lamknal ;)
Dewi Maharani said... 03 September, 2012
gini..aq pake cara yang kedua. dan berhasil..
tapi kok gk muncul thumbnail nya ya?? hanya link nya saja..
tlong bantuannya.. thx
Neisha Calya Mahardhika said... 16 September, 2012
muantabbb tenan gan, tks ya http://margondanews.blogspot.com
Ganesha Alit Wardana said... 27 September, 2012
kenapa kalo pake likwithin di home juga ada related postnya ya? :-L
Novendi Rihsan said... 29 September, 2012
mantap sekali bapak herman sudah saya teskan langsung ke blog baru saya dan itu work sekali !
Wayan Jati Parsa said... 03 October, 2012
@Wayan Jati Parsa

Nice info
Sudah saya terapkan...
Ubud Scooter Rental
Thanks
;)
sunotoaw said... 03 October, 2012
Okey, langsung praktek,...jangan lupa mapir ya ke t4ku,....ditunggu kunjungan baliknya!!!
Geseng Pratama said... 06 November, 2012
dah saya praktekan, dengan hasil... muuuuantabb bangedt... trims mas herman.
autosport said... 22 November, 2012
Berhasil mas,mantab...
mampir ke blog saya ya mas,
www.autosport-magazine.blogspot.com
Kang Babas said... 20 December, 2012
oke sob,,,,
Pemula Sanders said... 25 December, 2012
Mantab bgt simple jelas dan sangat membantu www.Gambarbaru.com :D
blog-beritabolaterkini said... 08 January, 2013
thanks infonya
sudah aku terapkan maknyus banget
fian ilejay said... 13 January, 2013
mantab sobat ane coba langsung jadi nih thanks infonya..

http://gowaberbagi.blogspot.com

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

Post a Comment