Menerapkan Code HTML Javascript untuk widget animasi popular Posts.
Ikuti langkah-langkah berikut:
Silahkan pasang terlebih dahulu widget popular post, Design > Page Elemen > Add a Gadget > Popular Posts (New!)
Silahkan pasang terlebih dahulu widget popular post, Design > Page Elemen > Add a Gadget > Popular Posts (New!)
Jika sudah, masuk ke Edit HTML > Centang Expand Widget Template. Ingat! Selalu back-up template kamu sebelum melakukan perubahan. Sekedar untuk jaga-jaga jika terjadi kegagalan.
Cari kode ]]></b:skin> dan letakkan kode di bawah ini diatas kode ]]></b:skin> tersebut.
#postlist-spy {font-size: 11px;overflow: hidden;margin-top: 5px;padding : 0; }
#postlist-spy ul {width: auto;overflow: hidden;list-style-type: none;padding: 0;margin: 0; }
#postlist-spy li {padding: 0;margin: 0 0 5px;list-style-type: none;float: left;height: auto;overflow: hidden;line-height: 12px;text-indent: 0px;}
#postlist-spy li a {margin-left: 0; }#postlist-spy li a img {margin-top: 0;float: left; }
Cari kode </head> dan pastekan kode dibawah ini di atas kode </head> tersebut.
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'><!--//--><![CDATA[//><!--jQuery(function () {jQuery('ul.spy').simpleSpy();});(function (jQuery) {jQuery.fn.simpleSpy = function (limit, interval) {limit = limit || 2; // Number popular post shown - maximal 4 default 2interval = interval || 10000;return this.each(function () {// 1. setup// capture a cache of all the list items// chomp the list down to limit li elementsvar jQuerylist = jQuery(this),items = [], // uninitialisedcurrentItem = limit,total = 0, // initialise later onheight = jQuerylist.find('> li:first').height();// capture the cachejQuerylist.find('> li').each(function () {items.push('<li>' + jQuery(this).html() + '</li>');});total = items.length;jQuerylist.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });jQuerylist.find('> li').filter(':gt(' + (limit - 1) + ')').remove();// 2. effect
function spy() {// insert a new item with opacity and height of zerovar jQueryinsert = jQuery(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo(jQuerylist);// fade the LAST item outjQuerylist.find('> li:last').animate({ opacity : 0}, 1000, function () {// increase the height of the NEW first itemjQueryinsert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);// AND at the same time - decrease the height of the LAST item// jQuery(this).animate({ height : 0 }, 1000, function () {// finally fade the first item in (and we can remove the last)jQuery(this).remove();// });});currentItem++;if (currentItem >= total) {currentItem = 0;}setTimeout(spy, interval)}spy();});};})(jQuery);//--><!]]></script>
Keterangan:
Angka 2 pada kode di atas adalah jumlah post yang ditampilkan. Kamu bisa menampilkan hingga 4 popular post.
Cari kode <div class='widget-content popular-posts'> dan hapus kode <ul> yang ada di bawahnya dan ganti dengan kode:
Angka 2 pada kode di atas adalah jumlah post yang ditampilkan. Kamu bisa menampilkan hingga 4 popular post.
Cari kode <div class='widget-content popular-posts'> dan hapus kode <ul> yang ada di bawahnya dan ganti dengan kode:
<div id='postlist-spy'><ul class='spy'>
Langkah terakhir, cari kode </ul> yang pertama kali anda temukan setelah kode <div class='widget-content popular-posts'> dan masukkan kode </div> setelah </ul>
Simpan template kamu dan lihat hasilnya. Demikian , selamat mencoba dan moga berhasil!
Simpan template kamu dan lihat hasilnya. Demikian , selamat mencoba dan moga berhasil!
123
BalasHapustesting
BalasHapus