g Noah Band Official web | Berita NOAH Band | Info NOAH Band: Cara Membuat Artikel Terkait Keren

TOP NEWS

Saturday, August 18, 2012

Cara Membuat Artikel Terkait Keren


an Blogspot kali ini kita akan membahas tentang bagaimana cara membuat artikel terkait dengan thumbnail.Yang dimaksud dengan artikel terkait dengan thumbnail adalah artikel terkait yang menampilkan teks dan juga gambar.Mungkin sobat sekalian pernah jalan-jalan ke blog orang lain dan menemukan artikel terkait blog tersebut menampilkan teks dan juga gambar,nah itu dia yang dimaksud dengan artikel terkait dengan thumbnail.Cara membuatnya tidaklah terlalu sulit,sobat hanya membutuhkan beberapa menit saja untuk membuatnya.Mau tahu caranya?.Ayo langsung saja kita mulai.


Ikuti beberapa langkah berikut :
1.Login ke akun blogger sobat
2.Klik menu Template/Rancangan
3.Klik Edit HTML
4.Centang kotak Expand Template Widget
5.Cari kode </head>
biar lebih cepat mencarinya,gunakan Ctrl+F
6.Maukan kede di bawah ini tepat 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="Artikel Terkait";
</script>
<script src='http://andreykusanagi.googlecode.com/files/related-posts-thumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7.Cari Kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
8,Jika sudah ketemu,masukan kode di bawah ini tepat di atas 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://www.andreykusanagi.com'><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 yang ingin ditampilkan
dengan mengubah kode var maxresults=5;
-Untuk mengubah judul widget kodenya var relatedpoststitle
-Untuk mengubah warna dari splitter line kodenya var splittercolor

 Coba sobat lihat hasilnya.Semoga postingan saya tentang Cara Membuat Artikel Terkait Dengan Thumbnail bisa bermanfaat.Sampai Jumpa di Panduan Blogspot berikutnya.

0 comments: