Minggu, 22 Januari 2012

Trik Membuat Widget Related Post | Artikel Terkait dengan Thumbnail

| Minggu, 22 Januari 2012 | 0 komentar

Sobat Blogger pembaca setia artikel Blog dan SEO di web saya ..

edisi kali ini saya postkan untuk anda tips membuat widget related post | artikel terkait dengan thumbnail alias bergambar (kalau postingnya pake gambar, maka gambarnya tampil disana)..

Okeh deh, begini caranya :
1. Masuk ke akun bloggermu, lalu pilih rancangan lalu klik edit html, jangan lupa centang expand widgetnya, kalau masih pemula, download dulu templatenya ya ...
2. aktifkan mode pencarian dengan menekan CTRL+F ; lalu cari kode ini : </head>
3. setelah ketemuan , lalu copy code dibawah ini dan taruh diatas kode point 2 tadi :

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}


#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}


#related-posts a{
color:black;
}


#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFl5OwYoJZ3Oy09XhmoE5ncfxxBWUywHSytjfISUjz8Oi1Urpc8sD1wVScCTOPe3izlREggo2KEoJ3RStUtWpi5gy2CCbxUkFig_d9q79P_q6rNjWUw1Vbqy4_oyXNDfuOokoQSkwc8Mf/&quot;;
var maxresults=10;
var splittercolor=&quot;#cccccc&quot;;
var relatedpoststitle=&quot;Artikel Terkait dengan Posting ini&quot;;
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

4. selanjutnya cari kode dibawah ini dan taruh sesudah kode point 3 tadi :
<div class='post-footer-line post-footer-line-1'> 

atau 


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

5. setelah ketemu, kemudian copy paste kode berikut :


<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&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'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->


Nah untuk mengatur jumlah postingan yang ditampilkan nanti atur kode var maxresults=10; dengan angka yang kamu inginkan.

Nah untuk mengatur judulnya maka silahkan ganti yang dicetak merah var relatedpoststitle=&quot;Artikel Terkait dengan Posting ini&quot;;

Selanjutnya anda save, dan lihat hasilnya ... jreeeng .. ok kan ? nah modifikasi deh sendiri ya biar lebih kereeeen ....iyaaaaa kaaaaan ???? minum dulu jahe merah karomah nya aaaah .... order yu... 

Ditulis Oleh : Unknown ~ Blog Pribadi Abu Iram Al-Atsary

Selamat, Anda sedang membaca artikel saya yang berjudul Trik Membuat Widget Related Post | Artikel Terkait dengan Thumbnail - Artikel ini diposting oleh Unknown pada hari Minggu, 22 Januari 2012. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Jangan lupa like ke akun facebook anda untuk berbagi - Kritik dan saran dapat anda sampaikan melalui Buku Tamu Kami. By. Abu Iram Al-Atsary.

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Tulis Komentar Anda Disini:

 
© Copyright 2010. yourblogname.com . All rights reserved | yourblogname.com is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com