Cara Membuat Related Post Dengan Gambar di Blog

Oleh Achmad Arifandi

Monday 16 February 2015

Bagikan :

Tweet

Related Post ini merupakan salah satu widget yang dapat disebut dengan artikel terkait atau postingan terkait. Gunannya widget ini adalah untuk memberitahukan pengunjung artikel - artikel yang ada kaitannya dengan artikel yang dibaca, related post ini hanya menampilkan artikel yang kategori atau label yang sama atau sesuai dengan artikel yang dibaca pengunjung.

Cara Membuat Related Post Dengan Gambar

1. Login ke akun blogger anda.

2. Masuk ke Dashboard, Template >> Edit HTML.

3. Cari kode ]]></b:skin>, kemudian copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>.

/* ==== Related Post Widget Start ==== */
.related-post {margin:0;padding:0}
.related-post h4{margin:0 0 .5em;font-size:160%;}
.related-post-style-2,
.related-post-style-2 li {margin:0;padding:0;list-style:none;}
.related-post-style-2 li {padding:10px;border-bottom:1px solid #eee;overflow:hidden;}
.related-post-style-2 li:last-child {border-bottom:none}
.related-post-style-2 .related-post-item-thumbnail {width:70px;height:70px;max-width:none;max-height:none;backgroundcolor:transparent;border:none;padding:0;float:left;margin:2px 8px 0 0;}
.related-post-style-2 .related-post-item-title {font-family:'Oswald',sans-serif;font-size:17px;}
.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. Lalu cari lagi kode </article>, kemudian letakkan kode berikut ini tepat dibawah kode </article>.

<!-- 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. Klik simpan, lihat hasilnya dipostingan blog anda.

Itulah Cara Membuat Related Post Dengan Gambar di Blog anda juga bisa memasangnya tanpa ganbar dan text, tapi tunggu diartikel selanjutnya ya.

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Mursaid Blog langsung di pesan kotak masuk.

RSS FEED

Kategori : Widget