Cara Membuat Related Post (Artikel terkait) Bergambar (Thumbnails)

Cara Membuat Related Post Bergambar (Thumbnails) - Setelah belajar membuat blog pasti ada banyak sekali hal yang bisa sobat lakukan untuk mempercantik blog salah satu nya adalah membuat related post atau artikle terkait  bergambar.

Related post atau artikel terkait ini terdapat banyak sekali model dan style yang berbeda-beda. Salah satunya adalah related post yang bergambar yang saya share pada postingan ini. Tampilan related sendiri tentunya bisa sobat sesuaikan dengan tema blog sobat seperti warna, besar gambar ataupun font sobat.

Banyak sekali blog yang menggunakan related post baik itu bergambar ataupun tidak. Blog dengan related post ini akan menambah poin SEO blog sobat karena related post akan mengurangi bounce rate pada blog. Pengunjung bisa lebih mudah menemukan artikel yang masih berhungunan dengan artikel yang pengunjung baca.

Nah, bagi sobat yang mungkin ingin membandingkan tutorial cara membuat artikel terkait ini tanpa gambar bisa lihat panduannya disini. Artikel terkait tersebut tampak simpel karena hanya berupa text saja tidak berupa gambar. Okey.. mari kita coba bagaimana cara membuatnya.

Cara Membuat Artikel Terkait Dengan Gambar di bawah postingan


  1. Silahkan masuk ke bloggger lalu pilih TEMPLATE dan EDIT TEMPLATE 
    Cara Membuat Related Post bergambar (thumbnail)




  2. Cari kode </head> dan copy kode di warna biru bawah ini lalu letakkan di atas kode </head> tadi

    <!--Related Posts with thumbnails Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts{float:left;width:auto;}
    #related-posts a{border-right: 1px dotted #eaeaea;}
    #related-posts a:hover{background: #f2f2f2;}
    #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
    #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
    #related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
    #related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
    <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
    </b:if>
    <!--Related Posts with thumbnails End-->
    3. Ganti kode yang berwarna merah dengan disesuaikan dengan blog sobat seperti panjang , dan tingginya.
  3. Lalu cari kode <div class='post-footer-line post-footer-line-1'> setelah itu copy dan pastekan kode warna biru di bawah ini di bawah kode    <p class='post-footer-line post-footer-line-1'>

    <!-- 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=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

  4. Simpan Template
Selamat mencoba artikel terkait dengan gambar nya , semoga suka