Hide Footer Widget Dengan Slide Toggle

Hide Footer Widget Dengan Slide Toggle - Mungkin ini bisa dikatakan sebagai kelanjutan efek toggle animasi jquery ui dengan konsep blog gaya metro ui style, namun ini skaligus sebagai jawaban dari sahabat Ubay Nyzhar yang nanyain cara membuat footer seperti blog ini. Fungsi dari slide toggle ini adalah untuk menyembunyikan element agar halaman lebih ringkas dengan bantuan Jquery. Untuk cara pemasangan di blog sebagai berikut :

Masukkan Jquery sebelum kode </head>

JQUERY

<script type='text/javascript' src='jquery-1.10.2.min.js'></script>

Jika sebelumnya sudah memasang jquery berapapun versinya bisa melewati langkah ini.

Kemudian tambahkan sedikit CSS berikut ini sebelum kode ]]></b:skin>

CSS

#show-button{padding:0;background:#555;color:#3498db;cursor:pointer;display:inline-block}
#show-widget{display:none;text-align:left;background:#555;color:#fff;padding:0}

Cari lagi element footer widgetnya misalkan #footer-widgets atau #footer-wrapper, karena setiap template bisa saja berbeda maka cari kode yang mirip2 saja. Lalu letakkan kode dibawah ini tepat dibawahnya.

JS

<script type='text/javascript'>$(document).ready(function(){$(&quot;#show-button&quot;).click(function(){$(&quot;#show-widget&quot;).slideToggle()})});</script>

HTML

<div id='show-button'>TOMBOL SHOW/HIDE</div>
<div id='show-widget'> WIDGET YANG AKAN DISEMBUNYIKAN</div>

PENTING...!!!

1. Tombol show/hide bisa diganti dengan icon Font awesome baca disini
2. Widget yang akan disembunyikan pada area footer biasanya IDnya seperti ini :

<b:widget id='HTML1' locked='false' title='Support' type='HTML'>

kemudian tutup dengan kode </div> pada akhir widget.

Demikian sedikit tips blog kali ini, semoga bisa membantu khususnya buat mas Ubay Nyzhar

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku