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.

Catat Ulasan

16 Comments:

Ғмɛσω berkata...
Teknik Buat Blog

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

Ғмɛσω berkata...
Teknik Buat Blog

dah klik expand pon x jumpa jgak la.

Ғмɛσω berkata...
Teknik Buat Blog

dah jadi. terima kasih.

*macam mana nak buat icon reply tu ye?

mdzuardi berkata...
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)

yahaya berkata...
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.

yahaya berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

geekz36 berkata...
Teknik Buat Blog

thanks bro, amat membantu. penerangan yg jelas.

Latest Entry: Adobe Photoshop CS5 Extended (Portable)

Radianthijab berkata...
Teknik Buat Blog

thnks...really nice.

: JannahSuhaimi : berkata...
Teknik Buat Blog

tenkiu. . da dapat..:)

Raz berkata...
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?

yahaya berkata...
Teknik Buat Blog

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

pOp's Up ! berkata...
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

yahaya berkata...
Teknik Buat Blog

@pOp's Up !
sebelum kod
]]>

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

joe berkata...
Teknik Buat Blog

nice post, i like this. Thanks

Hajar Nordin berkata...
Teknik Buat Blog

jadi lah.. tanx sangat2 ^_^