Tutorial Hide Navigation Bar

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

Assalamualaikum

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

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

---