Efek Jatuh Jumlah Artikel Pada Label

Alhamdulillah. Bismillah. Underground404 - 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://reader-download.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 dan easeOutBounce 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 [Link]

Oke, Silahkan dicoba. Kalau ada masalah, silahkan tinggalkan komentar anda :)
Kalau membantu / suka silahkan klik tombol Like di atas postingan ini. Terimakasih sebelumnya
Source [Link]