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:
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;
}
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 */
}
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;
}
Kode warna border: #790909
Kode warna border: #aca500
Kode warna border: #008232
Kode warna border: #003e82
Kode warna border: #0079a0
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