Home > blog > Tutorial > widget > Cara Membuat Chat Box Melayang Buka Tutup

Cara Membuat Chat Box Melayang Buka Tutup

blog, Tutorial, widget 12 comments

Assalamualaikum..

Chat box / Shout box / apapun itu jenis dan sebutannya merupakan salah satu elemen penting untuk menjalin persahabatan para blogger. dengan fasilitas ini dapat memudahkan kita dalam meninggalkan jejak pada saat blogwalking atau keperluan lainnya. Nah untuk memperindah chat box yang kita miliki, kita bisa membuatnya dalam bentuk Chat box melayang buka tutup. Jadi pengunjung bisa menampilkan / menutupnya sesuai dengan keperluan.

chatbox melayang

Caranya :

Masuk ke dashboard
Klik design
Pada page elements klik add a gadget
Pilih HTML/Javascript
Pada konten masukkan kode 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/AVvXsEgD_lEmcXQMLcyAuKyeg4YU3ZCe5xeqbpEKzeugJNEYykiag_EiGLCL3Yuglzk0kaHvI-7seHh1W0Ye0huU4R2LaDNMzqnZlolxOvabmOd6IZrsMr7r0TsoGolRAgm6pLamhRjbFUvH1bMD/') 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">
 Letakkan kode Chat box disini  </div>
</div>
<script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Ganti "Letakkan kode Chat box disini" dengan kode Chat box teman
Ganti URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD_lEmcXQMLcyAuKyeg4YU3ZCe5xeqbpEKzeugJNEYykiag_EiGLCL3Yuglzk0kaHvI-7seHh1W0Ye0huU4R2LaDNMzqnZlolxOvabmOd6IZrsMr7r0TsoGolRAgm6pLamhRjbFUvH1bMD/ dengan URL gambar tab yang teman inginkan, namun jika teman merasa gambar tab itu sudah bagus, silakan gunakan saja :D
Klik save
Selesai..

Selamat "Chat - Chat"an.. semoga badan anda nggak berwarna - warni :D (nggak nyambung)

Regards,

Berlangganan Artikel Referensi Kita

Related Post:

blog

widget

Tutorial

+ comments +12comments

22/5/12 07:01

Nice posting brother,,,,,

31/5/12 20:31

ada yang lerbih keren gak gan??

Terimakasih Dari JAlz atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

16/9/12 22:12

wow aku suka artikelnya mas, dan sangat memabntu aku dalam manage blogspot gue,thanks

Terimakasih film horor atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

Mohammad Irfan Basuki

17/9/12 05:47

sip sob.. makasih atas kunjungannya :)

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

29/9/12 00:14

thanks friend..

Terimakasih LINE atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

8/11/12 08:44

terimakasih y gan,,,,

Terimakasih Kaum Outhing atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

12/11/12 20:52

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

Terimakasih Uem Cuters atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

21/12/12 09:17

berhasil gan..trmkasih..

8/3/13 02:16

Thankss gan

Terimakasih cheaterindo atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

Anonymous

9/4/13 21:12

thank's

Terimakasih Anonymous atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

8/5/13 00:46

Nice post

Ali Achmad Fargha

8/11/13 07:20

kodenya yg mana gan? aku bingung.. mohon pencerahannya

Terimakasih Ali Achmad Fargha atas Komentarnya di Cara Membuat Chat Box Melayang Buka Tutup

Post a Comment