Menyembunyikan Elemen Widget Dengan jQuery

Dari judul diatas, saya rasa kalian sudah faham denga apa yang akan kita bahas dipostingan kali ini. Trik ini saya posting karena adanya beberapa permintaan dari sahabat blogger saya :

kang sekalian nannya gmn cranya pas di klik tutorial koq headernya berubah ?????

Maz aziz blogx tmbh kren Aja oh ya maz,Q mau tnya maz ps diklik tutorialnya khan tmpl 3 klom header.Gmn ya maz bwtx cz di blogger tune Up krang jlaz dtGGu lo maz postinganx

berhasil!!!!!!!!!!!saya mau tanya gimana caranya multi kolom kita tidak menyatu dengan post blogger kita dtunggu kang postingannya

Sebelum menjawab pertanyaan sahabat blogger diatas, saya akan mencoba memberikan informasi bahwa trik ini adalah punya nya kang hendriono dari blogger tune up. tapi mungkin kode nya agak sedikit berbeda dengan yang kang hendriono terangkan.

Untuk contoh trik ini, kalian bisa mengKLIK menu TUTORIAL saya diatas, dan lihat widget 3 kolom dibawah header saya muncul.
Untuk membuatnya sebenarnya sangat simple, karena kalian hanya perlu mengotak-atik sedikit template kalian. yang pertama kalian butuhkan file Js yang mendukung trik ini. Untuk file jsnya sendiri kalian copy dibawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Untuk tahap lebih lengkapnya silahkan kalian baca aja dibawah ini........

1. Login ke blogger kalian
2. Pilih Rancangan ---> EDIT HTML (centang expand template widget)
3. INGAT : Biasakan back up template terlebih dahulu
4. sekarang kalian simpan kode berikut diatas kode ]]></b:skin>

#hide_top{
clear:both;
margin:0px 0 10px 0px;
padding:0px 0px 20px;
width:800px;
display:none
}
.hide_top_cat{
float:left;
margin-bottom:5px;
width:980px
}

Silahkan kalian ganti kode-kode berwarna diatas dan sesuaikan dengan template kalian.

5. Sekarang simpan kode berikut diatas kode </head>

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

Perhatian :
Jika dalam template kalian sudah ada kode diatas, maka jangan dipasang lagi, Cuekin aja kode diatas.

6. Sekarang simpan lagi kode dibawah ini tepat dibawah kode No.5

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#hide_top&#39;).hide();
$(&#39;a#hide_top-klik&#39;).click(function() {
$(&#39;#hide_top&#39;).toggle(400);
return false;
});
});
</script>

7. Simpan dulu template kalian dan silahkan beristirahat dulu sejenak....

Lanjut lagi ya ....

8. Sekarang kalian cari kode widget yang akan disembunyikan, untuk contoh kode widget 3 kolom saya (trik ini paling enak untuk widget dibawah header)

<div id='BawahKepala'>
<div id='BawahKepala-left'>
<b:section class='BawahKepala-div section' id='BawahKepala-1' preferred='yes'>
INI UNTUK KODE ARTIKEL ACAK
</div>
<div id='BawahKepala-mid'>
<b:section class='BawahKepala-div section' id='BawahKepala-2' preferred='yes'>
INI UNTUK KODE DONASI
</div>
<div id='BawahKepala-right'>
<b:section class='BawahKepala-div section' id='BawahKepala-3' preferred='yes'>
INI UNTUK KODE ARTIKEL TERBARU
</div>
</div>

8. Setelah kalian menemukan kode dalam template kalian, sekarang kalian sisipkan kode dibawah ini mengapit kode diatas

<div id='hide_top'>
<div class='hide_top_cat'>

KODE ELEMEN WIDGETnya DISINI

</div>
</div>

jadi hasilnya seperti ini :

<div id='hide_top'>
<div class='hide_top_cat'>

<div id='BawahKepala'>
<div id='BawahKepala-left'>
<b:section class='BawahKepala-div section' id='BawahKepala-1' preferred='yes'>
INI UNTUK KODE ARTIKEL ACAK
</div>
<div id='BawahKepala-mid'>
<b:section class='BawahKepala-div section' id='BawahKepala-2' preferred='yes'>
INI UNTUK KODE DONASI
</div>
<div id='BawahKepala-right'>
<b:section class='BawahKepala-div section' id='BawahKepala-3' preferred='yes'>
INI UNTUK KODE ARTIKEL TERBARU
</div>
</div>

</div>
</div>

Tambahan :
-- Kode diatas adalah kode di template saya, silahkan sesuaikan kodenya dengan template kalian.
-- Dalam trik ini, elemen yang disembunyikan tidak akan muncul di Elemen halaman, jadi klo kalian akan mengedit elemen widget nya, kalian hilangkan saja kode CSS diatas.

9. Simpan dulu lagi template kalian (dalam pengerjaan trik ini mesti pelan-pelan saja biar hasilnya memuaskan)

10. Setelah selesai dengan pekerjaan diatas, sekarang kita tinggal memanggilnya dengan link atau menu template kita. untuk contoh dalam menu saya adalah seperti ini:

<a href='#' id='hide_top-klik'>Tutorial</a>

11. Simpan dan SELESAI................

aLHAMduLillah... akhirnya beres juga. semoga membantu dan semoga bermanfaat.

Resensi ILMU :
kang Hendriono | http://modification-blog.blogspot.com/2010/04/tampilkan-dan-sembunyikan-gadget-dengan.html.