Mempercantik Tampilan NavBar Blogspot

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

Pilih dengan NavBar yang 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.

Artikel Terkait

Mempercantik Tampilan NavBar Blogspot

4/ 5

Oleh Hutomo Sungkar

Hutomo Sungkar