Banyak dari Sobat Blogger yang posting mengenai Cara membuat ChatBox, kali ini akan saya terangkan kembali cara gampang menerapkan ChatBox pada blog. Silahkan sobat kunjungi URL penyedia WEB Untuk mendapatkan kode HTML ChatBox.
Penyedia WEB tersebut diantaranya adalah :
CBOX >>> Sobat Bisa LOGIN disini
SHOUTBOX >>> Sobat Bisa LOGIN disini
Sobat bisa kunjungi 2 WEB tersebut dan pilih mana yang akan sobat gunakan, untuk WEB yang lain sobat bisa cari sendiri di GOOGLE, tentunya sobat harus create account dahulu untuk bisa LOGIN dan mendapatkan CODE CHATBOX tsb. Yang akan saya jelaskan disini adalah SHOUTBOX seperti yang saya terapkan pada blog saya. Kenapa saya pake SHOUTBOX, karena ini free sedangkan CBOX free untuk 1 s/d 2 minggu setelah itu sobat tidak bisa menggunakannya kembali tanpa Upgrade.
Selanjutnya sobat ikuti langkah saya dibawah ini untuk mendapatkan Code HTML tersebut.
1. Sobat harus create account SHOUTBOX dan LOGIN,
2. setelah sobat login pada halaman pertama SHOUTBOX akan tampil pilihan Theme, Pilih dan simpan
3. Selanjutnya sobat akan mendapat kan CODE HTML
Sekarang Sobat sudah punya Code HTML SHOTBOX, lalu bagaimana cara menerapkannya di Blog.
Sobat bisa Ikuti langkah dibawah ini:
1. LOGIN ke Blog Sobat
2. Pilih Tata Letak
3. Pilih Tambahkan Gadget dan klik HTML/JavaScript
4. Copas Code dibawah ini dan Simpan
Warna BIRU : Untuk merubah tulisan NGRUMPI YUK, Sobat bisa ganti URL image tersebut dengan URL image sobat.
Warna MERAH Silahkan Sobat ganti dengan Code HTML ShoutBox Sobat
Selamat mencoba
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1075.photobucket.com/albums/w433/nanogunheryanto/15a1b837-3671-4a11-8fe1-2254f8d530f0_zpsp7mk2uci.png') no-repeat;}
.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
COPAS CODE HTML SOBAT DISINI
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://nanogunheryanto.blogspot.co.id/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</div>