Related Posts - Sekarang anda tidak usah susah-susah membuat related
post (artikel terkait) untuk blogger. Ada 6 pilihan related posts yang
sudah dibuat oleh Master Taufik DTE. Tugas anda tinggal memilih dan
kostumisasi tampilan saja.
Untuk membuatnya, silahkan ada pilih style dan atur sendiri pada Related Posts Generator
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'>
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
.
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...
//]]>
}
};