Cara Mudah Menambahkan Efek Toggle Pada Sidebar

Cara Mudah Menambahkan Efek Toggle Pada Sidebar

Bola Hero Gawai

Cara Mudah Menambahkan Efek Toggle Pada Sidebar

Efek Toggle Pada Sidebar
Masih berbicara tentang 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 untuk 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.
Untuk demonya silahkan lihat pad link di bawah ini. Silahkan klik pada sidebar "Google+ Followers" nya.


Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

47 Comments Add Comment

Pertamaxnya saya bawa kabur ya Kang :D

Balas

wah ucapan selamatnya keren sob.. wkwkkwkwkw

Balas

saya dari tadi mlm nungguin terus tetap aja kebagian nmr dua :P

Balas

Nah kalo tutorialnya seperti ini jadi lebih mudah di fahami Kang... langsung rektek ah :)

Balas

keren ya mas demonya :) tapi blog saya gak valid html 5 apa bisa ya mas, hmmm ^_^

Balas

main jquery dan toggle ya skrg ini mas adhy. keren :-bd

Balas

keren demonya jadi semua ilang ya tertutup atau dibungkus widget
kalau bisa mau saya coba tapi kalau nggak ya disimpan

Balas

Hehhhehe kayak balapan aja :D

Balas

validasi html5 ga ngaruh mbak... itu saya demonya pakai template blogger malah :D

Balas

script toggle-nya yang ini ya mas...
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Balas

Iya sis dicoba terus pada element lainnya :D

Balas

Kalau ada yang kurang mengerti jangan sungkan-sungkan tanyakan di sini, barangkali saya bisa jawabnya :D

Balas

Iya itu jika ingin menggunakan efek bounce, clip, dll kang... harus menggunakan jquery.ui

Balas

efek togel memang keren ya, bisa meminimalkan lokasi space hehe

Balas

Betul kang tinggal mengerti cara penggunaannya saja. :)

Balas

Mas Adhy, kira-kira nanti g pengaruh sama loading blognya y mas kalo terlalu banyak jquery?

Balas

Jika memang terlalu banyak pasti akan mempengaruhi loading blog juga mas. Jadi harus benar-benar memilih javascript yang benar2 dibutuhkan di blog. Jika memang harus mengunakan javascript coba simpan di atas kode </body> agar tidak terlalu berpengaruh pada loading blog saat blog pertama dibuka.

Balas

wah si akang maen togel wae yeuh ;D

Balas

Cara kerjanya sama seperti Accordion effect ya, keren ni.... solusi yang baik bagi yg pengen tampilan widgetnya lebih ramping :-d

Balas

Wah mantep nih Kang Adhy daerah sidebar blog bisa irit tempat tentunya
Yah Kang menarik saya ijin coba yah Kang? Terima kasih atas artikelnya :)

Balas

sepertinya widget efek toogle ini sangat cocok untuk widget pengikut atau follower. tapi sayang widget tersebut katanya menyebabkan eror pada valid html5 ya kang?

Balas

jadi lebih ringkas ya mas widget nya kalau ada efek toggle nya karena tidak memerlukan space yang besar di blog kita :)

Balas

Wkwkwkww sugan we dapet buntut jitu kang :ng

Balas

Iya hampir sama, cuman kalau accordion sidebar menyembunyikan beberapa widget di sidebar, kalau ini kita bisa memilih isi widget mana yang ingin disembunyikan :D

Balas

Silahkan dicoba kang Saud ;)

Balas

Iya mas bisa buat widget apa aja... sebenarnya bisa valid html5 untuk widget follower :D

Balas

Betul mbak, jadi ngirit tempat =D

Balas

Lumayan buat mempercepat suatu blog, terimakasih kang :D

Balas

belum kepikiran kesini jadi penasaran gimana kalau pake .toggleClass() ya...

Balas

sekalian mau nanyak/info kenapa tiap saya buka blog mas adhy dengan chrome kok tampil banyak sekali iklan ya terutama pada bagian kiri dan bagian footer

Balas

efek toggle ini apa bisa tanpa menggunakan klik dan bisa muncul gitu mas.

Balas

Iya mas biar lebih simple ;)

Balas

Itu biasanya dari installer suatu software yang menyertakan ekstensi untuk menampilkan iklan-iklannya mas, saya juga pernah menginstall software, dan karena ga teliti ekstensi atau addons penampil iklannya ikut terinstall dan efeknya ketika membuka website jadi tampak banyak iklan. Coba cek ekstensi Chrome-nya mas, jika ada yg mencurigakan coba disable atau hapus. :D

Balas

Sepertinya bisa sis, tergantung perintahnya. Kalau di sini kan perintahnya on click.

Balas

jadi perintahnya harus dengan hide dan show ya mas? saya masih urang mengerti mengenai javascript mas, minta sedikit pencerahannya mas :)

Balas

Jika memakai unik ID bawaan dr blogger dlm kasus ini yaitu ID widget, sewaktu-waktu kt mendelete widget tsb, maka jquery tetap ada!
Mending pakek variabel class yg dimasukan ke tagging widget.

Ceuk aing eta mah....hhhh

Balas

keknya ini untuk widget tertentu yg dipilih.. bukan otomatis????

Balas

kalau mau otomatis coba gunakan id sidebar, untuk mengisih id perintah script. tapi efeknya entah seperti apa ya?

Balas

wah kunjungan pertamaku kesini nih :)
salam kenal mas. blogwalking :)

Balas

#HTML6 h2{cursor:pointer} itu editnya dimana? maklum newbie :D

Balas

Untuk id nya sesuaikan dengan id widget dan tarus kode CSS itu di kelompok CSS di atas kode ]]></b:skin>

Balas

Salam kenal juga mas ;)

Balas

Iya bisa juga seperti itu kang... :D

Balas

kang kompi emnk jos bangt.. udh sya cobe diblog baru saya th'ks

Balas

Mantaplah pokonamah!!!

:-bd

Balas

Akang kalau ingin menambahkan efek toggle pada postingan gimana ya
saya coba beberapa kali tapi tetep aja nggak bisa maklum masih belajar kang =( =( =(

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×