June 01, 2009

Floating Top Bar

Floating top bar merupakan tampilan sebuah baris yang terletak pada bagian atas (head) dari sebuah tampilan jendela browser yang aktif serta memiliki content (isi) hasil preview dari kode-kode HTML yang kita buat sendiri atau kode yang berasal dari sebuah web penyedia feature yang sering sobat gunakan untuk penghias blog.
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 artikel 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 artikel 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 artikel 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:

Anonymous said...

Wah sip banget boss ...!

Mobile App Developers on December 23, 2015 at 12:50 PM said...

Hi, Really great effort. Everyone must read this article. Thanks for sharing.

Post a Comment

 

Followers