Cara Membuat Related Post dengan Gambar (Thumbnail) di Blog

Related Post merupakan widget blogger yang dapat diartikan sebagai artikel atau postingan terkait. Gunanya widget ini adalah untuk menampilkan kepada pengunjung postingan-postingan yang memiliki keterkaitan atau hubungan dengan postingan yang sedang dibaca, dan masuk ke dalam kategori atau label yang sama atau sesuai.

Widget ini sangatlah penting, tidak hanya menampilkan artikel terkait saja tapi dapat berpengaruh terhadap SEO Blog kita. Apalagi jika widget tersebut disematkan atau disisipkan gambar didalamnya, tentu akan menarik para pengunjung untuk mengunjungi dan membaca postingan terkait tersebut.

Berikut langkah-langkahnya:

1. Login ke Akun Blogger.
2. Masuk ke Dasbor, pilih menu Template > Edit HTML.
3. Cari kode ]]></b:skin>, kemudian salin dan letakkan kode berikut ini diatasnya.

.related-post{  margin:2em auto 0;   font:normal normal 11px/1.4 Arial,Sans-Serif}
.related-post h4{ font-size:150%;  margin:0 0 .5em}
.related-post-style-2,
.related-post-style-2 li{ margin:0;  padding:0;  list-style:none}
.related-post-style-2 li{ padding:10px;  border-top:1px solid #eee;  overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{ width:80px;  height:80px;  max-width:none;  max-height:none;  background-color:transparent;  border:none;  padding:0;  -webkit-border-radius:0px;  -moz-border-radius:0px;  border-radius:0px;  float:left;  margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{ font-weight:bold;  font-size:110%}
.related-post-style-2 .related-post-item-summary{ display:block;  overflow:hidden}
.related-post-style-2 .related-post-item-more{}

4. Cari kode <data:post.body/>, lalu salin dan letakkan kode dibawah ini dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='related-post'/>  <script type='text/javascript'>  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>      </b:loop></b:if>];  var relatedPostConfig ={      homePage:&quot;<data:blog.homepageUrl/>&quot;,      widgetTitle:&quot;&lt;h4&gt;Lihat Artikel Menarik Lainnya:&lt;/h4&gt;&quot;,      numPosts:5,      summaryLength:400,      titleLength:&quot;auto&quot;,      thumbnailSize:80,      noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,      containerId:&quot;related-post&quot;,      newTabLink:true,      moreText:&quot;Baca Selengkapnya&quot;,      widgetStyle:2,      callBack:function(){} };  </script>  <script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>

5. Terakhir klik Simpan template.
6. Selesai dan lihat hasilnya pada blog sobat.

Demikian tutorial blogger singkat untuk kesempatan kali ini, semoga cara ini dapat bermanfaat bagi sobat blogger semua.
Sekian, terima kasih.