Cara Membuat Chat Box Melayang Buka Tutup

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.

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,

Irfan

Berlangganan Artikel Referensi Kita

Tweet

Masukkan alamat email Anda:

Related Post: