Widget-widget artikel terkait yang lama kurang bersahabat menurut Saya, sehingga Saya membuatnya lagi secara pribadi. Dan untuk menyingkat jumlah posting, maka model-model widget artikel terkait yang sudah populer kini telah Saya gabungkan menjadi satu kesatuan. Tujuan utamanya tetap. Mencoba untuk menampilkan posting-posting lama dengan jarak waktu penerbitan yang tidak terbatas namun dengan tenaga sesedikit mungkin:
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:<div class='post-footer'>Tabel Pengaturan
Pengaturannya tidak banyak, dan karena Saya sudah membuat generatornya, jadi Anda sebenarnya 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 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. |
Menerapkan Fungsi callBack Widget
Opsi
ini berfungsi untuk menciptakan perilaku tambahan pada widget. Fungsi
ini akan bekerja setelah widget berhasil dimuat. Cocok digunakan untuk
menambahkan efek-efek khusus. Dasar penerapannya adalah seperti ini.
Kode di bawah ini akan menampilkan pesan peringatan bahwa widget telah
berhasil termuat jika 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 seperti 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);
}
};: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%');
}
};display:none pada selektor tooltip widget, hapus juga efek :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();
}
};callBack.
Catatan: Saat menerapkan beberapa fungsi di atas, mungkin template Anda nanti menjadi tidak bisa disimpan. Cobalah untuk mengelilingi fungsi
callBack dengan komentar CDATA seperti ini:var relatedPostConfig = {
callBack: function() {
//<![CDATA[
Tuliskan fungsi di sini...
//]]>
}
};
