Cara memasang Buku Tamu tersembunyi

Cara memasang Buku Tamu tersembunyi

Untuk membuat buku tamu adalah banyak cara tergantung selera atau kreatifitas anda. Tutorial kali ini saya mau share tentang cara memasang ChatBox (Buku tamu)dengan model tersembunyi melayang.

Untuk cara membuatnya, mari anda ikuti langkah-langkahnya sbb:
1. Masuk ke Blogger anda, pilih Tata Letak, Edit HTML.

2. Klik tombol Select All untuk Copy kode dibawah ini, dan letakkan tepat diatas kode ]]></b:skin>

/*-- Right-Float Chatbox tutorialines.blogspot.com --*/
#TBcr{position:fixed; top:50px; z-index:+1000}
* html #DADcr{position:relative}
.TBcrtab{height:125px; width:30px; float:left; cursor:pointer; background:url(http://lh3.ggpht.com/_GaKwmMcf4N4/TSKIXCAopTI/AAAAAAAAD_M/2pHBa3Gzb5w/DADrchat.png) no-repeat}
.TBcrcontent{float:left;border:2px solid #db4b0c; background:#000000; padding:10px}
.TBcr-close{font-size:13px}
.TBcr-close{color:#db4b0c}
.TBcr-close a{text-decoration:none}

3. Pada Elemen Laman, Klik Tambah Gadget, Pilih HTML/JavaScript,lalu masukin kode berikut.

<!-- Float Chatbox tutorialines.blogspot.com Code Start -->
<script>
function showHideTBcr(){
var TBcr = document.getElementById("TBcr");
var w = TBcr.offsetWidth;
TBcr.opened ? moveTBcr(0, 30-w) : moveTBcr(20-w, 0);
TBcr.opened = !TBcr.opened;
}
function moveTBcr(x0, xf){
var TBcr = document.getElementById("TBcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
TBcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveTBcr("+x+", "+xf+")", 10);}
}
</script>
<div id="TBcr">
<div class="TBcrtab" onclick="showHideTBcr()"> </div>
<div class="TBcrcontent">
<center>

<!-- CHATBOX ANDA DISINI -->

</center>
<br />
<div class="TBcr-close">
<Script type='text/javascript' src=''></Script>
<span style="float:right">
<a href="javascript:showHideTBcr()">
[Tutup]
</a></span></div>
</div></div>

<script>
var TBcr = document.getElementById("TBcr");
TBcr.style.right = (30-TBcr.offsetWidth).toString() + "px";
</script>
<!-- Float Chatbox http://tutorialines.blogspot.com/2012/05/cara-memasang-buku-tamu-tersembunyi.html Code End -->

4. Simpan Template anda dan selamat mencoba

Tweet