Wednesday, 12 December 2012

Share on :

Cara Membuat Related Post Dengan Thumbnail Di Blog


Related post biasanya terdapat pada halaman posting di blog,yang fungsinya sebagai perantara yang menghubungkan artikel yang memiliki keterkaitan.Dalam setting dasar/default blog related post ditunjukkan pada sisi sidebar di blog dan posisinya seperti daftar menu yang berbentuk vertikal ke bawah.Nah,sekarang ini related post dapat dibuat lebih menarik lagi,yaitu dengan thumbnail.Apa itu Thumbnail ?.Yang belum tahu pasti akan bertanya seperti itu.Ok,saya akan jelaskan ,jadi thumbnail adalah gambar preview artikel dan posisinya berada pada bagian bawah post.
Agar lebih jelas,coba lihat gambar ini :


Lihat gambar yang di kolom merah itu,itulah yang namanya thumbnail
Untuk Cara Membuat Related Post Dengan Thumbnail Di Blog silahkan simak langah-langkahnya berikut ini :
1. Log in Blog
2. Pilih template > edit html
3. Pilih lanjutkan dan centang "expand widget"
4. Cari kode </head> agar lebih mudah tekan ctrl + F,copy kode dibawah ini tepat diatas 
    kode </head> tadi

<!--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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://media2give.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Kemudian cari kode seperti di bawah ini
<div class='post-footer-line post-footer-line-1'>

atau yang ini :
<p class='post-footer-line post-footer-line-1'>

6. Lalu copy kode di bawah ini dan paste dibawah salah satu kode di atas

<!-- Marquee Kompiajaib 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<h3><b>Artikel yang terkait: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://media2give.blogspot.com/2012/12/cara-membuat-related-post-dengan.html' target='_blank'>widget</a></div> 
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Media2give Related Posts with Thumbnails Code End-->

Perhatikan tulisan Artikel Yang Terkait : ganti dengan tulisan sesuai keinginan anda
Dan angka 6 untuk menunjukan jumlah related post yang ditampilkan.

7. Klik Simpan
Jasa Buat Web Murah


Cara Membuat Related Post Dengan Thumbnail Di Blog

Reactions:

6 comments:

  1. makasih banget bro..kok ane postnya max cm 4 ya, padahal maxresultnya udah disetting lebih

    ReplyDelete
  2. @ bread luck
    biasanya pengaruh template yg kmu pakai bro,di blogku yg dlu jga cuma bsa max 4

    ReplyDelete
  3. makasih gan tas infonya lam kenal dari gubugkomputerservice.blogspot.com

    ReplyDelete
  4. @ gubug komputerservice
    salam kenal juga gan,thanks kunjungannya

    ReplyDelete
  5. kliatannya mantep nih...
    coba dulu ah..

    makasih gan ^^
    tutorialnya sangat membantu sekali :D

    ReplyDelete
  6. @ insomniague
    coba aja gan,biar tmbh keren blognya^^
    thanks sdh berkunjung

    ReplyDelete

Silahkan berkomentar dengan sopan,tanpa ada unsur SARA dan tidak boleh pasang link aktif

Lirik Lagu Terbaru,Music Song Lyrics Update

Related Posts Plugin for WordPress, Blogger...