Baiklah disore hari yang dingin ini saya akan share tentang Cara Membuat Related Post. Ya lebih dikenalnya dengan sebutan artikel terkait yang biasanya diletakkan dibawah postingan blog. Pada postingan sebelumnya saya juga telah share Cara membuat Artikel Terkait ditambah dengan fungsi scroll. Dan sekarang saya akan mengulas kembali Cara Membuat Related Post tapi dengan Thumbnail (Gambar). Pastinya akan lebih membuat tampilan blog kita lebih menarik lagi untuk dikunjungi. Yuu langsung saja kita menuju TKP untuk membuat sekaligus memasangnya di blog tercinta. hehehe, tapi sebelumnya bagi yang ingin melihat hasilnya silahkan kunjungi blog yang satu ini [Make Your Soundrenaline]
Langkah-langkahnya seperti biasa Sign in akun blognya masing2. Lalu klik Layout > Template > Edit HTML. dan selalu biasakan centang "Expand Widget Template". Jika sudah Selanjutnya cari kode </head> untuk mempermudah pencarian gunakan ctrl+f .
Lalu letakkan kode script dibawah ini tepat diatas kode </head>
NB:<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove -->
<b:if cond='data:blog.pageType == "item"'><style type="text/css">#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; }#related-posts a{ color:black; } #related-posts a:hover{ color:black; }#related-posts a:hover { background-color:#d4eaf2; }</style><script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj18NfzV5vwkzuJDnQGUWBK_Y0dhgZsJhsnc3r9O4iPIfjDwmskuWQlsLa2OZ1ud_cOLssTIaBA-pJ_80v6vRc3rHKR5h2MKCrZWbkXTV0SV9s-YqebBl56s1-EcFozF6z-fM_mmqajuDk/s400/noimage.png"; var maxresults=4; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script><script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/><!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
- var maxresults=4 ini adalah jumlah related post yang ditampilkan, silahkan ganti sesuai dengan keinginan
- var relatedpoststitle="Related Posts" adalah tittle dari related post, silahkan rubah sesuai dengan keinginan
Jika sudah, selanjutnya cari lagi kode <div class='post-footer-line post-footer-line-1'> (dan biasanya terdapat 2 kode <div class='post-footer-line post-footer-line-1'> yang sama dalam template, pilih kode yang kedua) Dan letakkan kode script dibawah ini tepat dibawah <div class='post-footer-line post-footer-line-1'>
Jika sudah lalu save dan lihat hasilnya.<!-- Related Posts with Thumbnails Code Start--> <!-- remove -->
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script></div><div style='clear:both'/><!-- remove --></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a></b:if></b:if> <!-- Related Posts with Thumbnails Code End-->
Dan selamat Related Post dengan Thumbnail berhasil dipasang di blog. Selamat Mencoba dan semoga bermanfaat . . . 4.5
Kunjungan sore sobattt
ReplyDeleteWow jadi related postnya ada gambarnya
Makasih infonya sobat ^^
Iyoo sama2 sobatt . . .
ReplyDeletemksih udah mampir disini ^_^
menarik gan.. lalu cara membuat yang mirip related post tapi di halaman utama gimana gan?
ReplyDeletesalam kenal
www.adib21.com
infonya bagus banget .... makasih yahhhh >>>>>
ReplyDeleteadib_Maksudnya Y seperti apa gan ?
ReplyDeleteok salam kenal juga dari AF Sahabat Artikel
Sandara_Ok sama2 Sandara
mksih atas khadiran sobat dan kesediaan'a comment di blog sederhana ini
tapi kog di blog ini related post nya malah makek Link Within?? :P
ReplyDeleteklo blog Y ini emank pake linkwithin sob,, klo Cara Y ini ane trapin di blog Y satu lg
ReplyDeletethanks gan, related post imagenya berhasil..salam kenal
ReplyDeleteinfo yang menarik sekali gan,,,,
ReplyDeletesalah satu tips seo yang keren,,,,,
mampir ya gan di gubug saya
ini yg sne cari2
ReplyDeleteakhirnya ketemu juga
mampir di blog ku ya mas
Zetiawan_nice ..!! ok salam kenal juga sob mksih udah mampir
ReplyDeletePanduan blogspot_ok2 sob ditunggu ya digubug'a
Andrey_ok sob saya mampir2 juga thanks udah mampir
Performance artikelnya, salam kenal and visit me back
ReplyDeleteWah infonya sangat menarik, tanks gan
ReplyDeleteTips yang bermanfaat :)
ReplyDeletesudah kucoba dan berhasil !
Terima kasih dan sukses untuk Anda, kawan ! :)
thanks gan . . . .
ReplyDeleteditunggu kunjungan baliknya ya....
wah bagus juga nih gan carannya..
ReplyDeleteente buat tutorial blog tapi di blog ente di pasang blog auto link yang berisi sumber, mana bisa gitu bro... yang ada mala error trus waktu pastekan code2 yang ente kasi...
ReplyDeleteemang kenapa sih harus make script gituan?ente takut di copas???? apakah artikel ini artikel asli ente???
@indoPhotoshop: kaya'a gada masalah dlm proses paste,,,,
ReplyDeletekan bgus'a paste di notepad dulu baru paste di template, klo maslah link sumber kan tinggal di apus ajj klo emank ga seneng sama artikel saya
klo emank gagal ya ga usah di ikutin tutorial diatas, masih ada Y otomatis lainnya sob ga usah repot2
ok thanks buat masukkannya
info yang bagus, langsung dicoba... thank's
ReplyDeleteNaice om..
ReplyDeleteBisa om d'blog ane....
kok gak bisa ya sob,^^
ReplyDeletescripnya dah tak pasang di blog jualan baju korea ku,,tapi gak muncul, kenapa ya,,
sob ane baru di blogger
ReplyDelete. . lo leh mnta tips n trick nya ntuk bkin
blog archive kaya agan tu gmna cranya?
biar bsa isi scrol bar
tankz
Makasih ya gan atas infonya, jangan lupa ya untuk visit blog saya... ramazxc.blogspot.com
ReplyDeleteinfonya sangat bermanfaat
ReplyDeletegan gimana klu related post yang kayak agan punya?? hehehe
ReplyDeleteKunjungin blog aku sobat
ReplyDeletehttp://robinurhadi.blogspot.com/
makasih gan.. langsung di praktekan
ReplyDeleteThanks for this amazing tutorial
ReplyDeletegan knp yh setiap kali sy mencoba membuat related pos dg gambar selalu gagal?
ReplyDeleteTRIMS BRO
ReplyDeleteversi demonya ada gak?
ReplyDeletepunya ane knp ga jadii ya gan....
ReplyDeletebro kalo yang kod kdua gak ada gimna???
ReplyDeletebro itukan khusu label klo khusus semua posting gimana
ReplyDeletewaww makasi bnget mas admin :D
ReplyDeletedi blog saya ngak bisa dipasang sob, gimana nih ?
ReplyDeletekreasibonar.blogspot.com
susah banget, yang simpel aja?
ReplyDeletelagsung ane coba gan, moga aja berhasil
ReplyDeletehmmm, bisa jadi praktis dan menarik nich tampilan blogku....trim's gan
ReplyDeletenice. best so far.
ReplyDeleteTips yang bermanfaat :)
ReplyDeletesudah kucoba dan berhasil !
Terima kasih dan sukses untuk Anda, kawan ! :)
mantap ini yg saya cari, ijin copas ya gan
ReplyDeleteBlog walking...:)
ReplyDeleteExchangeHits
Promote your Social Networks and Websites for FREE!
Direct Downloads
FREE Full version Software Downloads, FREE Games, FREE Movies, FREE Video Lesson, FREE Music and Whatever you need.
enggak bisa e om... gimana niH? coba dong kalau ada waktu cek di blog ku puntodamar.blogspot.com... makasih ya, kutunggu balasannya ^^
ReplyDeletegan, di template ane kagak ada div class='post-footer-line post-footer-line-1'
ReplyDeletemohon solusinya..
~Salam www.our-animestudios.blogspot.com~
thanks ya tipsnya
ReplyDeleteini dia yang saya cari2 :D
ReplyDeleteSaya coba ya sob.pelan-pelan biar gak salah nantinya biar gak bingung buat related postnya
ReplyDeleteMakasih infonya gan, langsung coba dipraktekan..
ReplyDeleteIni dia yang ane cari, dicoba dulu ya gan... :D
ReplyDelete