Beranda » Widget » Widget Related Post dengan 6 style

Widget Related Post dengan 6 style

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...

01Cara mendapatkan CSS dan kode XML untuk related post

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.

02Menginstall ke template anda

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 <data:blog.homepageUrl/>
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.
summaryLength: // Digunakan untuk menentukan panjang karakter ringkasan posting.
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.

Selamat mencoba sob...

Widget Related Post dengan 6 style

Belum ada tanggapan untuk "Widget Related Post dengan 6 style"

Post a Comment