Membuat Buku Tamu Keren Keluar Dari Atas

Buku tamu merupakan sarana yang digunakan pengunjung untuk berkomunikasi dengan pemilik blogger atupun website, dengan demikian ada feedback atau tanggapan antara pengunjung dan blogger. berikut saya akan menjelaskan cara memasang buku tamu sederhana yang muncul dari atas. silahkan anda baca secara teliti langkah-langkah berikut:

1. Silahkan anda masuk ke dasbor anda
2. kemudian pilih rancangan 
3. klik tambah gadget - pilih HTML / Javascript
4. Kemudian Copy Kode Script dibawah ini
5. Dan terakhir di save/simpan 

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#000;">


<!--Letakkan Kode Script Cbox Anda Disini -->

Get this <a href="http://separuhtulisanku.blogspot.com/2013/02/membuat-buku-tamu-keren-keluar-dari-atas.html" target="_blank"><blink>widget</blink></a>


</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqF4A7Naec8IvuT3PLtzGnZdLkLx9emRA6KTlKBSLqXQ0CoBBrp4oSYoZu9rgnfBqmr8VAwtfNoqay4mOJh115rfS5-L9JUs-GXh9Nm7CJpYjXVGBh7NT4mkvDjHhllTGoYbrSwTyIzuBl/s1600/close.png" alt="close" title="Klik Disini Untuk Menutup" /></a></div>

</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjubFlbYfPa8Y_AcE8M0L1ddVjkRP1OM_pPBYNnQFhlqdLd4j4DhY3F39hCmrIZDkUMVeQ5a6Qj9Ouk0Mu4x3rJBopjhk7gbdcBPGiXefIQjU4amh_NKFQ82fzMa0pLThhPVi1WR9JTFvR1/h120/Anim+Cbox.gif"  /></a>
</div>

Keterangan:
1. Yang berwarna biru, kamu bisa  ganti dengan Script CBox kamu.
2. Yang berwarna merah, posisi tombol Cbox di sebelah kanan, dengan tinggi atas 20px.
Untuk Melihat Demo nya, bisa klik disini

@kaptenpenguind Mungkin Ini Juga Yang Anda Cari :

.:: Related Post ::.