Cara Membuat Halaman Melayang & Widget | Givuin

Para sobatku yang saya cintai dan saya banggakan(ciiyyee :P). Mungkin. ini adalah posting terakhir saya. Loh? loh? kok terakhir?.. haha, mksudnya untuk sementara sob. Kenapa? karena saya mau Fokus! untuk mendapatkan apa yang saya cita-citakan! kali ini, saya akan bongkar!, bagaimana cara membuat halaman melayang tanpa menggunakan script link! lihat sini sob!

Untuk blog Givuin, saya memakai java script. langsung praktek, santai aj sob!




          1. Masuk ke www.blogger.com
          2. Pilih rancangan
          3. Pilih tambah gadget
          4. Pilih HTML/Java Script
          5. Copas Html & java script ini



<style>
#topbar{
position:absolute;
visibility: hidden;
width: 500px;
z-index: 1000;
padding:5px;
background-color: #ffffff;
border: 1px solid #0B5AE3;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #000000;
text-align: justify;
font-size: 14px;
font-family: Verdana, serif;
}
</style>


<script>function iecompattest()   {return(document.compatMode&&document.compatMode!="BackCompat")?document.documentElement:document.body}
function get_cookie(Name){var search=Name+"="
var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)
if(offset!=-1){offset+=search.length
end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}
return returnvalue;}
function closebar(){if(persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"}
function staticbar(){barheight=document.getElementById("topbar").offsetHeight
var ns=(navigator.appName.indexOf("Netscape")!=-1)||window.opera;var d=document;function ml(id){var el=d.getElementById(id);if(!persistclose||persistclose&&get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};el.x=startX;if(verticalpos=="fromtop")
el.y=startY;else{el.y=ns?pageYOffset+ innerHeight:iecompattest().scrollTop+ iecompattest().clientHeight;el.y-=startY;}
return el;}
window.stayTopCenter=function(){if(verticalpos=="fromtop"){var pY=ns?pageYOffset:iecompattest().scrollTop;ftlObj.y+=(pY+ startY- ftlObj.y)/8;}
else{var pY=ns?pageYOffset+ innerHeight- barheight:iecompattest().scrollTop+ iecompattest().clientHeight- barheight;ftlObj.y+=(pY- startY- ftlObj.y)/8;}
ftlObj.sP(ftlObj.x,ftlObj.y);setTimeout("stayTopCenter()",10);}
ftlObj=ml("topbar");stayTopCenter();}
if(window.addEventListener)
window.addEventListener("load",staticbar,false)
else if(window.attachEvent)
window.attachEvent("onload",staticbar)
else if(document.getElementById)
window.onload=staticbar</script>


<script>
var persistclose=0
var startX = 230
var startY = 1
var verticalpos="fromtop"
</script>


<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false">'close'</a></div>
tempat kata2 ato script sobat
</div>
          keterangan : Width : panjang halaman
                            Background : warna background. lihat HTML warna
                            Border : kotak pinggiran
                            Var startX : jarak sumbu X dari kiri
                            Var startY : jarak dari sumbu y dari atas
                            'close' : kata2 untuk menutup bisa diganti gambar<image>




         nih dia hasilnya..


                             


Nah tu dia cara membuat widget melayang tanpa script link. Sukses untuk anda sobat! :)


nb : lihat cara melihat halaman klik float


from me :
you comment
i comment
you follow
i follow



Share on Google Plus

About Gembong Abisatya

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

5 komentar:

  1. mas carane ben eneg emoticon didekete komentar gimana ???

    BalasHapus
  2. maksudnya cara biar ada emoticons di atas poskan komentar kaya icon ini :))gimana mas ?

    BalasHapus
  3. wah.. itu sih bawaan template. blum saya bongkar dek,, hehe :P
    nanti habis UAN. ciak findow!

    #beraksi - kotak

    BalasHapus

no sara!