Membuat Related Post Gambar Thumbnail Keren Abis di Blogspot

Membuat Related Post Gambar Thumbnail Keren Abis di Blogspot - Membuat related post atau artikel terkait dengan disertai gambar saat ini memang digandrungi para blogger dunia termasuk blogger kelas lokal.

Banyak model atau bentuk related post yang lagi populer saat ini mulai dari yang hanya judul saja, judul disertai gambar dan ada juga ada gambar judul dan sedikit keterangan yang akan kita bahas sekarang.

Gambar diatas adalah salah satu contoh model contoh related post yang sekarang ini lagi booming. Dan bila anda ingi model lain silahkan klik di dte-project untuk memeilih model yang lain seperti model vertikal atau lainnya.

Memang kalo di lihat dari kasat mata hehe.. kayak mau melihat hantu ae. Related post dengan gambar lebih menarik dan terlihat keren, dari pada related post yang hanya bertuliskan judul saja.

sumber ini saya peroleh dari mas CB blog.

Langkah-langkahnya adalah sebagai berikut :

1. Pastikan anda sudah masukka ke dasboard blogger
2. Pilih Template dan Edit HTML

3. Kopi kode CSS diatas kode ]]></b:skin>

/* ==== Related Post Widget Start ==== */

.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;
}

/* Style 2 */
.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;
  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 {}

/* ==== Related Post Widget End ==== */

4. Salin kode XML di bawah ini dan letakkan di atas <div class='post-footer'> (atau di mana saja di dalam <b:includable id='post' var='post'/> dan <b:includable id='mobile-post' var='post'/>.

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='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;Related Post:&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->

Semoga tidak kesulitan menerapkan tutorial diatas, bila ada kendala atau kurang pas di template anda silahkan corat coret dikomentar dibawah.
sekian tutorial membuat related post gambar thumbnail keren abis di blogspot smoga bermanfaat. salam sukses blogger.