Rabu, 29 Februari 2012

Cara Membuat Related Post Thumbnails Blogger

Jika sebelumnya infonetku sudah berbagi Tips Cara Menambahkan Google Translator Widget di Blog 
kali Infonetku akan berbagi tips Membuat Widget Artikel Terkait / Related post pada blog. 


Tips Menghias blog ini akan membuat seperti gambar diatas, untuk contoh nyatanya lihat dibawah postingan ini..
Oke langsung saja yah..
1.Langkah pertama masuk dulu ke blogger dasbor sobat, lalu back up atau download terlebih dahulu template sobat, untuk jaga jaga jika sobat mengalami kesalahan, kemuidian edit HTML dan centang "Expand Widget Templates"
2.Kemudian cari code dibwah ini, gunakanlah Ctrl + F untuk memudahkan sobat mencari
</head>

Setelah ketemu gantikan dengan kode dibawah ini..

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Jangan Lewatkan Artikel Lainnya";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Setelah itu cari lagi kode berikut..

<div class='post-footer-line post-footer-line-1'>

jika sobat tidak menemukan kode seperti diatas coba cari kode dibawah ini..

<p class='post-footer-line post-footer-line-1'>

Setelah itu letakkan kode dibawah ini setelah kode yang tadi atau tepat dibawah kode yang tadi.

<!-- Related Posts with Thumbnails Code Start-->
<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=5&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'/>
</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-->

Kemudian jangan lupa untuk save..lalu lihat hasilnya..

4.Kalau sobat ingin menambah atau mengurangi jumlah artikel terkait atau related post yang akan ditampilkan sobat tinggal menggantikan nomor seperti kode dibawah, gantikan nomor sesuai dengan yang sobat ingin tampilkan.

var maxresults=5;

Untuk mengubah jumlah label yang akan diperlihatkan sobat tinggal edit kode sperti dibawah ini

max-results=5

5.Untuk merubah judulnya sobat bisa edit kode seperti kode berikut.

var relatedpoststitle="Related Posts";

6.Untuk postingan yang tidak ada photo, supaya terlihat ada photonya gantilah url photo yang sobat ingin tampilakan supaya nanti jika secara otomatis untuk postingan yang tidak memiliki photo akan menampilkan photo yang sobat mau

var defaultnoimage="https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";

7.Editlah kode warna dibawah ini kalau sobat ingin mengganti warna framenya

var splittercolor="#d4eaf2";

jika belum juga berhasil, jangan panik yah, sobat bisa hubungi saya dengan cara berikan komentar sobat, dengan senang hati akan bantu.Selamat Mencoba yah...Salam Infonetku.
Source Blogger Plugins

21 komentar

terimakasih sobat atas ilmunya tapi kode kode di atas [ < c lass='post-foo ter-line pos t-foo ter-lin e-1 ' > ] dan satunya lagi tidak ada di html ku gimana ya? ada solusi

"Expand Widget Templates" udah di centang g sob?

makasih mas ganteng tutorialnya

gan kog di blogku gg muncul ya??

kok gk ada juga muncul gan, sundul dulu..!!

Saya sudah ikuti step by step tapi kok nggak muncul ya gan di toko online saya.
Terima Kasih

Beberapa template emang nggak bisa
tapi coba letakkan kodenya di bawah kode ini
<data:post.body/>
jangan di
<div class='post-footer-line post-footer-line-1'>

akhirnya ketemu juga tutorialnya,, langsung ane praktekkan gan ^_^

thanks infonya..dah tk coba tp kok ada tulisan link blogger template di homepage ku ya

thanks infonya gan, skarang blog ane udah bisa n berhasil! follback y gan, blog agan udah ane follow. thx http://tipes64mes.blogspot.com/

ya elah di blog ini aja gak ada related post nya :D ngasih tutorial buat related post with thumbnai lagi wkwkwkwk :D cobain sampe buntung juga gak mungkin keluar

Keren sob artikelnya sangat bermanfaat. Terimakasih akan saya coba langsung di blog saya perawatan wajah


EmoticonEmoticon