Mempercantik Tampilan NavBar Blogspot

Mempercantik NavBar

Mungkin diantara anda masih ada yang mempertahankan Navbar ciptaan Blogger, dan bingung cara merenovasinya, di Tutotial Nano kali ini mudah-mudahan anda menemukan yang anda cari.




Langkah Pertama

Masuk ke : Layout

Menghias NavBar

Pilih dengan NavBar yang Transparan.

Pilih NavBar Transparan

Langkah Kedua

Masuk: Template > Edit HTML > Proceed

Tempat kodenya

dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>


Untuk mudah mencari kode di Edit HTML dengan tekan Ctrl+F di keyboard komputer anda, selanjutnya masukkan kode salah satu diatas. Terserah anda, mau yang ditempatkan dibawahnya atau diatasnya.



Langkah Ketiga

Pilih kode dibawah ini sesuai kesukaan anda :




Mewarnai

NavBar akan berubah warna sesuai dengan warna favorit anda.

#navbar
{background:yellow;}

atau

#navbar-iframe
{background:#ffff00;}

Kode yang berwarna merah diganti sesuai selera anda, bisa dilihat disini :

Macam-Macam Warna



Mewarnai dan Posisi Tetap

NavBar akan berubah warna sesuai dengan warna favorit anda, dan NavBar akan berada tetap.

#navbar-iframe
{background:yellow;position:fixed;top:0;}

Masih sama kode merah diganti sesuai selera anda.



Mewarnai, Posisi Tetap, dan Transparan

Ini ditambahkan efek transparan.

#navbar-iframe
{background:yellow;position:fixed;top:0;opacity:0.4;filter:alpha(Opacity=40)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100)}

Masih sama kode merah diganti sesuai warna selera anda.



2 Warna

Masih sama seperti diatas, tapi jika kursor berada diatasnya akan berubah warna.

#navbar-iframe
{background:#ffff00;}
#navbar-iframe:hover
{background:#000000;}

Masih sama, kode warna diganti dengan warna selera anda.



Muncul dan Bersembunyi

NavBar terlihat akan menghilang, tapi jika kursor berada diatasnya NavBar akan muncul.

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


Transparan

NavBar terlihat transparan, jika mouse diatasnya akan terlihat sepenuhnya.

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


Transparan dengan warna

Transparan digabungkan dengan warna.

#navbar
{background:yellow;opacity:0.3;filter:alpha(Opacity=30)}
#navbar:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

Seperti sebelumnya, kode berwarna merah diganti dengan warna favorit anda.



Transparan digabungkan dengan posisi tetap

NavBar terlihat transparan, tapi digabungkan dengan posisi selalu ada dilayar.

#navbar-iframe
{position:fixed;top:0;opacity:0.3;filter:alpha(Opacity=30)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}


Dibawah

NavBar akan berada dibawah dan digabungkan dengan posisi tetap.

#navbar-iframe
{position:fixed;bottom:0}


Dibawah dengan warna

NavBar akan berada dibawah dan digabungkan dengan posisi tetap.

#navbar-iframe
{background:lightpink;position:fixed;bottom:0}

kode merah diganti sesuai warna favorit anda.



Dibawah dengan Tranparan

Ini ditambahkan dengan efek transparan.

#navbar-iframe
{position:fixed;bottom:0;opacity:0.3;filter:alpha(Opacity=30)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}


Dibawah, Tranparan, dan Warna

Ini ditambahkan dengan warna.

#navbar-iframe
{background:lightpink;position:fixed;bottom:0;opacity:0.3;filter:alpha(Opacity=30)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

kode merah diganti sesuai warna favorit anda.




Sebenarnya ada banyak lagi yang Nano kembangkan, karena takut anda pusing mungkin itu saja dahulu.

11 comments:


  1. ok!

  2. tampilan blognya bagus mas...klo bleh saran, silahkan kunjungi sohtnaka atw css-trick untuk inspirasi design blog...
    makasih...

  3. Oooo makasih bro atas sarannya...
    Siapa yang tidak kenal Bro Soh, seorang master design... Trik CSS border di Blog ini, ya dari sana, walaupun bro Soh merujuk lagi ke situs aslinya...
    Berbeda dengan saya, hanya seorang amatir bro ^_^. Banyak artikel bahkan design saya rujukan dari para Master Web design seperti Bro David atau Om Google. Sangat berbeda dengan mereka yang benar-benar sekolahnya lulusan Web Design... Maklum bro, saya bukan orang kaya bisa sekolah seperti mereka, bisa internet dengan uang sendiri saja saya sudah sangat bersyukur Alhamdulillah...

    Jika tentang inspirasi, yah saya ini hanya amatir bro... design mereka sudah terlalu tinggi dan susah untuk dijangkau...

    Terima Kasih...

  4. trik yg bgus nc buat para blogger..thanks bro..

    http://brankas-tutorial.blogspot.com/

  5. sama-sama bro...

  6. thanks info nya gan, kunjung balik gan http://siptipsblog.blogspot.com

  7. Keren banget mas broooo saya baru nemuin web yg isi nya bener2 TUTORial hehehe numpang sedot ya mas broOO alias mas Nano

    Kerrend mohon petunjuk nya buat newbie yah mas broo

  8. Halo Om Nano. Makasih yaa... atas informasinya (*_*)!

  9. makasih ilmunya boss...kebetulan bngt lagi jalan2 cari ilmu u modifikasi blogspot....

  10. makasih ilmunya boss...kebetulan bngt lagi jalan2 cari ilmu u modifikasi blogspot....

  11. keren sob !!

Posting Komentar


Creative Commons License
Mempercantik Tampilan NavBar Blogspot by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/05/mempercantik-tampilan-navbar-blogspot.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.