Chat Box Melayang Dengan Tombol Close

Ketagihan blogwalking.

Saya pernah menyarankan sarana Chat box sebaiknya di buat dalam satu halaman khusus guna meningkatkan jumlah page view, tetapi bila Agan tetap ingin membuatnya dengan style bisa tampil di seluruh halaman ya sah-sah saja.

Dan jika sebagian dari Agan masih ada yang belum tahu cara membuatnya, maka berikut ini tutorial membuat Chat Box Melayang Dengan Tombol Close yang bisa tampil di seluruh halaman.

1. Masuk ke template. Klik Edit.
__Pilih lanjutkan. Centang Expand Template Widget.

2. Carilah kode ]]></b:skin> .
__Pakai CTRL F untuk menemukannya.

3. Lalu tambahkan kode berikut di bawah kode tadi.

<style type='text/css'>
#gb{
position:fixed;
left:350px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_bottom:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:right;
border:2px solid  #4173af;
background:#ffffff;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:20px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:20px;
padding:10px;
}

</style>
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById(&quot;gb&quot;);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(&quot;gb&quot;);
var dx = Math.abs(x0-xf) &gt; 25 ? 35 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

4. Perhatikan, tulisan top mengartikan tombol buka nantinya berada di atas. Sementara tulisan right artinya ia berada di atas sisi kanan. Jika ingin meletakkan nya di bawah sisi kiri, maka ganti tulisan top dengan bottom, dan ganti tulisan right dengan left.

5. Simpan tempate. Selesai.

6. Sekarang, masuk ke Tata Letak.
__Klik Tambah Gadget di mana saja.

7. Pilih "HTML/Javascript". Dan masukkan kode berikut di dalamnya.

<div id="gb"> <div class="gbcontent"> <!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe allowtransparency="yes" frameborder="0" height="250" id="cboxmain7-437274" marginheight="2" marginwidth="2" name="cboxmain7-437274" scrolling="auto" src="http://www7.cbox.ws/box/?boxid=437274&amp;boxtag=qjx72p&amp;sec=main" style="border: #000000 1px solid;" width="400"></iframe></div>
<div>
<iframe allowtransparency="yes" frameborder="0" height="65" id="cboxform7-437274" marginheight="2" marginwidth="2" name="cboxform7-437274" scrolling="no" src="http://www7.cbox.ws/box/?boxid=437274&amp;boxtag=qjx72p&amp;sec=form" style="border-top: 0px; border: #000000 1px solid;" width="400"></iframe></div> </div> <p><span style='float:right;font:italic 10px Viner Hand ITC, Sans-Serif;'><a href='http://ketagihanbaca.blogspot.com/' target='_blank'>Selamat Datang Teman</a></span></p> <div style='clear:both;'/> </div> <!-- END CBOX --> <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a> </center></div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.top = (-400-gb.offsetWidth).toString() + "px"; </script> <div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="URL gambar" border="0" /></a></div>

8. Perhatikan, ganti kode berwarna biru dengan kode ChatBox milik Agan.

9. Ganti juga bacaan Selamat Datang Teman dengan teks sambutan Agan.

10. Ganti bacaan berwarna URL gambar dengan alamat gambar Agan.
__Jika tidak punya di sini saya sediakan 2 gambar.

Gambar 1. 

alamatnya : 

http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png

Gambar 2.

alamatnya :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUUemzrECtpv7UktFkIikIRRub7oUmTjJi2-aSWnrz84gApexcJB6RNfGgcsa_hsyhV-eRHD3SGLdbE_WR5mBOW6iJ13qJk_WWpofPygpnsltOTT1fKBwKuDdkd3S1rhN1wn3KGswhDU/s1600/bukutamu.bmp

Yang gambar no.1 itu biasa di pakai kebanyakan blogger, yang no.2 itu iseng-iseng bikinan saya. Dan yang no. 3 itu kalau Agan mau bikin sendiri.

11. Klik Simpan. Lihat hasilnya.

Selamat mencoba.