Cara Membuat Artikel Terkait Thumbnail Pada Blog

Unknown

Tutorial Blogging, Widget

24 Des 2012

Belum ada komentar

Tutorial Blog - Halo sobat pengunjung sekalian, tentunya masih semangat dong untuk menyimak tutorial kita pada hari ini. Yaitu Cara Membuat Artikel Terkait Thumbnail Pada Blog sebelumnya, kamipun telah memposting Cara Agar Blog Anti Copy Paste agar mencegah kesalah pahaman postingan dari blog satu dengan yang lain. Bagaimana wujud dari Cara Membuat Artikel Terkait Thumbnail Pada Blog? Ini dia:

Berminat untuk memasang, Apakah susah? Bagaimana caranya? Mungkin di antara kedua pertanyaan tersebut ada dalam pikiran sobat, saya akan jawab pertanyaan diatas.

Apakah rumit?
Saya akan menjawab pertanyaan tersebut dengan satu kata yaitu TIDAK tentu saja tidak, salah satu kata mutiara dari saya - " Jika rumit, Janganlah dianggap rumit justru jika anda berkata seperti itu suatu permasalahan akan menjadi bertambah rumit " - ( kata mutiara asli dari pengalaman saya ).

Bagaimana caranya?
1. Seperti biasa, log in ke akun blog sobat.
2. Pilih menu Template > Edit HTML > Lanjutkan > Centang Expand Template Widget.
3. Cari kode </head>, Untuk mempermudah pencarian, pijat tombol Ctrl+F atau F3.
4. Copas kode berikut, tepat diatas 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjdp3wAcecsw34bQ4MfQmkf6pDGyChCfBpsvA3DGQi8tb4MuM-aQa1GBBeiNoODX7UJDkGGvCHAoFWBNVUnQRm0vQgh_10hQfcCKsSXfA-rJJygTI9Nc3iYAjq5qwm92xtuZKnSc4KW2o/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-->

5. Kemudian cari kembali kode <data:post.body/> Lalu copas kode berikut ini, letakkan tepat dibawah kode <data:post.body/>

<!-- 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-->

6. Simpan dan lihat hasilnya....

*Keterangan:
var maxresults=5; adalah jumlah postingan yang ingin di tampilkan.
var relatedpoststitle="Related Posts"; Ganti Related Post dengan kata yang ingin sobat gunakan.

Mungkin sampai disini dulu tutorial kita pada hari ini, semoga bermanfaat.