Cyber - BC

Kali ini saya akan membagi tips dan trik "Cara Membuat Buku Tamu Show/Hide dari Atas". Gak Pake Lama langsung aja Dach...

Login blogger
Rancangan, Tambah Gadget, Html/javascript
Dan Simpan kode berikut :

Here Is The Code

<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;">


<!-- Simpan Kode cbox atau shoutmix nya 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/AVvXsEiFp1pCdD_avG3ZK_IgG3KSbPBJ0TCm_RDjeY7XL03TfQR4SWvlhn5ifDKDfICxc-j2bqHC01oU3LeIE2Iceo8WrWEndojYjYMEGjQL2g7_fhGQS23Vj1udvb0XAiuWSSZJKbsv1MYZ3t1m/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="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Pada Kolom textarea di atas ada kata
 (tepatnya di tengah)
Kalian Bisa Taruh Kode Shoutmix/ Cbox Kamu Di
Kata

CTRL + C UNTUK COPY DAN CTRL + A UNTUK SELECT ALL

Catatan:Jika ingin menampilkan posisi Tombol di samping seperti Blog saya ini, Tinggal ganti Kode di bawah ini

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Dengan Kode di bawah ini

<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/CHATBOX.png"  /></a></div>

Sudah itu saja yang yang bsa saya sampaikan, sekian dan terima kasih...

Credits:Celoteh Galang

Cara Membuat Buku Tamu Show/Hide dari Atas

Cara Mendisable Keyboard Pada Halaman Blog

Pasang Tools HTML Editor Di Blog Kamu

Pasang Widget SMS Gratis Di Blog Kamu!!

Cara Memasang Widget Google Translate Di Blogger

Menu

Popular posts

Categories

Cyber - BC

Blog Tricks

My Best Friend's