GO Blog

Bukan hal baru lagi memang membahas topik related post blogger, tetapi seiring dengan waktu related post semakin memiki keragaman yang terus di kembangkan oleh para blogger. kali ini saya akan membagi cara termudah untuk mendesain related post menggunakan tool generator yang telah di buat oleh master taufik nurohman. langsung saja ikuti langkah di bawah ini...




Contoh XML

<!-- 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: 5,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->

Setelah terbuka jendela generator widget, silahkan desain sendiri berdasarkan 6 pilihan gaya related post yang sobat inginkan. Klik tombol Preview & Get Code! Di situ nanti Anda akan mendapatkan kode CSS dan XML template.


Masuk ke halaman editor HTML template kemudian letakkan kode CSS yang dihasilkan di atas kode ]]></b:skin>.

Kode XML bisa Anda letakkan di mana saja di dalam elemen <b:includable id='post' var='post'/>, tapi Saya sarankan untuk meletakkan kode tersebut di atas kode ini karena posisinya yang mudah ditemukan dan lebih minim resiko error pada template anda:

<div class='post-footer'>

Simpan perubahan template anda...

Penjelasan konfigurasi widget

widgetStyle	Kode model widget artikel terkait berupa angka. Mengubah nilai variabel ini akan mengubah markup HTML widget, sehingga kode CSS harus disesuaikan ulang. Lebih baik gunakan generator.
homePage	Digunakan untuk menentukan URL blog Anda. Nilai sudah diotomatisasikan melalui elemen
widgetTitle	Markup HTML untuk judul/kepala widget. Bisa digunakan untuk menyisipkan kode HTML lain juga jika mau. Kode tersebut nantinya akan tampil di atas daftar item posting di dalam widget
numPosts	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan
titleLength	Digunakan untuk memotong jumlah karakter judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi "auto" untuk menonaktifkan pemotongan karakter pada judul posting.
thumbnailSize	Digunakan untuk menentukan lebar/tinggi thumbnail posting yang berbentuk kotak
noImage	Isi dengan URL gambar cadangan untuk posting yang tidak memiliki gambar
containerId	ID elemen HTML untuk menampung daftar posting yang berhasil terpanggil
newTabLink	Ubah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini membuka di tab/jendela baru secara otomatis ketika diklik
moreText	Teks “Baca Selengkapnya”
callBack	Fungsi tambahan yang akan bekerja setelah daftar posting termuat ke dalam kontainer widget. Lihat penjelasannya di bawah
summaryLength	Digunakan untuk menentukan panjang karakter ringkasan posting

Selamat mencoba sob...