Obesity Strike: Show hide Label dengan JQuery

Inilah Widget label dengan animasi show hide dan dengan desain Flat UI yang super ganteng yang akan lebih menghemat ruang pada sidebar blog anda.

Demo

Okelah simak saja berikut ini langkahnya:

Bagi yang templatenya sudah dilengkapi dengan widget Label, lewati saja langkah ini ! Pertama tama buatlah dahulu sebuah widget label dengan cara masuk Dasboard Blogger lalu masuk ke menu Tata Letak dan klik tulisan Tambahkan Gadget lalu pilih widget Label dan atur menu Tampilkan menjadi Daftar dan centang Tampilkan jumlah entri per label.

Sekarang masuk menu Template lalu Edit HTML Template, lalu cari kode ]]></b:skin> atau </style> , setelah ketemu tempelkan CSS ini diatasnya:

.Label .on {
    background-color:#48C9B0
}
.Label h2 {
    position:relative;
    padding: 10px 39px 10px 15px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 4px;
    color: #FFF;
    background-color: #1ABC9C;
    display: block;
    cursor:pointer;
    margin:10px 0
}
.Label h2:after {
    content:"";
    border-width: 8px;
    border-color: #fff transparent transparent;
    border-style: solid;
    position: absolute;
    right: 15px;
    top: 17px
}
h2.on:after {
    border-color: transparent transparent #fff;
    top: 8px
}
.Label .count {
    display: block;
    float: right;
    min-width: 25px;
    text-align: center;
    border-radius: 2px;
    background-color:#D6DBDF
}
.Label li:hover .count, .actived .count {
    color: #FFF;
    background-color: #1ABC9C;
}
.list-label-widget-content {
    border-radius: 4px;
    background-color: #F3F4F5;
}
.Label ul, .Label li {
    padding: 0px;
    margin: 0px;
    list-style: outside none none;
}
.Label ul {
    border-radius: 4px;
    overflow:hidden
}
.Label li a {
    padding:10px;
    color: rgba(52, 73, 94, 0.85);
    display:block;
    font-size: 14px;
    text-decoration:none
}
.Label li a:hover, .Label .actived {
    color: inherit;
    background-color: #E1E4E7;
    text-decoration:none
}

Sekarang cari kode title='Label' type='Label', setelah ketemu gulir sedikit mouse kebawah dan temukan sebaris kode ini:

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <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>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <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>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>

Ganti deretan kode diatas dengan kode dibawah ini:

<div expr:class='&quot;widget-content hidden &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.searchLabel == data:label.name'>
            <a class='actived' expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'>
              <data:label.name/>
                <b:if cond='data:showFreqNumbers'>
                <span class='count' dir='ltr'><data:label.count/></span>
              </b:if>
            </a>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'>
              <data:label.name/>
                <b:if cond='data:showFreqNumbers'>
                <span class='count' dir='ltr'><data:label.count/></span>
              </b:if>
            </a>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.searchLabel == data:label.name'>
            <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>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>

Langkah terakhir, simpan Javascript ini diatas kode </body>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $('.Label h2').on("click", function (t) {
        $(this).toggleClass("on").next().slideToggle(200);
        t.stopPropagation()
    });
    $(document.body).on("click", function () {
        $('.Label').find(".on").removeClass("on").next().slideUp(200);
    });
});
//]]>
</script>

Kode yang saya beri garis bawah itu adalah JQuery, bila template anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut !