Cara Membuat Buku Tamu Melayang

Cara Membuat Buku Tamu Melayang- Assalamu'alaikum, Kali ini kita akan membahas tentang Cara membuat buku tamu melayang,. Maksudnya buku tamu/cbox kita melayang-layang. Kita akan menaruh bukutamu/cbox kita di pinggiran halaman blog kita.. Jadi akan membuat memperamping widget kita apa bila menumpuk.. Sebenarnya tidak hanya buku tamu/cbox saja yang bisa di taruh,, konten lain pun juga bisa lho... Tapi kebanyakan yang di taruh adalah widget bukutamu/cbox. Buku tamu melayang yang akan kita buat berbeda dari bukutamu melayang lain.. Liat perbedaannya, bukutamu blog ini dan buku tamu biasa lain.. ?? Beda bukan..? Saya menemukannya di postingan sahabat saya yaitu kang beben . Tertarik?? Silahkan mencoba langkah-langkah berikut : 
       1.   Login Blogger
       2.   Rancangan ->> Edit HTML
       3.   Letakkan Kode Berikut  diatas/sebelum kode ]]></b:skin> 
#menuShow{
border:none;
position:fixed;
margin-top:33px
}
#menuSelect{
border:3px solid #f60;
background-color:#F7DFB5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
position:fixed;
width:auto;
height:auto;
padding:5px;
}
4.    Simpan Template
5. Lalu pidah ke Elemen Laman
6 Tambah Gadget->> HTML Javascript
7 Letakkan Script Beikut :


<div id="menuSelect">
<center><a href="#" onclick="moveOnMenu();moveOffSelector()">
<img src="http://form.doyi.net/button_close.png" width="" height="" border="0" /></a></center>
ISIKAN
KONTEN ANDA
</div>

<div id="menuShow">
<a href="#" onclick="moveOffMenu();moveOnSelector()">
<img width="60" height="115" src="http://i36.tinypic.com/1zoajqd.gif" /></a>
</div>

<script type='text/javascript'>//<![CDATA[
// (C) 2001 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.
Show="yes";var OffX=-300;var PosX=0;var PosY=0;var speed=10;var increment=15;var incrementNS4=5;var is_NS=navigator.appName=="Netscape";var is_Ver=parseInt(navigator.appVersion);var is_NS4=is_NS&&is_Ver>=4&&is_Ver<5;var is_NS5up=is_NS&&is_Ver>=5;var MenuX=OffX;var SelX=PosX;var sPosX=PosX;var sOffX=OffX;if(Show=="yes"){sPosX=OffX;sOffX=PosX;MenuX=sOffX;SelX=sPosX;}
if(is_NS4){increment=incrementNS4;Lq="document.layers.";Sq="";eval(Lq+'menuSelect'+Sq+'.left=sPosX');eval(Lq+'menuShow'+Sq+'.left=sOffX');eval(Lq+'menuSelect'+Sq+'.top=PosY');eval(Lq+'menuShow'+Sq+'.top=PosY');}else{Lq="document.all.";Sq=".style";document.getElementById('menuSelect').style.left=sPosX+"px";document.getElementById('menuShow').style.left=sOffX+"px";document.getElementById('menuSelect').style.top=PosY+"px";document.getElementById('menuShow').style.top=PosY+"px";}
function moveOnMenu(){if(MenuX<PosX){MenuX=MenuX+increment;if(is_NS5up){document.getElementById('menuShow').style.left=MenuX+"px";}else{eval(Lq+'menuShow'+Sq+'.left=MenuX');}
setTimeout('moveOnMenu()',speed);}}
function moveOffMenu(){if(MenuX>OffX){MenuX=MenuX-increment;if(is_NS5up){document.getElementById('menuShow').style.left=MenuX+"px";}else{eval(Lq+'menuShow'+Sq+'.left=MenuX');}
setTimeout('moveOffMenu()',speed);}}
function moveOffSelector(){if(SelX>OffX){SelX=SelX-increment;if(is_NS5up){document.getElementById('menuSelect').style.left=SelX+"px";}else{eval(Lq+'menuSelect'+Sq+'.left=SelX');}
setTimeout('moveOffSelector()',speed);}}
function moveOnSelector(){if(SelX<PosX){SelX=SelX+increment;if(is_NS5up){document.getElementById('menuSelect').style.left=SelX+"px";}else{eval(Lq+'menuSelect'+Sq+'.left=SelX');}
setTimeout('moveOnSelector()',speed);}}//]]>
</script>


Catatan: Warna ......: Ganti dengan Kesukaan anda

Demikian tutorial Cara membuat Buku Tamu Melayang... Kalau ada kesulitan tanya.... Ok Wa'alaikumsalam

1 komentar:

Leave a Reply

GET UPDATE VIA EMAIL
Dapatkan kiriman artikel terbaru langsung ke email anda!

Infolinks In Text Ads

Related Posts Plugin for WordPress, Blogger...
Your browser does not support frame. Inbox Your Sms

Subscribe via email

Enter your email address:

Delivered by FeedBurner

Get this widget!

Search

  • Archives

Related Posts Plugin for WordPress, Blogger...

Label Cloud


ShoutMix chat widget
ads ads ads ads
515 loyal readers
RSS feed | E-mail