Related Posts Blogger : 6 in 1
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 & 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 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...
//]]>
}
};
Sumber : http://www.dte.web.id/2013/07/widget-artikel-terkait-blogger-6-dalam-1.html
0 komentar:
Posting Komentar