Tips Tampilkan / Sembunyikan Widget Tutup [tetap Lengkap]

Dalam postingan ini saya akan memberi trik cara membuat show / hide alias expand / collapse widget lebih terperinci. nih saya siapin beserta screenshut dan sekalian repairing beberapa bugs.

Sebelum memulai ulang, saya akan memberi pendapat apa keuntungan tips mengubah widget dengan javascript ini, yaitu loading halaman blog anda akan lebih cepat, karena tidak akan meload keseluruhan konten widget pada blog anda, tetapi jika anda membuka widget pertama kalinya, widget ini tidak langsung terbuka karena akan memanggil / meload kontennya [but keep enjoy, gk lama koq].

Silakan klik salah satu tombol berikut:

Isikan kode HTML / Javascript di sini <b:includable id='main'> <h2 class='title'> <script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">'); /* ]]> */ </script> <data:title/> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/a>'); /* ]]> */ </script> </h2> <script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> <data:content/> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> <b:include name='quickedit'/> </b:includable>

Isikan kode HTML / Javascript di sini <b:includable id='main'> <h2 class='title'> <script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">[+/-]<\/a>'); /* ]]> */ </script> <data:title/> </h2> <script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script> <data:content/> <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> <b:include name='quickedit'/> </b:includable>

Apa bedanya antara yang pertama dan kedua?

• yang pertama, jika di klik judul widgetnya, maka kontennya akan terbuka.
• sedangkan yang kedua, judulnya tidak bisa di klik, namun sebelum judul [sisi kiri widget] akan ada tanda [+/-] yang jika diklik maka konten widget akan muncul.

• Lihat gambar berikut, akan muncul setelah anda klik tombol diatas :

• Pada lingkaran biru, pastikan blog mana yang akan anda masukkan modifikasi widget ini, jangan sampe salah alamat. Kemudian pada lingkaran merah gantlah dengan judul sesuai keinginan anda, semisal shoutmix here atau Friend Link.
• Klik ADD WIDGET, anda akan segera diarahkan pada halaman layout blog anda.
• Kemudian klik edit pada element widget yang baru anda buat, lihat gambar:

• Kemudian muncul jendela windows baru, gantikan tulisan "Isikan kode HTML / Javascript di sini" dengan kode html Anda, misal kode html shoutmix atau kode html apa aja widget anda sebelumnya.

Selesai ! gak susah kan? gak perlu mikirin kodenya segala.

mudah-mudahan sudah pada gak bingung lagi. Jika masih ada kesulitan atau mungkin ada bugs pada tips ini, saya persilahkan komennya. Happy blogging!