Script ini menampilkan sebuah bar mengambang yang
tampil di bagian kiri atas jendela, meluncur lembut
menyusuri kemanapun jalannya scrollbar. Dengan
adanya tombol close di sebelah kiri atas yang berfungsi
sebagai tombol penutup bagi pengunjung yang telah
melihat dan ingin menutupnya.
Perhatikan screenshotsnya di bawah ini :
Berikut ini cara untuk membuatnya :
1. Masuk ke Edit HTML
2. Carilah tag </head>
3. Copy kode berikut dan letakkan
di atas atau sebelum tag </head> ini :
<script type="text/javascript"> /*********************************************** * Floating Top Bar script- © Dynamic Drive * Sliding routine by Roy Whittle (http://www.javascript-fx.com/) * This notice must stay intact for legal use. * User http://www.syamsudinnamaku.blogspot.com/ * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 30 //set x offset of bar in pixels var startY = 5 //set y offset of bar in pixels var verticalpos="fromtop" //enter "fromtop" or "frombottom" 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.stayTopLeft=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("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script>
4. Cari lagi tag </body>
5. Copy kode berikut dan letakkan
di atas atau sebelum tag </body> ini :
<div id="topbar"> <a href="" onClick="closebar(); return false"><img src="http://www.dynamicdrive.com/dynamicindex11/close.gif" border="0" /></a> Tulisan atau Gambar Anda Letakkan di sini. <img src="URL gambar Anda di sini" border="0" /><img src="URL gambar Anda di sini" border="0" /> </div>
KETERANGAN :
Masukkan tulisan ataupun gambar Anda
pada tempat yang tersedia.
Selamat mencoba dan tetap good luck!
0 comments:
Posting Komentar