(Tutorial) Butang Papar/Sembunyi Shoutbox

Assalamualaikum.

Tutorial ni untuk hide shoutbox korang. Kalau klik butang, baru shoutbox keluar. Menjimatkan ruang la konon-konon. Tapi, banyak juga blogger yang ambik kesempatan dengan widget bentuk ni. Asal tekan je, keluar sekali iklan. Kalau satu iklan je keluar kira takpe la, tapi kalau sampai lima? Sampai penuh tab browser? Melampau tu. Jangan la desperate sangat nak kaut untung. Tapi, aku tak buat la macam tu, siap susun cantik-cantik dah iklan 20 sen kat atas tu. lalalala~

Ok. Butang papar/sembunyi shoutbox tu seperti screenshot di atas yang butang KLIK SINI tu. Peringatan, widget yang ada tulis ratings tu bukan tempat untuk shout. Itu kotak untuk korang buat review untuk blog ni. huhu.

Bila korang tekan butang KLIK SINI tu, shoutbox korang akan terpapar macam kat bawah ni. Kalau klik lagi sekali, shoutbox tu sembunyi. Kalau tekan lagi, dia keluar dan begitu la seterusnya, sebagaimana aku namakan tajuk entri ni Butang papar/sembunyi shoutbox. hahahaha. Nak demo, widget shoutbox kat sebelah ni je.

Senang je tutorial ni, hanya perlu ikut langkah-langkah berikut. lalala~

1. Mula-mula sekali pergi ke Design > Layout

2. Kemudian, klik pada Add a Widget > pilih HTML/JavaScript

3. Coding HTML kat bawah ni korang Copy, lepas tu Paste dalam content Configure HTML/JavaScript tu.

4. Coding HTML untuk shoutbox korang paste kat tempat yang aku dah indicate kat bawah ni. Di bahagian "PASTE CODING HTML UNTUK SHOUTBOX DI SINI"

5. Kemudian Save. Siap!

6. Kalau nak tukar ayat KLIK SINI tu boleh edit pada value="KLIK SINI" atau kalau nak tukar lebar butang tu, boleh tukar pada width: 100px. Dua-dua aku dah kasi bold kat bawah.

<div style="margin-top: 2px; margin-bottom: 2px" align="center"><div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 100px; " value="KLIK SINI" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; }" type="button"/><br /> </div><div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2"><div style="display: none;"><br />

PASTE CODING HTML UNTUK SHOUTBOX DI SINI

</div></div></div>

Selamat mencuba.