Wednesday, May 11, 2011

Cara menyembunyikan chatbox ke kiri dan kanan

Kebutuhan akan buku tamu atau guest box atau chat box merupakan salah satu yang lumayan penting. Guest box merupakan salah satu alat komunikasi antara pemilik blog dan pengunjung. Maka keberadaan chatbox juga dapat memberi pelayanan tersendiri bagi pengunjung. Tapi apa jadinya jika blog kita memiliki template yang minimalis atau sudah terlalu penuh dengan widget yang kita pakai.



Mungkin ini bisa jadi solusinya. Yupz mengakalinya dengan di hidden atau di sembunyikan di sisi kanan atau kiri blog kita. Ok langsung saja ke bagaimana menggunakannya :


LEFT-Hidden Chatbox

 

RIGHT-Hidden Chatbox

 

Untuk cara pemasangannya, letakkan kode di atas di dalam tag . Bagi pengguna blogspot, tambahkan dahulu widget HTML/Javascript  kemdian paste kode di atas di dan simpan.

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/AVvXsEhlaGvPngQHbeMQqOcGCm4h3GX84-XjHuxzw8gwOBPEQJ29FAQECZ-AY8xd_EIN5zVbRDrUOZpQK2i7SPO2o_bckE-4oLc9kJvX_irJ9B00CAr8IisK140eRt5blynrSFPE0NJKJ-qotOg/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
Catatan :
Cara ini tiak hanya dapat di gunakan untuk chatbox atau pun shoutmix. Anda juga bisa meletakkan kode lainnya seperti embed MP3, video, atau gambar terserah keinginan kamu.
Cara ini tidak berpengaruh dengan kecepatan loading blog anda. Karena chatbox tetap akan di load normal bersama yg lainnya. 

Kalau mau contoh liat aja blog ane ini, ini dan ini 
silahkan berkarya dengankreasimu.. hehehheeh

 

No comments:

Post a Comment