CARA MEMBUAT (chat box) ATAU BUKU TAMU YANG BISA DI BUKA TUTUP

  kali ini saya akan menulis caranya membuat kotak chat (chat box) yang bisa di buka tutup (spoiler) yang kaya di blog ini. Widget ini nantinya akan tampil hanya tombolnya saja di sisi sebelah kanan layar.

Kotak buku tamu kamu nantinya akan tetap seperti tampilan aslinya hanyasaja tersembunyi di balik layar, dan akan di tampilkan kalau tombol atau gambar buku tamunya di klik.


Caran membuatya :
 

• Loggin ke Blogger
• Pilih Rancangan, tambah Gadget
• Pilih HTML/JavaScript
• Masukan kode script berikut ini:

<style type="text/css">

#gb{

position:fixed;

top:100px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-G0VW_C7sagOJFa6C5wcAAgkSKGgPn_TrL_umPUbjAu894csIysjKC5jlbseHKCCZ2lfePH9SKmnao_Etc83HTAvHmHEB8FQ9DAzm5dr44sOWbKMa3BQxHK9-W8uaOM04_S4gNUby0Igi/') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:2px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

TARUH KODE WIDGET SHOUTOXMU DI SINI

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>


Gambar image buku tamu (background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-G0VW_C7sagOJFa6C5wcAAgkSKGgPn_TrL_umPUbjAu894csIysjKC5jlbseHKCCZ2lfePH9SKmnao_Etc83HTAvHmHEB8FQ9DAzm5dr44sOWbKMa3BQxHK9-W8uaOM04_S4gNUby0Igi/) bisa di ganti sesuka kamu, masukan saja url gambarnya

lihat contoh image nya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFDnV_p_pFhcLECKW1_ne_r42Bj85yplXzq0_LqdBcAA9Gy656lNM-eBA8l0YkmJhkXP7iCw_l2TLQrS71Omdv8kS-ald_f2PmBk8qbMDsEtkOIc7ZdU-1hYnlH4sLNRz-XOzWhuUtQyo/s1600/Buku+Tamu.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi789tG8pmvECQkeyvnJtaCO2O1XewY7OjfdfqJVQVrhEXI-pCGjJioL5Z1yIWSSUNOuaA8nHW0ChHwz1zQnnH2SwW4CT_gQ51EeoMj_Hyid4oaHU7Dp7wYafw5wxAkgIukCHg22hRcMXM/s1600/Buku+tamu2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6nryzi-8_Gs-HALsrJSrlnHgk7EFn2zXbHYoFLAXa0O_xx7pNH2mbGA_JbBKk9xDqT6sNiA_jRuKW7CukxErv-OeZ-LiWvAPyywqf8JBd2szIpuZiVX6VOKt60yji_d2_YEHZbfvc2Fo/s1600/buku+tamu3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2tgsxn_aMtlSqYixaQ4m8EW4WD7FKnSpYlWPVuN8b838xIZsiquKZKFOT-9epgSRBGp3O0KCtSaT5Vp8P0skGHa_1FNl_kHOHyXJw0LjL1gl5YKufOjMdNzh0yiSzuPgicuUEaF5HtE/s1600/buku+tamu4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHoWuURXfvaiNVxdexA9S3uY5NkYQPMTfIUgGeN075CQEwTJlrKm8XqSIu-_NeOSyzpYkU9qbukVY86gMlLGf_PJIwuEN32o82oSg7P8q5PQVorL_tx50I7zL7sA7xBrGUbCbm2gqRx0/s1600/buku+tamu5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieQW9j1REnZsrTvZZVQbIXIYjx4V2B57XI8ovd7deHQSNyHRLg9gJSGqVPSWlCG-XMQsuOnPKkKv5HYe6l-QXU5LGSp3zlATQp6GiJnlan0xksKT-90l1wtRjc-XIjzatkEoIqjz21rJA/s1600/buku+tamu6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmdlNwwKLAqVOH0DKRzVqyJJf2XP7I3MwcdhzMKoDGfjB_SMYKqolC96fUjFkA9nNaVaiQJs0elTmivIzpTZ8NYkS7I8EolXAtb1zbRGzUCT6mAJI7I5LkeRCLWYcsEUzxvkqfka6r8M/s1600/buku+tamu7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2K9M6VkzdCscQqYkmR5nhVTHpPrmovBK4Jou99AQU6Wr9wVR_biFvAp48_Xztq5Y1Q-T380I_odpU3thaq7deoxESaRdbnZyw_D-8JIfLF1i56G2SxGOV3XdHLkXEaA9cSo5BOtl9N4g/s1600/buku+tamu1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmrTJ3F_0NNNU0qfwytyi3NdCtuR7pen2Vf_zhBgIfUVzdZ7H3I8mKqyAYYEl5b2jBerUzgIEMFlsqXnOMgusxAIzEwR_ivkj2IMRgm-slAel_v2EbuuBQsUyqkBgkCMMaUcCxBYLkvIE/s1600/Buku+Tamu+8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjwEOjwAUfCA8CZXad3LCrYN5P1esBMapAnyVYo9qQRMx5uPLu-lMJt9YT_z1one4n8nBYT67e0rkxC4B-BFuHn5NNaThbLSbhD33eY4MDnEDzg3C9KubGJnKf_7RwK_Rzl2n4hnXtsiM/s1600/gustbook02.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3cQA2hE-faZrluFIeSN0RY1YgljOspOlWDNKop0XuJ-FH7kKzmTXEZbTny1kvCRsafeWceVWXj2wETbPOaK5UqKtDxC5apPKQWnOw7QaKHDTptvymitB26yFP267uEj6DGo5znYphOvk/s1600/buku+tamu9.png

Kita taruh kode yang sudah peroleh dari shoutmix atau cbox ditempatnya (TARUH KODE WIDGET SHOUTOXMU DI SINI). Dan Simpan jika sudah selesai.

---

Selamat mencoba, semoga berhasil.

Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe