Cara Membuat Related Post Dengan Thumbnail
Anda Pernah melihat gambar di atas?ya itu di sebut Related Post Dengan Thumbnail yang pada dasarnya menampilkan posting yang berkaitan dengan artikel yang sedang anda baca.Berbeda dengan related post biasa,kalau ini menggunakan cuplikan gambar sehingga lebih menarik pengjung untuk melihat posting-posting anda yang lainya.Untuk Cara Membuat Related Post Dengan Thumbnail Anda Bisa Mengikuti Langkah Di bawah ini:
1. Masuk ke Design ---> Klik Edit HTML
2. Centang Expand Template Widget
3. Paste kode dibawah ini diatas kode </head>
<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.2em;
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://kangdansen.googlecode.com/files/relatedpostwiththumbnail.js' type='text/javascript'/>
</b:if>
4. Cari salah satu kode berikut ini:
<div class='post-footer-line post-footer-line-3'> atau <p class='post-footer-line post-footer-line-3'>
5. Setelah itu letakan kode dibawah ini dibawah salah satu kode langkah ke.4
<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.omseoli.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
<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.omseoli.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</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>
6. Terakhir simpan template anda.
Terima kasih telah membaca Cara Membuat Related Post Dengan Thumbnail
Anda juga dapat membuat related post dengan thumbnail menggunakan widget linkwithin
Written by Joy Silalahi
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
Komentar ini telah dihapus oleh administrator blog.
BalasHapuskebanyakan semua blog ngasih tips buat bikin related post atau tulisan terkait nya sama. baik yang tulisan inggris atau yang bahasa indonesia. sekarang saya nemu kesulitan, karena pas dicari kode class='post-footer-line post-footer-line-3 di skrip html template yang saya pake di http://deraldes.blogspot.com, kode class='post-footer-line post-footer-line-3 gak ada. gimana dong?
BalasHapuscoba letakan dibawah data:post.body
BalasHapus@delayung :coba centang Expand Template Widget.
BalasHapusterimakasih infonya... :D
BalasHapusmemanf lebih terlihat menarik dengan dipasangnya thumbnail pada related post, nice share
BalasHapusmakasi gan atas pentunjuknya, akhirnya saya bisa, akan tetapi ada cara yg lebih gampang lagi gak gan, seperti linkwithin (itu kata temen ane) tapi saya belum pernah nyoba sich
BalasHapusUntuk linkwithin akan saya bahas.pada kesempatan berikutnya.
BalasHapusInformasi yang bagus dan mantap, happy blogging
BalasHapusthnks gan atas ilmu yang telah diberikan,,,soalnya saya telah berhasil mempraktekkannya,,,salam persahabatan selalu serta moga sukses selalu,,
BalasHapus@SHARE AJA:Terima Kasih Atas Komentarnya
BalasHapus@magazineticker :Salam sukses juga gan..:D
Tips dan trik yang mantap, terima kasih atas kesediaan anda berbagi, salam kenal persahabatan
BalasHapus@F-STAR:Salam kenal juga.
BalasHapusberfungsi bagus di blog saya. makasih gan
BalasHapusthanks infonya gan,akhirnya yang ini berhasil karena sebelumnya akoe sudah coba banyak tutorial tentang ini
BalasHapussama sama gan!
BalasHapusGan, katax klo mau buat related post hrs punya bnyk artikel yg 1 label ya? Slain syarat itu ada lg ga? Mohon pncerahanx.
BalasHapusOia, mohon kunjunganx di blog ane gan bia rame kya punya agan :) Thanks sblmnya n sukses slalu!!!
@sarapan artikel:gak harus banyak kok gan asal lebih dari 1 aja udah bisa.Kalau artikelnya banyak kan resultnya bisa di atur.
BalasHapusinfonya bagus banget, salam kenal ya..
BalasHapusRelated post with thumbnail yang mantap, thanks for sharing
BalasHapusInformasi yang mantap mas bro, salam kenal persahabatan, apa bisa kita saling bertukar link ?
BalasHapusPosting artikel yang bermanfaat, terima kasih telah sudi untuk berbagi, salam kenal persahabatan
BalasHapuskunjungan nya gan
BalasHapuspokoknya makasih banyak deh bang
BalasHapusMakasih telah berkomentar.walaupun terlalu singkat ya!
HapusBagus nih ! saya coba
BalasHapushttp://smartlymedia.bogspot.com
bisa di tambahin gx jumlah link nya cman 3??
BalasHapusBisa gan ganti aja var maxresults=5; jadi jumlah yang anda inginkan..
Hapussory sblumnya,, lu ngeshare html code tapi artikel lu ga bisa dicopy emang lu mau wa nulis tu code satu2 gitu?
BalasHapusMaaf ya gan!Anda Harus Like Fanspage terlebih Dahulu untuk mengcopy.
Hapus