Saat ini terdiri dari 6 jenis tampilan yang dapat Anda sesuaikan sendiri. Widget ini merupakan pengembangan dari konsep random post ringan yang pernah Saya tuliskan di sini. Hanya saja, alasannya ialah pemanggilan feed posting difilter melalui label posting yang spesifik, maka widget random post ini kini dapat dijadikan sebagai widget artikel terkait (random post dengan sortir label otomatis berdasarkan posting).
Widget-widget artikel terkait yang usang kurang erat berdasarkan Saya, sehingga Saya membuatnya lagi secara pribadi. Dan untuk menyingkat jumlah posting, maka model-model widget artikel terkait yang sudah terkenal kini telah Saya gabungkan menjadi satu kesatuan. Tujuan utamanya tetap. Mencoba untuk menampilkan posting-posting usang dengan jarak waktu penerbitan yang tidak terbatas namun dengan tenaga sesedikit mungkin:
Klik tombol Preview & Get Code! Di situ nanti Anda akan mendapat instruksi CSS dan XML template. Masuk ke halaman editor HTML template kemudian letakkan instruksi CSS yang dihasilkan di atas instruksi ]]></b:skin>. Kode XML dapat Anda letakkan di mana saja di dalam elemen <b:includable id='post' var='post'/>, tapi Saya sarankan untuk meletakkan instruksi tersebut di atas instruksi ini alasannya ialah posisinya yang gampang ditemukan dan lebih minim resiko:
<div class='post-footer'>Tabel Pengaturan
Pengaturannya tidak banyak, dan alasannya ialah Saya sudah membuat generatornya, jadi Anda bekerjsama tidak perlu lagi menyentuh variabel-variabel di dalam widget ini secara langsung. Tabel ini Saya buat untuk kepentingan dokumentasi saja:
| Opsi | Keterangan |
|---|---|
| widgetStyle | Kode model widget artikel terkait berupa angka. Mengubah nilai variabel ini akan mengubah markup HTML widget, sehingga instruksi CSS harus diubahsuaikan ulang. Lebih baik gunakan generator. |
| homePage | Digunakan untuk memilih URL blog Anda. Nilai sudah diotomatisasikan melalui elemen <data:blog.homepageUrl/> |
| widgetTitle | Markup HTML untuk judul/kepala widget. Bisa dipakai untuk menyisipkan instruksi HTML lain juga kalau mau. Kode tersebut nantinya akan tampil di atas daftar item posting di dalam widget. |
| numPosts | Digunakan untuk memilih jumlah posting yang ingin ditampilkan. |
| summaryLength | Digunakan untuk memilih panjang huruf ringkasan posting. |
| titleLength | Digunakan untuk memotong jumlah huruf judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi "auto" untuk menonaktifkan pemotongan huruf pada judul posting. |
| thumbnailSize | Digunakan untuk memilih lebar/tinggi thumbnail posting yang berbentuk kotak. |
| noImage | Isi dengan URL gambar cadangan untuk posting yang tidak mempunyai 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 gres secara otomatis dikala diklik. |
| moreText | Teks “Baca Selengkapnya”. |
| callBack | Fungsi perhiasan yang akan bekerja sehabis daftar posting termuat ke dalam kontainer widget. Lihat penjelasannya di bawah. |
Menerapkan Fungsi callBack Widget
Opsi ini berfungsi untuk membuat sikap perhiasan pada widget. Fungsi ini akan bekerja sehabis widget berhasil dimuat. Cocok dipakai untuk menambahkan efek-efek khusus. Dasar penerapannya ialah menyerupai ini. Kode di bawah ini akan menampilkan pesan peringatan bahwa widget telah berhasil termuat kalau widget berhasil termuat:
var relatedPostConfig = { callBack: function() { alert('Widget successfully loaded.'); } };Contoh 1: Membuat Efek Transisi Hover pada Tooltip
Set tampilan widget menjadi artikel terkait dengan tooltip, kemudian buat fungsi jQuery menyerupai ini:
var relatedPostConfig = { ... widgetStyle: 4, containerId: "random-post", callBack: function() { $('#' + this.containerId + ' li').hover(function() { $('.related-post-item-tooltip', this).filter(':not(:animated)').animate({ marginBottom: -5, opacity: "show" }, 400); }, function() { $('.related-post-item-tooltip', this).animate({ marginBottom: 10, opacity: "hide" }, 200); }).find('.related-post-item-tooltip').css('margin-bottom', 10); } };Hapus imbas :focus dan :hover pada CSS:
.related-post-style-4 .related-post-item:focus .related-post-item-tooltip, .related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block}Contoh 2: Membuat Efek Sliding pada Tabir Judul
Set tampilan widget menjadi artikel terkait dengan tabir tooltip:
var relatedPostConfig = { ... widgetStyle: 5, titleLength: 50, thumbnailSize: 130, containerId: "random-post", callBack: function() { $('#' + this.containerId + ' li').hover(function() { $('.related-post-item-tooltip', this).filter(':not(:animated)').animate({ marginTop: "50%" }, 400); }, function() { $('.related-post-item-tooltip', this).animate({ marginTop: "100%" }, 200); }).find('.related-post-item-tooltip').css('margin-top', '100%'); } };Hapus deklarasi display:none pada selektor tooltip widget, hapus juga imbas :focus dan :hover pada CSS:
.related-post-style-5 .related-post-item-tooltip { display:block; background-color:black; background-color:rgba(0,0,0,.9); position:absolute; top:0; right:0; bottom:0; left:0; padding:10px; line-height:normal; font-style:italic; color:white; overflow:hidden;display:none;}.related-post-style-5 .related-post-item:focus .related-post-item-tooltip, .related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}Contoh 3: Membuat Efek News Ticker
Set tampilan widget menjadi artikel terkait tipe thumbnail dan summary:
var relatedPostConfig = { ... numPosts: 10, widgetStyle: 2, containerId: "random-post", callBack: function() { var $container = $('#' + this.containerId + ' > ul'), $list = $container.find('li'), innerHeight = $list.first().height(), outerHeight = $list.first().outerHeight(true); // Container & list height setup $container.css({ "height": outerHeight * $list.length / 2, "overflow": "hidden" }); $list.css({ "height": innerHeight, "overflow": "hidden" }); // Animation function newsTicker() { window.setTimeout(function() { $container.find('li:last').stop().animate({ opacity: 0 }, 1000, function() { $(this).hide().prependTo($container).slideDown(1000, function() { $(this).stop().animate({ opacity: 1 }, 1000, newsTicker); }); }); }, 3000); } newsTicker(); } };Dan seterusnya. Buat efek-efek gres yang lain sesuka hati melalui opsi callBack.
Catatan: Saat menerapkan beberapa fungsi di atas, mungkin templat Anda nanti menjadi tidak dapat disimpan. Cobalah untuk mengelilingi fungsi callBack dengan komentar CDATA menyerupai ini:
var relatedPostConfig = { callBack: function() { //<![CDATA[ Tuliskan fungsi di sini... //]]> } };Atau baca posting ini sebagai acuan tambahan.