Secara sederhana dapat sobat lihat seperti pada gambar berikut ini (tunjuk agar gambar membesar):
Tepatnya pada bagian kotak berwarna yang berisi Your content here dan sebuah tombol
diatas. Keunikan dari bar ini adalah …??jika user menggulung mouse untuk melihat isi dari layar browser pada bagian bawah maka secara otomatis bar tersebut akan turut serta mengikuti hingga dapat terus terlihat oleh user, akan tetapi dengan menekan tombol
pada sisi kirinya maka bar tersebut akan menutup dan hilang dari pandangan user, atau sebaliknya jika sobat ingin pesan pada bar tersebut tetap ada dan user tidak dapat menutupnya, sobat hanya sedikit membuang / menghapus beberapa script kode pembentuknya.(sobat lihat sisi kiri atas blog ini / " Wellcome in my blog " teks dibuat pada glittermaker)Ok jika sobat ingin mencoba membuatnya ikuti langkah-langkah berikut ini :
1. Login pada blog sobat, kemudian masuk ke Tata Letak / Layout – Edit HTML
2. ENCODE terlebih dahulu Script berikut ini :
untuk melakukan ENCODE klik Disini Jika sudah Copy dan Paste kan script tersebut (yang sudah di ENCODE) setelah tag <head> pada template layout sobat.
Kode yang harus sobat ENCODE :
<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* 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>
3. Copy Script berikut ini dan Paste – kan setelah tag <body> , untuk Script ini tidak perlu sobat ENCODE
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src=" http://i647.photobucket.com/albums/uu191/admincoy/close.gif " border="0" /></a>
Your content here.
</div>
4. Silahkan sobat ganti pada Your content here dengan teks yang berupa kode HTML- nya.
Misalnya kode HTML seperti ini :
<font face="Arial" size="3" color="blue">Selamat Datang di Blog Saya</font>
5. Klik Save / Simpan Template
Catattan :
Pada Langkah 2 diatas Dapat sobat ganti warna background (lightyellow) dan ukuran lebar Top Bar (width) yaitu pada bagian ini :
background-color: lightyellow;
width: 620px;
Jika menggunakan Text dari glittermaker atau lainnya untuk Your content here maka Scriptnya di ENCODE dahulu.
Jika sobat tidak ingin ada tanda
pada bar tersebut maka sobat harus menghapus Script berikut :<a href="" onClick="closebar(); return false"><img src=" http://i647.photobucket.com/albums/uu191/admincoy/close.gif " border="0" /></a>
Pada langkah 3 diatas.
Silahkan sobat lihat hasilnya…….!!
2 komentar:
Wah sip banget boss ...!
Hi, Really great effort. Everyone must read this article. Thanks for sharing.
Post a Comment