Membuat Artikel Terkait dengan Disertai Thumbnails
Salam blogger :) Sebelumnya kita sudah pernah membuat artkel terkait, yaitu menampilkan postingan-postingan yang berkaitan dengan berdasarkan label yang sama. Jika yang kita pelajari dulu adalah related articel yang hanya menampilkan judul-judul terkait di bawah postingan yang kita buka/lihat. Maka berbeda dengan sekarang. yaitu Artikel terkait (Related Post) kita tampilkan beserta dengan thumbnail (Mini Gambar) yang ada di postingan kita.
Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita. :D
Cara Membuat Artikel Terkait dengan Disertai Thumbnails
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya
7. Cari kode di bawah ini
Atau jika tidak menemukannya cari kode berikut ini
8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)
9. Kita juga dapat menganti beberapa kode css, seperti berikut ini
10. Simpan Template jika sudah selesai.
Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita. :D
Cara Membuat Artikel Terkait dengan Disertai Thumbnails
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
7. Cari kode di bawah ini
<div class='post-footer-line post-footer-line-1'>
Atau jika tidak menemukannya cari kode berikut ini
<p class='post-footer-line post-footer-line-1'>
8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)
<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == "item"'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<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>
<b:if cond='data:blog.pageType == "item"'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
9. Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=5;
Berarti artikel terkait yang akan kita tampilkan adalah 5var relatedpoststitle="Related Posts";
Judulnya adalah Related Posts10. Simpan Template jika sudah selesai.
template aku malah kedua2nya nggak ada, apa ada cara lain soalnya aku emang udah lama pengen bikinnya..
BalasHapusSelamat sore,
BalasHapusSelamat hari Rabu,
Semoga tetap semangat dalam berkarya dan sukses selalu,
Salam Hangat,
AbulaMedia
Thanks sob informasinya, sangat bermanfaat... kunjungi juga blog saya sob...
BalasHapus:)]
BalasHapusartikel yg sngat brmanfaat, trims atas tips & trik-nya sob..
BalasHapusmakasih infonya,,,,di templateku kenapa post komentarnya ga bisa langsung nampang seperti ini ya...mohon infonya
BalasHapusrasanya pengen punya blog kayak gini, bagus sich. gimana ya?
BalasHapuslangsung nyoba ahh . . .
BalasHapusPUTU:
BalasHapusLAM KENAL,
BAGAIMANA YA CARA BIKIN JUDUL POSTINGAN SEPERTI TAMPILAN INI, THANK
makasih yah,akhirnya bisa belajar lbih jauh lagi tentang ngeblog,sukses buat anda,
BalasHapusmakasih buat info nya, saya sudah menerapkan trik ini
BalasHapusBos kok aku coba ga bisa keluar ya.. hasilnya kosong.. coba lihat disini http://nofianto777.blogspot.com/
BalasHapusGan gimana sih bikin 3 tab ky di kolom sidebar tuh, share dunk gan,,,
BalasHapussama kenal semua master blog yang koment disini, mohon bimbingannya
BalasHapuskalo tampilkan posting terbaru untuk label tertentu dan ada gambarnya gimana ya bos?
BalasHapuscara buat labelnya jadi animated globe gitu gimana ?? TY
BalasHapusnice tips..
BalasHapusbermanfaat!!
BalasHapusterima kasih ;)
thanks gam,..langsung praktek nih,..
BalasHapussudah dicoba lancar, cuma nggak mau muncul thumbnail-nya. gemana gan, ada soulusi? kalau pakai linkwithin mau muncul.
BalasHapuskeren mas silahkan kunjungin blog
BalasHapushttp://herfinitha.blogspot.com/
aku udah pasang jadi liat aja yg udah jadi
thanks bos infonya, udah dicoba dan hasilnya kereen
BalasHapusthanx infonya..
BalasHapusmampir ke blog ane gan
Http://heriie.blogspot.com
thnx banget gan. ;)
BalasHapus(lama2 gak asik juga pake linkwithin. jadi banyakan link keluarnya)
lihat blogku juga yaa.., http://glorygloryislam.blogspot.com
BalasHapusmau pasang dulu di blog saya ! trms bnyak atas info nya !
BalasHapusthanks gan tipsnya
BalasHapusAss. postingannya mantap , tapi untuk diterapkan diblog aku scriptnya tidak jadi, mungkin templetnya blog aku g ngedukung kali ya, thank's infonya...!!!!
BalasHapussaya sudah coba persis seperti tutorial diatas tetapi kenapa ga berhasil ya . Tolong penjelasaanya pak . terimakasih
BalasHapusbagus pisan, kakaaaa :D
BalasHapusthanks :3
butuh surat-surat kunjungin bog ane sob
BalasHapusthx infonya,,, mampir dunk ke blog qw
BalasHapusbloggiesukasuka.blogspot.com,,hhe
wah keren keren ternyata bisa saya asalalkan ikut petunjuk yang ada secara benar
BalasHapuslho...?
BalasHapuskoq gagal yea?
thanks infonya
BalasHapusinfonya berguna banget gan , tapi ko pas ane coba malah gak ada yah?
BalasHapusBlog punya agan keren.. Download dimana templatenya, gan? By masarkandas
BalasHapusijin coba dulu gan, somoga sukses di blog sya.
BalasHapusmakin cantik dengan di kasih tumnail bikin tambah merangsang pengen klik, hehehhe :)mantep sobat
BalasHapus:))
BalasHapusWWW.GJPOOL.TK
:D
BalasHapussob mengapa kalo pake html, ga keluar apa2 ya?
BalasHapusok gan saya akan coba caranya
BalasHapuspusing juga kalau ga di praktekan ya gan?
BalasHapusUdah di coba mas, hasilnya mantep.
BalasHapusGood luck buat mas Kurnia.
Pusing sih yaa kalo di praktekin mas, tp hasilnya udah jadi. Trims
BalasHapusHaduh mas susah yah :(
BalasHapusGampang-gampang susah euy.
Langsung jadi mas :D
BalasHapusTerima kasih...
Terima kasih mas, ane udah bisa ama cara2 di atas.
BalasHapusWadeuh mas agak susah yaa :(
BalasHapusmakasih infonya gan
BalasHapusterimakasih infonya
BalasHapusTrimakasih infonya
BalasHapussalam
thx buat infonya gan
BalasHapusobat yang tepat untuk mengatasi sipilis
obat kutil kelamin herbal de nature
makasih gan infonya sangat bermanfaat
BalasHapusagen obatherbal
obat kutil kelamin
obat kutil kelamin ampuh
obat kelamin
obat sipilis
obat sipilis ampuh
obat tradisional sipilis
obat penyakit sipilis
obat sipilis herbal
obat sifilis
obat sifilis
obat wasir
obat wasir alami
obat wasir ampuh
obat wasir
obat wasir herbal
obat tradisional wasir
obat wasir
obat wasir tanpa efek samping
obat wasir ambeien
thanks infonya broo
BalasHapustak cobain dulu related postnya
terimakasih gan
BalasHapusThax gan artikelnya sangat membantu.........
BalasHapusCiri-ciri Kutil Kelamin
Obat Alternatif untuk kutil kelamin
Obat Kutil Kelamin Wanita
Obat Perontok Kutil Kelamin Terbukti
Mantap mas artikelnya sangat membantu...
BalasHapusObat Kencing Nanah Instan
obat kencing Nanah Raja Singa
Obat Kencing Nanah Pada Pria
Pengobatan Kencing Nanah
Kencing Nanah Pada Wanita
Sukses gan.
BalasHapusmakasih info nya...
Obat Herbal Penyakit Sipilis
Obat Kencing Sakit Keluar Nanah
Obat Raja Singa Herbal
Obat Sipilis Herbal
Obat kanker servik atau rahim herbal
BalasHapusObat kanker rahim paling manjur
Obat kanker servik atau rahim
thx bro...
BalasHapusartikel yang bgus mas, boleh dicoba nihh ilomunya.....
BalasHapusTerimakasih infonya Ka.... Sangat Membantu,..
BalasHapusMampir dimalam hari.... salam sukses Pak
BalasHapusnice gan
BalasHapusnice post
BalasHapusObat Kutil Kelamin
BalasHapusObat Kutil Kelamin Di Apotik
Obat Kutil Kelamin Alami
Obat Kutil Kelamin Tradisional
Obat Kutil Kelamink Herbal
Pengobatan Kutil Kelamin
Pengobatan Penyakit Kutil Kelamin
Sukses gan.
BalasHapusmakasih info nya
* Untuk menampilkan emoticon, ketik kodenya, contoh: =))
BalasHapus* Karena banyaknya SPAM, terpaksa kami tampilkan verifikasi kata
Jangan sampai komentarmu dihapus karena tidak mematuhi aturan!
wah kok kayany ribet bngt....apa emang saya masih blm tau....trim gan..
BalasHapuswah kok kayany ribet bngt....apa emang saya masih blm tau....trim gan..
BalasHapuswah kok kayany ribet bngt....apa emang saya masih blm tau....trim gan..
BalasHapuswah kok kayany ribet bngt....apa emang saya masih blm tau....trim gan..
BalasHapusNice Post
BalasHapusNice Artikel
BalasHapusthunbailnya jadi bagus yow ^^
BalasHapusSudah betahan disini...
BalasHapusMas ... kok ga mau tampil ya?? padahal udah sesuai intruksi:(
Thanks...
BalasHapusBlog Walking..
Request & Download Movies - Games - Software
artikel yang bermutu. terimakasih
BalasHapus