Cara Membuat Sidebar Toggle Hide and Show

Cara Membuat Sidebar Toggle Hide and Show - Sebelumnya apakah anda telah mengetahui template Johny Wuss ? Ya pada template tersebut terdapat sidebar toggle hide and show, dimana jika kita klik salah satu widget dalam sidebar tersebut akan muncul dan yang lainnya tertutup, dan jika klik sidebar yang lain maka sidebar yang kita klik akan muncul dan yang lainnya tertutup. Seperti ini contohnya :

Screenshoot sidebar toggle hide and show

Screenshoot sidebar toggle hide and show

Sidebar toggle hide and show ini sangat berguna untuk blog kita, selain akan terlihat cantik, juga akan menghemat penggunaan space pada halaman blog kita sehingga pengunjung akan terasa nyaman.

Oke, kita langsung aja gan baca bismillah dulu ya biar berhasil hehe
1. Login ke akun blogger anda
2. Masuk ke dashboard blog anda
3. Pilih template, kemudian pilih edit HTML
4. Carilah kode </body>, supaya mudah tekan ctrl+f saja untuk melakukan pencarian
5. Jika sudah ketemu, copy kan kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('#sidebar .widget-content').hide(); $('#sidebar h2:first').addClass('active').next().slideDown('slow'); $('#sidebar h2').css('cursor', 'pointer').click(function() { if($(this).next().is(':hidden')) { $('#sidebar h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); //]]> </script>

6. Setelah itu cari code .sidebar h2, lalu ganti kode terebut dengan kode dibawah ini

.sidebar h2{background-color:#3366cc;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWY87VRaWDeYvn4fcSdyZGuAfthjHpPWEHH-LydBXIjtUWrTo2J3811npFs0Djq_I21AywCyVZs-zSbMF_imHI3m6zhF8Qv0GN1lBVvl7k4RgopEhKcu_2VRM5X62m-CXFQRVJ4kc94Ix5/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;font:bold 12px Federant;color:#eee;margin:0;padding:7px 0 7px 10px;text-shadow:0 1px 1px #000} #sidebar h2.active{background:#3300cc;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-lATBAnwE62zi5_2J01TJKBXFXGZkHV9l1App0P9U3G4t6q6yF3yGJ1oZVXNnf134vFY5wq5tr6HGWOZYbVeypQlaui-vplYpZ4QOAIX2nOdnfBrSy25iLXX4URFCHKalHYvZe_9mkOm-/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center}

7. Taraaaa lihatlah hasilnya :)

Sekian postingan Iqbal Blog kali ini menganai Cara Membuat Sidebar Toggle Hide and Show, semoga bermanfaat bagi anda dan blog anda.
Goodluck ^_^

Posted by Unknown on Selasa, 17 Desember 2013 - Rating: 4.5

Title : Cara Membuat Sidebar Toggle Hide and Show
Description : Cara Membuat Sidebar Toggle Hide and Show - Sebelumnya apakah anda telah mengetahui template Johny Wuss ? Ya pada template tersebut ter...

Share to

Facebook Google+ Twitter