SEMBUNYIKAN WIDGET FOOTER DENGAN EFEK TOGGLE JQUERY

Selamat malam sobat-sobat semua...!!!
Artikel ini saya adopsi dari artikel yang dipublish oleh mas samsury
 yang beberapa hari yang lalu saya tanyakan ke mas samsury tentang bagaimana membuat widget pada footer blog bisa tersembunyi dan terbuka dengan eek toggle jquery, hampir sama dengan efek accordion yang biasa digunakan pada sidebar dan daftar isi blog jaman sekarang ini...

Nah, langsung saja ke TKP saudara-saudara blogger sekalian :)

1. Login blog kalian pastinya
2. masuk menu template >> edit HTML
3. cari kode </head> dan paste kode berikut tepat diatasnya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

NB : bagi yang sudah pernah install jquery silahkan lewati langkah ini 

4. paste kode CSS berikut tepat di atas kode ]]></b:skin>

#show-button{width:100%;cursor:pointer;display:inline-block;padding:1px;} #show-widget{display:none;text-align:left;color:#fff;}

NB : sahabat bisa modifikasi sendiri kode CSS tersebut sesuai selera, CSS #show-button adalah untuk tombolnya, dan #show-widget adalah untuk widget pada footernya

5. cari kode footer-widgets atau footer-wrapper atau kode yang menandakan pemanggilan footer blog, lalu paste kode berikut tepat di bawahnya 

<script type='text/javascript'>$(document).ready(function(){$("#show-button").click(function(){$("#show-widget").slideToggle()})});</script><br /> <div id='show-button'> <center> <i class='fa fa-th-large fa-3x' title='Tampilkan footer'/></center> </div> <div id='show-widget'>

NB :

- kode <i class="fa fa-th-large fa-3x" title="Tampilkan footer"></i> adalah tombol yang akan ditampilkan, bisa berupa gambar

- kode <center> ..... </center> adalah kode untuk meletakkan tombol tepat di tengah, kalau mau diletakkan di pinggir bisa dihapus saja

6. selanjutnya cari kode penutup footer tersebut, bisa berupa </div> atau terkadang berupa </footer> lalu taruh kode </div> tepat di atasnya untuk menutup tag <div id='show-button'> tadi

7. simpan dan silahkan lihat hasilnya... Hasilnya kurang lebih akan sama dengan footer saya...

NB : kalau mau menggunakan tombol seperti punya saya tersebut silahkan paste kode berikut terlebih dulu di atas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

untuk jenis-jenis atau macam-macam iconnya kalian bisa lihat di fontawesome.io

TERIMA KASIH...!!!

SUMBER : http://samsury-sites.blogspot.com/