01Cara mendapatkan CSS dan kode XML untuk related post
Contoh XML
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<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'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Post:</h4>",
numPosts: 5,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 80,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
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 |
| 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...
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT