0

Hidden Chatbox

Sabtu, 19 Maret 2011
Share this Article on :

Pada malam hari ini saya akan share Hidden chatbox. Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang bisa bersembunyi. Sembunyi disini pastinya bukan berarti hilang, kabur, atau lari dari kejaran polisi (emangnya Nooordin M. Top apa?!), tapi sengaja kita sembunyikan untuk menghemat ruang blog. Sudah hampir sebulan saya tidak memasang widget shoutmix, itu karena banyak widget lain yang lebih penting darinya untuk ditampilkan. Tapi setelah belajar dan paham, saya menggunakan trik Hidden Chatbox ini untuk memasang shoutmix sehingga blog saya tidak terlihat sesak lagi(walau sebenarnya masih sesak banget, hehehehe....). Anda juga mau memasang shoutmix dengan trik ini? Baca baik-baik ya...

Trik Hidden Chatbox ini terbagi menjadi 2 pilihan, yaitu LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox. Kalau yang saya pakai di blog ini adalah RIGHT-Hidden Chatbox. Berikut kodenya:

LEFT-HIDDEN CHATBOX

RIGHT-HIDDEN CHATBOX
Keterangan:

#hcr {
position:fixed;
top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}



.hcrtab {
height:100px; /* tinggi tab pembuka hidden chatbox */
width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FZtTipi88e8gdDFhOLhEewRhf31pRMC6mu20BZmmfjstK9R6CjnTBlwMUtfJT8v7_w4Sn4hoAt0GPgkiKDQJa4MwiXsK6PmnyezSvxydp740OihNDquj2ybe1OF9mWZTQiAlJswvu8g/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}


.hcrcontent {
float:left;
border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
padding:10px;
}



Berikut beberapa gambar tab pembuka hidden chatbox dan kode warna html untuk border yang serasi:

cbred-LEFTcbred
Kode warna border: #790909

cbyellow-LEFTcbyellow
Kode warna border: #aca500

cbgreen-LEFTcbgreen
Kode warna border: #008232

cbblue-LEFTcbblue
Kode warna border: #003e82

cbblue-2-LEFTcbblue-2
Kode warna border: #0079a0


Nha, sekarang kit pasang kode itu di blog. Udah tahu caranya kan? Itu, pilih Layout > Page Elements > HTML/Javascript, lalu masukkan kode Hidden Chatbox disana.

Klik disini untuk melihat demo LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox.

Note: Trik hidden ini bisa juga anda gunakan untuk memasang widget lain, jadi trik ini tidak khusus untuk memasang shoutmix. Anda tinggal berkreasi dengan kode-kode yang bisa bikin kepala jadi botak itu, hahahahahaha...!

Selamat mencoba....


Artikel Terkait:

0 komentar:

Posting Komentar