Widget HTML #1

Cara Membuat Widget Artikel Terkait di Blog

Widget artikel terkait atau sering juga disebut dengan widget related post merupakan salah satu widget yang cukup penting, yang harus anda pasang di blog. Alasannya, karena dengan adanya widget artikel terkait ini akan memudahkan kepada pengunjung kita dalam membaca artikel-artikel yang telah disediakan.

Misalnya, jika anda membuat artikel mengenai blogging. Mulai dari cara awal membuat blog, cara menambahkan widget, cara menghapus nya, dan yang lainnya. Maka dengan memasang widget artikel terkait, di blog anda akan muncul link yang berhubungan dengan artikel yang sedang pengunjung baca. Hasil nya pengunjung akan lebih lama dan betah di blog anda karena navigasi blog nya mudah diakses. Biasanya widget artikel terkait ini akan menampilkan hasil disesuaikan dengan pemberian label / kategori pada artikel. Maka nya sangat penting sekali untuk memberikan kategori pada artikel dengan benar.

Ada banyak sekali jenis (bentuk) widget artikel terkait, mulai dari widget artikel terkait yang hanya menampilkan judul nya saja, menampilkan dengan gambar, atau pun menampilkan nya dengan tooltip. Kali ini saya akan menjelaskan mengenai cara membuat artikel terkait di blog dengan menggunakan widget artikel terkait generator yang dibuat oleh blog DTE. Berikut alamat widget generator nya :
http://dte-project.googlecode.com/svn/trunk/related-post/widget-configuration.html

Dan berikut salah satu contoh nya :
artikel terkait

Untuk bentuk diatas menggunakan kode CSS, sebagai berikut :
/* ==== 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;
}

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

Sedangkan untuk kode HTML nya, sebagai berikut :
<!-- 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: 1,
      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 -->

Yang diatas hanyalah salah satu bentuk (jenis) dari beberapa style yang disediakan. Silahkan sesuaikan dengan blog anda.

2 komentar untuk "Cara Membuat Widget Artikel Terkait di Blog"

  1. Comment Author Avatar
    Bang kalau misal kita naruh gambar saja Gimana Gan sama judul saja
  2. Comment Author Avatar
    Kalau bisa update yang dua kolom dong gan

Komentar dimoderasi
Komentar akan muncul apabila disetujui oleh penulis