cara Mudah membuat chat box melayang di blog

Artikel Lain Yang Menarik Untuk diBaca Juga

 

selamat siang...

saya kembali lagi, tentunya untuk berbagi artikel yang sangat bermamfaat bagi kita semuah. tak lupa saya akau memberikan tutorial gambarnya. ok, mari kita mulai.

1. sebelum membuat Cbox. anda harus melakukan pendaftaran di Cbox.

    bagi yang belum mendaftar silahkan klik di sini.

2. masuk ke akun anda saat sudah mendaftar di CBox. lalu buat Cbox anda.

3.Setelah membuat Cbox, kalain akan di berikan Html Scripnya.

4.tambah tab d browser anda untuk masuk ke blog yang akan di buatkan Chat Box. contoh.

    

5. masuk ke halam dasboar anda di blogger.

6. pilih tata letak atau lay out > lalu tambahkan ganget > (contoh). 

7. saat di menu Gandget pilih> HTML.

8. setelah itu akan tampil tampilan HTML/JavaScrip.

9. masukkan Kode dibawah ini.

<style type="text/css">#gb{position:fixed;top:50px;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/AVvXsEi8qlt6tneVAtNqGQH1nz8XrgLfzotlqLUp4WHxvgtdnmMXtdZICqWpSDGS8Rf_53NxeKgA5-f1VOBRUe8Mgm8-9F0d9oYwERC2iR8nUMxkeRngkaEDL8ODJReelvwlj0q1jJblp9YwrfM/s1600/bukutamu.png') no-repeat;}.gbcontent{float:left;border:2px solid #A5BD51;background:#F5F5F5;padding:10px;}</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">

Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

<div style="text-align:right"><a href="https://netbooklamabagus.blogspot.com/ ">[get this widget]</a>><a href="javascript:showHideGB()">[Tutup]</a></div></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script></div></div>

10. yang berwarna Biru, silahkan ganti dengan kode di bawah ini :

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www2.cbox.ws/box/?boxid=2344823&amp;boxtag=e2bqg8&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-2344823" style="border:#48515A 1px solid;" id="cboxmain2-2344823"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www2.cbox.ws/box/?boxid=2344823&amp;boxtag=e2bqg8&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-2344823" style="border:#48515A 1px solid;border-top:0px" id="cboxform2-2344823"></iframe></div>

</div>

<!-- END CBOX -->

11. klik simpan. tara. Chat BOx melayang kamu sudah jadi. untuk melihatnya silahkan kunjungi blog kamu

Terima kasih Telah membaca Blog saya, semoga bermanfaat bagi pembaca yang budiman