Membuat Kotak Chatting Blog Tersembunyi

Setelah saya blogwalking di tempat blog teman saya sempat tertarik dengan kotak chatting [shoutmix atau Oggix] tersembunyi tampilannya. Kotak Chatting tersebut muncul pelan-pelan setelah di klik. Saya rasa anda juga bakalan tertarik kalau melihatnya. Bagaimana apa anda penasaran? Ayo langsung kita praktikkan saja langkah di bawah ini agar bisa membuat kotak chatting di blogmu tersembunyi agar tampilannya lebih menarik.



1. Login di blogger dengan ID anda.
2. Klik menu Layout.
3. Klik Page Elements.
4. Klik Add a Page Element.
5. Klik ADD TO BLOG pada menu HTML.
6. Lalu Copy kode berikut :

<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/AVvXsEjd-4clig7t9_gtcF47hKD1S4wNisF_sAy3qHy_m1W-Wyc7Yk4nF8plIGFBspjWvoQu-xo_k86aFh50qnceJ8k5Ql2n7r12sp7hOg_nJ3PyikLRWy9LxSOVaaBo3WObWoUM3fICf_hTP0ct/') 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">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau seperti ini?<br/>
Click aja disini--->
<a href="http://dunia-infoku.blogspot.com/2010/01/membuat-kotak-chatting-blog-tersembunyi.html">
Kumpulan Blog Tutorials


</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

7. Paste kode di atas, jangan lupa ganti <!-- Ganti ini dengan kode buku tamu kamu --> dengan kode kotak chattingmu [Shoutmix ataupun Oggix]
.
8. Tinggal save saja, selamat kamu sudah mempunyai kotak chatting tersembunyi sekarang.

Jangan lupa tinggalkan komentarmu di bawah, terima kasih.