Cara untuk ADJUST jarak atau kedudukan ICON bagi HIDDEN SHOUTBOX...

Assalamualaikum...

Cara untuk ADJUST jarak atau kedudukan ICON/GAMBAR bagi HIDDEN SHOUTBOX...

Aku rasa ramai blogger yang dah buat hidden shoutbox kat blog masing-masing. Sememangnya hidden shoutbox ni menjimatkan ruang sebab hanya icon/gambar shoutbox tu je yang kita nampak sedangkan kotak shoutbox tu tersembunyi dan hanya akan keluar jika kita klik icon/gambar tersebut...

Namun begitu, ada juga icon/gambar shoutbox tu yang jauh kedudukannya dari kotak shoutbox. Dah macam bergaduh la pulak, kan. Yang icon/gambar dok kat sebelah sini, dan si kotak tu pulak dok kat sebelah sana. Sepatutnya kedudukan kedua-duanya kenalah rapat, barulah betul boleh jadi kawan baik.. hikk..

Secara ringkasnya, aku takde la nak bagi code penuh untuk hidden shoutbox tu sebab aku rasa semua code tu sama je kecuali url code untuk icon tu je yang berbeza mengikut gambar yang kita gunakan. Aku cuma nak bagi penerangan cara nak adjust jarak antara icon/gambar tu dengan kotak shoutbox tu je berdasarkan experimen yang telah aku buat... :P

Perhatikan angka yang aku gunakan untuk setiap bahagian code hidden shoutbox blog aku ni.. Sila zoom-in untuk lagi jelas...

-1-

-2-

-3-

Nampak tak angka yang dalam kurungan tu..? Angka ni korang perlu ubah setiap kali korang tukar icon/gambar kat sebelah kotak shoutbox tu jika jaraknya tidak fleksibel. Akan TETAPI, angka-angka tersebut PERLULAH SAMA ANTARA KETIGA-TIGANYA SEBAB jika salah satu daripada angka tu tak sama, maka kedudukan atau jarak icon atau gambar yang digunakan TETAP tidak akan serasi dengan kotak shoutbox. Sebab tu kadang-kadang ada icon/gambar yang terpelanting jauh keluar ke kiri dan ada juga icon/gambar yang seakan-akan tersepit kat tepi skrin.. Kalau icon/gambar tu gambar kucing, tak ke kesian kat dia dok tersepit kat situ... hikkk...

Harap korang faham dengan apa yang aku cuba terangkan ni ya.. Jangan takut untuk mencuba menukar angka-angka tu sebab code ni kita letak kat sidebar je dan bukannya kat Edit HTML.. Tukar dan save.. Jika tak sesuai, tukar dan save lagi.. Don't give-up..

Ini contoh hidden shoutbox untuk blog aku. Icon/gambar tampak serasi dan berdekatan dengan kotak shoutbox tu.. Dan bila klik close, icon/gambar tu betul-betul berada kat tepi skrin dan tidak termasuk ke dalam ataupun nampak separuh je.. 

p/s: Selamat mencuba ya.. :)
**Kalau nak code untuk hidden shoutbox ni, boleh copy paste dari sini.. scroll sampai bawah... :)