Wadah Madrasah Pengalaman: Tutorial Auto Hide Navbar


Monday, June 20, 2011

Tutorial Auto Hide Navbar

.



Salam korang..


Kali nie Wan nak wat Tutorial Auto Hide Navbar Lak (bila sentuh kat atas baru navbar keluar).Korang leh tengok kat WanhazelJunior..Kebanyakkan Blogger gemar bila ada Navbar nie So untuk me-remove Navbar adalah pilihan yang kurang bijak..Sebelum nie Wan dah wat Tutorial buang/remove navbar . Dan bila Wan buang navbar di blog template yang ditempah dari Wan..Banyak lak yang tanya macam mana nak sign in..Mula mula hairan sikit..rupanya kebanyakkan blogger sign in dekat navbar..So Wan rasa tindakan membuat auto hide nie adalah yang terbaik dari mebuang terus applikasi navbar nie. Jika korang dah buang/remove navbar ..Korang kene delete dan buang dulu koding buang/remove navbar tu sebelum pasang Auto Hide Navbar nie..

Jom Tutorial


Mula mula korang ke...

Dashsboard>design>Add gadget>HTML

Korang Copy kod bawah nie and paste kat Gadget HTML korang.




<!-- DROPDOWN NAVBAR -->
<!-- Wanhazel.blogspot/script 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 -->




Sila save dan tengok.


Selamat mencuba


.



5 comments:

Anonymous said...

Terima kasih. Saya amat menyukainya ^_^

Faten Ahmad said...

sy suke. thanx yea. hee.. (:

Wan_hazel said...

welkam..welkam

mizz eqin said...

salam.. cmne kalau nk buang navbar lak?? tq...:)

Wan_hazel said...

mizz eqin


ade je tuto remove navbar...