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);
}
};
Hapus efek
: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 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.css({
"height": outerHeight * $list.length / 2,
"overflow": "hidden"
});
$list.css({
"height": innerHeight,
"overflow": "hidden"
});
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 baru yang lain sesuka hati melalui opsi
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() {
Tuliskan fungsi di sini...
}
};
2
komentar
.gif)
