Cara membuat Buku Tamu muncul keren | TuTorial Ku UnTuK Mu

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

kali ini saya akan menjelaskan cara membuat cara membuat buku tam muncul keren..

bagaimana cara membuat nya mari kita simak bersama MANTEMAN..hehe

 

1. Login ke blogger Dashboard anda 

2. lalu pilih rancangan dan tmbah gadget pilih html/java script

3. masukkan code di bawah ini

<style type="text/css">


#at{


position:fixed;


left:0px;


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 BUKU TAMU SOBAT DISINI


</div>


</div>
<br />


<div align="right"><a href="javascript:void(0);"
onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKTT5ueYCxnCuji5z7sNYuOOVJJbu03hvZWJ3dpcQXZcKUUbMAu7As9jClHDNN3_n9_HRbhCNHnBCjXvqok7VGJfRforNWHAJX5f9pbaY1rl4IMb37P0qYRwMECe4hAf3uM7YvjKL9V3I/s1600/CLOSE.png"
alt="close" title="Click here to Close Cbox" /></a></div>
</div></div>




<script type="text/javascript">


var at = document.getElementById("at");


at.style.top = (-200-at.offsetWidth).toString() + "px";


</script>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img

border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ_dbmz9CkVI8gxYDXKMUdBbBAvowW4GSj95J7gDPrtt7AeEFFn-xpl2WbX4HynCgwLAjFg1kekHH5ccz4BWMqOHLPRL_MoNi-EtTBEFRXovRoziKOGbY_Z-J_-GqEfKDT_2fFkMk31C0/s1600/guestbook.png"

alt="Guest Book" title="Click here to open Guest Book" /></img

border="0"></a></center>

 4. simpan dan lihat hasilnya 

nb : pada warna merah silahkan gnti dengan code shoutbox mu

emm bagaimana keren kan Jangan lupa berikan komentar Sapaan kalian di blog ini .

Regards

ADMIN ( Syarip )

Ditulis Oleh : SyariĪ ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara membuat Buku Tamu muncul keren | TuTorial Ku UnTuK Mu. TuTorial Ku UnTuK Mu™ Memperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://sariptrik.blogspot.com/2012/08/cara-membuat-buku-tamu-muncul-keren.html" target="_blank">Cara membuat Buku Tamu muncul keren | TuTorial Ku UnTuK Mu</a>

Baca Artikel Lainnya.!: