Membuat Artikel Terkait dengan Gambar di Blog

Azka trimbell | 08:13 | 0 comments

Posting kali ini saya akan share tentang Widget artikel terkait (related posts) yang disertai dengan thumbnail ini memang sangat mirip dengan widget dari LinkWithin. Sudah pernah menggunakan LinkWithin ? jika belum, sobat bisa lihat contoh gambar dibawah, nah seperti itu kira-kira bentuknya. Setiap bagian akan disorot dalam warna pelengkap ketika mouse berada di atasnya, dan ketika seluruh bagian ini di klik akan mengarah ke URL dari "pos terkait" yang ditampilkan. artikel terkait sendiri sangat penting agar blog kita lebih SEO dan pengunjung lebih mudah untuk membaca artikel yang berkaitan

pict 
Berbeda dengan LinkWithin yang mengacak semua post yang ada untuk ditampilkan, widget ini sesuai dengan label atau kategori dari blog kita..


Gambar thumbnail ditampilkan untuk masing-masing pos terkait yang dihasilkan dari thumbnail posting yang bersangkutan. Oleh karena itu, hanya gambar yang telah Anda upload ke setiap blog post yang akan ditampilkan. Dan selain bagus dan rapi, script ini tidak membuat blog menjadi berat.

Caranya  Seperti biasa silahkan login dulu ke Blogger. Sip ! sekarang ikuti langkah-langkahnya berikut ini :




  1. Sekarang tuju Edit HTML.
  2. Jangan lupa backup template sobat dulu dengan mengklik Download Template Lengkap.
  3. Klik Expand Template Widget.
  4. Kemudian letakkan kode berikut ini, tepat diatas kode </head>
    <!--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: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
     
     
  5. Kemudian cari kode berikut ini :

    <div class='post-footer-line post-footer-line-1'>
     


  6. atau jika tidak ada, cari kode seperti dibawah ini :


    <p class='post-footer-line post-footer-line-1'>



  7. Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah kode diatas :

    <!-- 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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
  8. Setelah selesai semua, jangan lupa Simpan Template.
Untuk mengganti jumlah related posts-nya, silahkan edit var maxresults=5, ganti angka 5 dengan angka yang sesuai lebar postingan blog sobat. Sedangkan untuk mengganti judul dari related posts, silahkan edit var relatedpoststitle="Related Posts", ganti dengan judul yang sobat inginkan.

Semoga bermanfaat !  :c:

Category:

Info Newz2:
Merupakan Kumpulan dan berita tentang Dunia Seputar Entertainmen Gatget INTERNET KOMPUTER Love And Sex MOZAIK Seo TRIK DAN TIPS Umum Videos Wanita World in the news !

Disclaimer:
Semua Grafis di blog ini bukanlah milik kita atau gambar apapun bukan dibawah Hak Cipta kami, Semua grafis diambil dari sumber yang berbeda, Jika ada Gambar / artikel yang menyinggung atau di bawah Hak Cipta Anda maka silakan E-mail kami ke Trimbelboy@gmail.com untuk dihapus dalam waktu 24 jam!

0 comments