Membuat Widget Related Post Dengan Gambar

Oleh Unknown

Saturday, February 28, 2015

Bagikan :

Tweet

Related Post merupakan suatu widget yang menampilkan artikel yang terkait dengan artikel yang dibaca oleh para pengunjung. Fungsi dari widget ini adalah untuk memberitahukan pengunjung agar dapat membaca artikel yang ada kaitannya dengan artikel yang dibaca.

Related Post ini hanya menampilkan artikel - artikel yang berkaitan atau berlabel yang sama dengan artikel yang dibaca, untuk membuat widget ini menarik anda harus menambahkan sebuah gambar untuk menarik perhatian pengunjung.

Berikut ini langkah - langkah Membuat Widget Related Post Dengan Gambar :

1. Login ke akun Blogger.

2. Masuk ke Dashboard, Template > Edit HTML.

3. Salin dan letakkan CSS dibawah ini tepat diatas kode ]]></b:skin>.

/*Related Post*/
.related-post{margin:0;padding:0}
.related-post h4{margin:0 0 .5em;font-size:160%;}
.rel-style-2{margin:0 0 0 0!important;padding:0 0 0 0!important;list-style:none}
.rel-style-2 li{margin:0 0 0 0;padding:0 0 0 0}
.rel-style-2 li{padding:5px 0!important;border-bottom:1px solid #e5e5e5;overflow:hidden}
.rel-style-2 li:last-child{border-bottom:none}
.rel-style-2 .rel-thumb{width:70px;height:70px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 8px 0 0}
.rel-style-2 .related-post-item-title{font-family:'Oswald',sans-serif;font-size:17px;}
.rel-style-2 .related-post-item-summary{display:block;overflow:hidden}

4. Kemudian salin dan letakkan kembali kode dibawah ini tepat diatas kode </article> atau sesuaikan dengan Template yang anda pakai.

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

5. Simpan, lihat hasilnya dengan memasuki area postingan.

Begitulah caranya untuk Membuat Widget Related Post Dengan Gambar jika anda tidak tau cara menyesuaikannya pada template yang anda pakai, silahkan kontak kami.

Tag : Widget