Sunday, December 23, 2012

Cara Membuat Artikel Terkait Dengan Thumbnail

Cara Membuat Artikel Terkait Dengan Thumbnail, Cara Membuat Related Post Dengan Thumbnail,Cara Membuat Artikel Terkait, Cara Membuat Artikel Terkait Dengan Gambar.

Zona Kamu - Memasang Artikel terkait di blog sangatlah penting , kenapa ?
karena dengan Adanya Artikel terkait (Related Post) pengunjung dapat memilih berita lainnya dengan cepat dan dapat membuat pengunjung betah dan berlama-lama di blog kita serta berpengaruh juga terhadap Seo.

Lalu bagaimana Cara Membuat Artikel terkait dengan Thumbnail (Gambar) ?



Ikuti tutorial di bawah ini dan bisa langsung dipraktekkan :

1. Masuk ke akun Blogger Anda.
2. Klik Template.
3. Klik tab Edit HTML.
4. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.
5. Beri tanda centang pada Expand Template Widget kamu.
6. Cari kode </head> Gunakan tombol F3 untuk mempermudah pencarian kode.
7. Copy kode dibawah ini 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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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. Lalu carilah kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'> 

Copy kode dibawah ini  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 == &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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://infonetmu.blogspot.com/2011/12/cara-membuat-artikel-terkait-dengan.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-->


9. Klik Simpan Template.

KETERANGAN

- Sobat dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;


UDAH GITU AJA 

Cara Membuat Artikel Terkait Dengan Thumbnail Rating: 4.5 Diposkan Oleh: Aziz Hary

Popular Posts