Thursday, January 7, 2016

Cara Membuat CHATBOX auto hide pada blog Tanpa Edit HTML

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>