Blogging | Komputer | Sosial Media

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.
Tag : Blogging

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Blog Drim Tekno.

Feed Count Drim Tekno
20 Komentar untuk "Cara Membuat Widget Artikel Terkait di Blog"

Boleh nich kapan2 nyoba.....

Sangat bermanfaat mas, saya juga udah menerapkannya luar biasa.

Langsung TKP dan berhasil. makasih makasih :)

Keren broh, mau cobain dulu dehh

makasih ,, ijin nyoba dulu di blog sederhana saya kang

cara pasangnya gimana mas kalo di blogspot?
maaf nubie

lumayan tapi kadang masih binggung kang. salut dah

hasil alhirnya kayak gimana ya?

sama-sama, semoga bermanfaat

berhasil,,, makasih bang...

sama-sama, semoga bermanfaat

silahkan, mas. Semoga bermanfaat :)

Komentar dimoderasi
Komentar akan muncul apabila disetujui oleh penulis