Cara Membuat Buku Tamu Melayang Pada Blog

Label:

Assalamulalaikum...wr...wb

Sobat. kali ini Saya Akan Berbgi Ilmu lagi Tentang Cara membuat BUKU tamu melayang
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:

<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&amp;boxtag=e658zl&amp;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&amp;boxtag=e658zl&amp;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


2 komentar:

  1. Fahri Samudra mengatakan...:

    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... :)

  1. Yonareta-hito mengatakan...:

    Wah, maaf gan, tapi kotak follownya dah ane pasang. DAn blog agan udah ane follow

Posting Komentar

Silahkan berkomentar yang positif di bawah ini. Mohon jangan berkomentar hal-hal yang berbau SARA dan mengandung konten porno, atau konten negatif lainnya.