Assalamulalaikum...wr...wb
Sobat. kali ini Saya Akan Berbgi Ilmu lagi Tentang Cara membuat BUKU tamu melayang
langsung aja ya ke TKP.....
langsung aja ya ke TKP.....
caranya :
1. Login Ke blog dulu
2. MAsuk Ke Rancangan
3. Tambahkan ADD Gadget
4. Pilih JavaScrip
5. Salin( copy-paste) kode script di bawah ini:
CATATAN :
1. Ganti Tulisan Yang berwarna MERAH dengan Buku tamu Anda
2. Ganti Tulisan Yang Berwarna BIRU dengan Image Jika Mau di Ganti
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:120px;
width:60px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:3px solid #00FF00;
background:url(http://2.bp.blogspot.com/-J2nPAQCMsPM/TfZQs6TZ4wI/AAAAAAAAACY/YtPY4LLxLZ8/s1600/Wido2.gif) #000000 repeat-y center;
-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 #00FF00;
}
</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:url(http://i53.tinypic.com/6gx34z.jpg) no-repeat center;">
<br />
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200%" height="209" src="http://www4.cbox.ws/box/?boxid=4019272&boxtag=e658zl&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#36FF00 2px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="91" src="http://www4.cbox.ws/box/?boxid=4019272&boxtag=e658zl&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#36FF00 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i53.tinypic.com/vvtyc.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>
<div style='display:scroll; position:fixed; top:60px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://2.bp.blogspot.com/-wtR0fIcWh6I/TfbYgLqPRZI/AAAAAAAAACo/_ObXAc3x7Gc/s1600/bkuwd.gif"/></a>
</div></div></div>
CATATAN :
1. Ganti Tulisan Yang berwarna MERAH dengan Buku tamu Anda
2. Ganti Tulisan Yang Berwarna BIRU dengan Image Jika Mau di Ganti
3. Tulisan berwarna KUNING adalah URL gambar pada buku tamu Anda
Nah ini gan yang bagus nih... Yang melayang biar simple gan, hehehe, thanks gan atas tutorialnya... O iya, ane mau follow nih, tapi di mana ya? Mohon pencerahannya ya gan, hehehe...
Ditunggu kunjung baliknya sobat... :)