Home » » Tutorial Hide Navigation Bar

Tutorial Hide Navigation Bar


بسم الله الرحمن الرحيم

Assalamualaikum

Apa navigation bar eh? Kalau nak tau, tengok gambar kat bawah ni..

Tutorial, Tutorial Blog, Tutorial Hide Navigation Bar, Cara nak Sorok Navigasi Bar di Blog, Navigasi Bar, Navigation Bar

Sekarang ni saya nak ajar cara nak buat auto hide nav bar ni..macam saya punya. Tutorial ni diminta oleh  cik Lala.



Copy kod di bawah ni dan letakkan di bahagian HTML/Javascript.

Design ->Page elements-> Add a gadget-> HTML/Javascript


<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->

Kalau ada yang tak boleh sebab template yang berbeza. cuba yang ni pula eh. Cari kod ni di Edit HTML

Design -> Edit HTML

Blogger Template Style
Name:
Designer:
URL:
Date: 
Updated by :


Lepas tu, copy kod ni dan letak di bawah kod tadi

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0)
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

Ok...selamat mencuba. 


 والسلام



Syukran kerana sudi membaca..boleh Like dan Share entri ini

6 luahan hati:

CIK FERRA AWW said...

AWK, CEMANA NAK RINGAN KAN BELOG U. I SEDEH LAH, BELOG I NI CAM OBESITY JERR TSKTSK

kim's yaya said...

pnjg giler kud kamu nyer tuto :) yana nyer na hide pndek je tuto dia :))

Atika Aula said...

@CIK FERRA AWW
myb ni boleh membantu awak :)
http://atikaahmadiah.blogspot.com/2011/02/tolong-ringankan-blog-boleh-tak.html

Atika Aula said...

@kim's yaya
kat atas tu ada 2 cara..kalau tak boleh guna kod n cara atas, try yg bawah pulak..sebab template tak semua sama kan~

pha is said...

waa... menjadi la... thanks for sharing...

Secret Garden said...

menjadi!! THX..

Related Posts Plugin for WordPress, Blogger...

ShareThis

Copyright Control : Atika Aula