Alhamdulillah. Bismillah. SharingWithMee - Efek Jatuh Jumlah Artikel Pada Label. Sudah tau maksud judul pada postingan kali ini? Kalau belum, silahkan diliat foto dibawah ini. Atau mungkin langsung di liat pada widget Category disamping :)
Tutorial :
Pasang permanggil jquerynya dahulu (kalau sudah ada, tidak usah dipasang lagi) :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script src='http://programisjs.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>Pasang widget label terlebih dahulu, dengan settingan / konfigurasi Tampilkan jumlah entri per label dan juga ber Daftar bukan cloud.
Setelah dipasang, masuk ke editor template anda. Checklist Expand Template Widget.
Cari kode dibawah (tidak harus sama persis, yg penting ada di dalam tag <ul> :
<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </b:if> </li> </b:loop></ul>Ganti dengan kode dibawah ini :<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </a> </b:if> </li> </b:loop></ul>Kemudian pasang kode jQuery nya diatas tag </body> :
<script type='text/javascript'>$('#ID-WIDGET-LABEL li a').hover(function() { $('span.label-count',this).slideDown(500,'easeOutBounce');},function() { $('span.label-count',this).fadeOut(400,'easeOutQuart');});</script>NB : ID-WIDGET-LABEL adalah kode ID yang ada di widget Labelmu, jadi silahkan diganti dengan ID label widget anda. Biasanya ber-ID Label1 easeOutBounce daneaseOutBounce adalah jquery easingnya, Cek dan perlajari di [Link]
Pasang juga CSS nya (hampir lupa) :
span.label-count { position:fixed; background:#000; color:#FFF; font-size:25px; font-weight:700; top:0; right:20px; margin-top:250px; width:auto; height:auto; text-align:center; opacity:0.7; border-radius:10px; display:none; padding:20px 40px;}span.label-count:before { content:""; width:0px; height:0px; position:absolute; right:100%; top:20px; border-width:10px; border-style:solid; border-color:transparent black transparent transparent;}
Untuk membuat panah / mengganti arah panah bisa liat dan pelajari di Dunia Maya Oke . Google Maksud nya
Oke, Silahkan dicoba. Kalau ada masalah, silahkan tinggalkan komentar anda :)
Posting Komentar