membuat 'auto hide' Navbar

Terdapat cara lain untuk menghilang Navbar pada blog anda selain dari menghilangkan terus.Kita juga boleh membuat Navbar tersebut menjadi Auto Hide (muncul bila diletakkan pointer  pada nya).Cara ini tidak menyalahi peraturan Blogger kerana masih terdapat navbar lagi.Jika anda berminat dengan navbar ini ikuti langkah berikut.

1.Klik pada  Dashboard,dan pilih Edit HTML.
2.Kemudian carilah kod  berikut   body {
 

body {
font: 100% Arial, Helvetica;
background: #000000;
color: #333;
}

3.Letakkan Kod berikut di atas kod tadi.

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

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



menjadi seperti ini:


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

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

body {
font: 100% Arial, Helvetica;
background: #000000;
color: #333;
}


4.Kemudian klik save template

5.Lihat blog anda kembali untuk melihat tampilannya.

Post a Comment

16 Comments:

αииɛ ƨαм said...
Teknik Buat Blog

tak jadi la.
sbab x jumpa kod tag body tu.

αииɛ ƨαм said...
Teknik Buat Blog

dah klik expand pon x jumpa jgak la.

αииɛ ƨαм said...
Teknik Buat Blog

dah jadi. terima kasih.

*macam mana nak buat icon reply tu ye?

mdzuardi said...
Teknik Buat Blog

aku letak atas kod ini baru jadi,


.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)

sibersensasi said...
Teknik Buat Blog

@mdzuarditemplate ada berbagai bagai, jadi kena cari kod seakan akan kalau tiada.Seperti mana yang En.MdZuardi buat,cuba letak dulu dan tgk hasilnya.Terima kasih kerana berkongsi.

sibersensasi said...
Teknik Buat Blog

@Ғмɛσωada pada tutorial memasang fungsi reply to comment

sibersensasi said...
Teknik Buat Blog

@Bonek Suroboyomasuk ke design--pilih--page elements..bagaian atas sekali ada navbar dan klik edit dan pilih warna..

geekz36 said...
Teknik Buat Blog

thanks bro, amat membantu. penerangan yg jelas.

Latest Entry: Adobe Photoshop CS5 Extended (Portable)

Zaqiyah said...
Teknik Buat Blog

thnks...really nice.

cik jannah said...
Teknik Buat Blog

tenkiu. . da dapat..:)

Mohd Zairin said...
Teknik Buat Blog

"salam..sy ada buat slide out navigation floating kt blog sy tp lps tu dh xboleh nk pg dashboard tuk editing...top navigation bar tu xleh nk klik lgsung..sesape leh tlg x?

sibersensasi said...
Teknik Buat Blog

@Raz
tak boleh masuk melalui link dari navbar blog ke..cara lain pun boleh masuk melalui blogger

pOp's Up ! said...
Teknik Buat Blog

hi, nice blog !!
one thing saya still tak tau mcm mana nak buat header title, description dan menu ditengah ? saya nk letak title semua kat tengah tp dia pergi ke kiri pulak.. pls help. tq

sibersensasi said...
Teknik Buat Blog

@pOp's Up !
sebelum kod
]]>

letakkan kod ini
#header-inner {text-align: center ;}

joe said...
Teknik Buat Blog

nice post, i like this. Thanks

Unknown said...
Teknik Buat Blog

jadi lah.. tanx sangat2 ^_^