Cara Membuat Related Post Dengan Thumbnail

Cara Membuat Related Post Dengan Thumbnail, seperti yang telah saya jelaskan pada artikel sebelumnya bahwa fungsi dari related post itu sendiri pada web atau blog yaitu untuk menghubungkan artikel lainnya berdasarkan atas kesamaan nama kategori atau label postingan atau silahkan buka kembali artikel saya sebelumnya. Related Posts ini sebenarnya bahan pokok utamanya...eee kayak makanan saja bahan utama...hehehe. Oke lanjut sebenarnya sumber codenya dari blog teman www.dte.web.id yang telah saya modifikasi sedikir agar terlihat lebih oke.

Membuat Related Post Dengan Thumbnail

Related Post Dengan Thumbnail ini terpasang pada salah satu blog saya yaitu airinband.blogspot.com silahkan Anda lihat demonya disitu.

Oke Anda tertarik untuk memasangnya? kalau tertarik silahkan ikuti saya ke mana saja...hehehe

1. Letakkan CSS berikut di atas ]]></b:skin> atau di dalam </style>
.related-post {
  margin:2em auto 0;
  margin:5px 5px 0 0;
  padding:5px 15px 15px;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
  background:#fff;
  border-radius:2px;
  border:1px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  box-shadow:0 1px 3px #ddd;
  -moz-box-shadow:0 1px 3px #ddd;
  -webkit-box-shadow:0 1px 3px #ddd;
}

.related-post h4 {
  font-size:150%;
  color:#333;
  margin:5px 0 .5em;
}

.related-post-style-5,
.related-post-style-5 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}

.related-post-style-5 .related-post-item {
  display:block;
  float:left;
  width:82px;
  height:auto;
  padding:0;
  padding-bottom:3px;
  margin-left:2px;
}

.related-post-style-5 .related-post-item:first-child {
  border-left:none;
}

.related-post-style-5 .related-post-item-wrapper {
  display:block;
  position:relative;
  overflow:hidden;
}

.related-post-style-5 .related-post-item-thumbnail {
  display:block;
  margin:0;
  width:77px;
  height:77px;
  max-width:none;
  max-height:none;
  background-color:#fafafa;
  border:1px solid #bbb;
  padding:0;
  -webkit-border-radius:-1px;
  -moz-border-radius:-1px;
  border-radius:-1px;
}

.related-post-style-5 .related-post-item-tooltip {
  display:block;
  background-color:black;
  background-color:rgba(0,0,0,0.9);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:10px;
  line-height:normal;
  font-size:10px;
  font-style:normal;
  color:#ccc;
  overflow:hidden;
  -webkit-border-radius:-1px;
  -moz-border-radius:-1px;
  border-radius:-1px;
  display:none;
}

.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {
  display:block;
}

2. Selanjutnya letakkan code HTML di bawah ini tepat di bawah <data:post.body/> jika kode tersebut terdapat 2 maka letakkan pada code yang kedua

<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;Related Mp3 Album:&lt;/h4&gt;&quot;,
      numPosts: 14,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 72,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: true,
      moreText: &quot;Read More&quot;,
      widgetStyle: 5,
      callBack: function() {}
  };
  </script>
  <script async='async' src='//airiband.googlecode.com/svn/trunk/Related.js' type='text/javascript'/>
</b:if>

Catatan : Perhatikan code numPosts: 14 itu adalah jumlah artikel didalam related posts, silahkan tentukan jumlah sesuai dengan keinginan Anda

3. Simpan dan lihat hasilnya

2 komentar