Menerapkan Efek Toggle Pada Sidebar Blogger

Unknown

Tutorial Blogging

10 Mar 2014

1 Komentar

Applying Toggle Effect In Blogger Sidebar - Masih dalam pembahasan artikel Toggle, kali ini kita akan mencoba mengaplikasikan efek Toggle ini pada widget sidebar. Sehingga dengan ini content sidebarnya disembunyikan dan akan tampil ketika judul widgetnya diklik. Dengan begitu daerah di sidebar akan irit tempat dan dengan ini juga kita bisa memilih isi widget mana yang ingin disembunyikan.

Tertarik mencobanya? Mari kita mulai mencoba cara mudah menambahkan efek Toggle pada sidebar ini.

Pertama kita harus mengetahui dulu ID dari widget sidebar yang isinya ingin kita sembunyikan. Sebagai contoh biasanya kode widget sidebar tampak seperti di bawah ini.

<b:widget id='HTML6' locked='false' title='Blog&apos;s Stats' type='HTML'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
    </b:widget>

Dari kode widget di atas tersebut kita telah mengetahui bahwa ID widgetnya adalah HTML6 dan isi widgetnya dibungkus dengan class "widget-content". Maka kita membuat Togglenya seperti di bawah ini.

$(function() { 
    $("#HTML6").click(function () {
    $("#HTML6 .widget-content").toggle("slow")
});
 });

Seperti biasa silahkan simpan script Toggle-nya di atas kode </body>

Agar isi widgetnya tidak muncul dan akan muncul ketika judul widgetnya diklik, silahkan buat kode CSS seperti di bawah ini.

#HTML6 .widget-content {display:none}

Dan rubah bentuk kursor pada judul widgetnya menjadi pointer seperti di bawah ini.

#HTML6 h2{cursor:pointer}

Setelah itu silahkan SAVE perubahan edit HTML blog Anda. Namun perlu diingat, karena ini menggunakan Toggle jadi pastikan blog Anda telah dipasang jquery library. Dan jika ingin mencoba menggunakan fungsi Toggle lainnya seperti bounce, clip, blind, dan lain-lain silahkan baca lagi postingannya di link di bawah ini. Jangan lupa untuk menambahkan jquery-ui agar efeknya bisa berjalan.

• Baca juga: Beberapa Jenis Efek Toggle Dengan Jquery

Untuk demonya silahkan lihat pada blog ini sendiri, khususnya terletak pada Chatbox atau Donasi KPK.

Sumber kode : http://www.kompiajaib.com/2014/01/cara-mudah-menambahkan-efek-toggle-pada.html