Membuat Related Post Dengan Gambar
Assalamu alaikum.
Masuk ke akun Blogger sobat.
- Klik Rancangan.
- Klik tab Edit HTML.
- Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.
- Beri tanda centang pada Expand Template Widget sobat.
- Cari kode </head> , jika sobat menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.
- Copy kode berikut dan paste di atas kode </head>
<!--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/AVvXsEiI5YPMHoSJHdvK0ied-3kc5JxVlg1ftIuik_y1_hcs2bInworFXyF5uPVoM3q_ah7pVFc3Uq_DNuCCMLhmI_UtOPZZbH8bua8nuRPJgKXVYwk3t90xPskbAoUNQoziRqraSv396xnQ9_8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.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-->
<!-- 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/AVvXsEiI5YPMHoSJHdvK0ied-3kc5JxVlg1ftIuik_y1_hcs2bInworFXyF5uPVoM3q_ah7pVFc3Uq_DNuCCMLhmI_UtOPZZbH8bua8nuRPJgKXVYwk3t90xPskbAoUNQoziRqraSv396xnQ9_8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.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-->
8. Cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
9. Copy kode berikut dan paste diatas kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
<!-- 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://muroi-elbarezy.blogspot.com/2012/05/membuat-related-post-dengan-gambar.html'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
<!-- 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://muroi-elbarezy.blogspot.com/2012/05/membuat-related-post-dengan-gambar.html'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
10. Klik tombol SIMPAN TEMPLATE.
Keterangan:
- Sobat dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
- Untuk mengubah judul widget, sobat dapat mengedit kode berikut var relatedpoststitle="Related Posts";
- Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5YPMHoSJHdvK0ied-3kc5JxVlg1ftIuik_y1_hcs2bInworFXyF5uPVoM3q_ah7pVFc3Uq_DNuCCMLhmI_UtOPZZbH8bua8nuRPJgKXVYwk3t90xPskbAoUNQoziRqraSv396xnQ9_8/s400/noimage.png";
- Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2";
Sumber dari Sini
mohon maaf buat para sobat kalo jarang bw, jaringan masih error
hapyy blogging
wah saya butuh nie bang, makasih ya.
sama sama sob, silakan dicoba
sudah bang, mantap dan berhasil, tapi ko ga bisa di pindah jadi 6 ya. maksimal 5 kayanya bang, lebar dan lain sebagainya juga ga bisa di ganti bang. tapi its work
jumlah antara var maxresults=6; dan max-results=6" harus sama jumlahnya sob, silakan dicoba
wah menarik nie, saya sudah pakai tapinya gan. makasih nie ya tutorialnya.
ya ga papa sob, trimakasih kunjungannya
Wah, ini sih emang OK Mas, keren nih, ternyata mudah ya? Ane kira bakal ribet gitu
ya simpel sob, silakan dicoba jika berminat
trims silaturrahimnya
Udah ane coba nih Mas, tapi ini 'kan related post, nah, ane butuhnya yg random posts bergambar kayak gini selain linkwithin, soalnya kalo ane pake linkwithin, rusak Mas, malah ngelink ke alamat yg lain, bisa Mas? Sorry ngerepotin Mas, heheheh
selamat pagi, Mas. maaf, baru nongol skrg. smpat lama libur blogging. hehe...
Saya dulu pernah pake jasa www.linkwithin.com untuk membuat related post bergambar. Tp klo script yg disampaikan Mas Muro'i di atas, saya malah belum pernah pake.
ya mas ini juga seperti linkwithin, tapi ini bisa kita modifikasi sesuka hati
trimaksih silaturrahimnya
mantapppp....
biasanya memang pake linkwithin tp emg ada juga cara sperti bang Muro'i ini...
Happy Blogging
ya sob cara ini kita bisa modifikasi sesuai selera kita
trimakasih kunjungnnya:}
This comment has been removed by the author.
keren nih! kpn2 klo ingin ubah related post sy tak pakai ya sob. soalnya sekarang masih nyaman dengan yg telah ada.... hhe :)
oke g papa sob, silakan disave dulu
yah bagus kayak linkwithin,cuman yang ini beda ga di pasang di html.
lumayan buat koleksi siapa tau nanti bisa di gunakan.
terima kasih info dan tutorialnya
sama sama kang, silakan disave dulu siapa tahu nanti berguna, trimaksih silaturrahimnya
Mantefff banget bang Muro'i tutornyaaa..pokoknyaa sipp banget dahhh..trims ya bang..hahahhayyy
wah ini trik sederhana kok bang
makasih sudah berkunjung
good share :)
trimakasih sob:}
jaringan ane yang error ... bahahaha, maap sob! jadi jarang bewe kesini.
bhahaha...ga papa sob, yang penting terus silaturrahim
wah ini bikin berat juga ya ?
kode seperti ini memang beresiko berat di loading, tapi bisa disiasati di compress kodenya sob:}
Kalo masih template lawas bisa gak sob?
:)
bisa, asal ada script diatas, silakan dicoba
wah saya mau coba nie bang, saya simpen dulu ya. makasih .
Terima kasih sahabat atas berbagi ilmunya nih tentang buat related post menggunakan gambar
emm... ini berat nggak?
aq sdh pny sob.., btw aq jg dlu pake yg gituan.., jd ingat deh sama template yg lama.., happy blogging :)
info yang bermanfaat mas.. terima kasih sudah berbagi...
ane masih setia sama linkwithin sob. hehe
mungkin kalo pake gambar related postnya terbatas hanya beberapa item saja ya sob, beda dengan list biasa.
btw dg gambar user akan lebih tertarik utk klik.
wilujeng ngeblog
Kunjungan pagi mas
waw tipsnya menarik mas
boleh dicoba mas
makasih mas
boleh di coba nih mas lumayan, thanks yah...
informasi yang bagus nih mas, menurut pengalaman anda pemasangan related post semacam ini apakah sangat mempengaruhi loading blog...
berat sih sudah pasti sob, tapi ga terlalu..
makasih sekali tipnya sangat bermanfaat sob