Menambah Page View Dengan Related Post Tumbhnail

Selain untuk mempercantik Blog kamu, related post juga dapat membantu blog kamu dalam menaikan pages visew. Membuat Related Post sudah bukan asing lagi bagi para bloger profesional, dan ini merupakan salah satu menu wajib untuk ditambahkan pada blog mereka.

Agr tidak lama – lama mari kita mencoba untuk membuat related post dengan tumbhnail dari gambar postingan.

Berikut cara membuat Related Post dengan Tumbhnail

• Silahkan masuk ke akun Blogspot kamu, kemudian masuk ke menu edit HTML Templates (Klik Rancangan/Design, klik  Edit HTML), kemudian check Expand Widget Templates
• Cari kode </head> untuk memudahkan tekan F3 dan serach.
• Copy code CSS Related Post dibawah berikut, dan paste code tersebut diatas code </head> tadi.
  <!--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="http://1.bp.blogspot.com/_u4gySN2ZgqE/
  SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";       var maxresults=5;
  var splittercolor="#d4eaf2";
  var relatedpoststitle="Artikel Terkait";
  </script>
  <script src='http://blogergadgets.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-->
• Tekan F3, kemudian cari kode dibawah berikut:<div class=’post-footer-line post-footer-line-3′> atau <p class=’post-footer-line post-footer-line-3′>
• Kemudian copy paste code di bawah berikut setelah kode di atas tadi
  
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- 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'>
  </b:if></b:if>
  <!-- Related Posts with Thumbnails Code End-->
  </b:if>

Keterangan:
Text yang bercetak miring dan di bold berwarna merah : var jumlahpost=5 menandakan jumlah judul posting yang akan muncul, rubah angka sesuai selera kamu.
Text  Artikel Terkait, merupakan judul yang akan muncul pada Related post, kamu dapat merubahnya sesuai keinganan kamu yang lebih cool…..
Kalau Sudah silahkan “Save Template”
Untuk contoh Related Post Tumbhnail, kamu bisa lihat Related post blogger di bawah berikut. :)