Cara Membuat Related Post Gambar pada Blogger


Seperti yang sebelumnya saya jelaskan di Cara Membuat Artikel Terkait Di Blog, sekarang saya akan langsung memberikan Tutorial cara membuat Related Post  with image/ Artikel Terkait  dengan gambar pada blogger,  Jadi kali ini pada artikel terkaitnya terdapat gambar. sehingga dapat menarik perhatian pengunjung.

Cara pasangnya sebagai berikut :

  • Silahkan anda Login ke dasbor [masuk ke akun blog] anda.
  • Kemudian pilih Rancangan dan klik Edit HTML.
  • Jangan lupa klik Expand Template Widget.
  • Setelah muncul kemudian anda cari kode berikut :</head> [klik CTRL+F untuk mempermudah pencarian]
  • Copy dan Paste kode di bawah ini SEBELUM </head>.

<!–Related Posts with thumbnails Scripts and Styles Start–>
<!– remove –><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: black;
font-family: Verdana, 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&#8221;;
var maxresults=5;
var splittercolor=”#d4eaf2″;
var relatedpoststitle=”Related Posts“;
</script>
<script src=’http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js&#8217; type=’text/javascript’/>
<!– remove –></b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>

  • Kemudian temukan kembali kode berikut ini :
<dic class=’post-footer-line post-footer-line-1‘>

  • Tambahkan kode dibawah ini setelah kode diatas :

<!– 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.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html’><img style=”border: 0″ alt=”Related Posts Widget For Blogger with Thumbnails” src=”http://image.bloggerplugins.org/blogger-widgets.png&#8221; /></a><a href=’http://bloggertemplates.bloggerplugins.org/’><img style=”border: 0″ alt=”Blogger Templates” src=”http://image.bloggerplugins.org/blogger-templates.png”/></a&gt;
</b:if></b:if>
<!– Related Posts with Thumbnails Code End–>

  • Kode warna biru dan merah berikut : var maxresults=5; Untuk mengatur jumlah artikel terkaitUbah nilai 5 misal menjadi 7 atau berapa yang Anda suka.
  • Kode ini : var relatedpoststitle=”Related Posts“; Untuk mengubah Judul nya. 

Silahkan anda berkreasi menurut selera anda…..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s