Seperti gambar Favicon, secara standar blogger.com juga telah menyertakan tampilan Navbar secara otomatis pada setiap template yang akan digunakan oleh para pengguna blogger.com.
Tampilan Navbar itu sendiri mempunyai beberapa fungsi yang dapat memudahkan para pengguna blogger.com, diantaranya :
1. Mempunyai fasilitas mesin pencari blog yang memudahkan kamu untuk melakukan pencarian terhadap suatu blog (blogger.com) berdasarkan query yang kamu ketikkan.
2. Menjadi penghubung antara blog yang dibuat sebelum dan sesudah blog kamu dibuat.
3. Memudahkan visitor untuk membuat blog pada blogger.com (jika mereka belum mempunyai blog dan berkeinginan untuk membuat blog)
4. Untuk Login kedalam blogger.com, dan sebagainya.
Dan meskipun tampilan Navbar telah tersedia secara otomatis pada setiap template blogger.com, bukan berarti kita tidak bisa memodifikasi tampilan Navbar tersebut. Karena blogger.com, 100% memberikan kebebasan kepada kita untuk memodifikasi tampilan template yang ada termasuk Navbar.
Nah, sekarang tentunya kamu ingin mengetahui bagaimana caranya memodifikasi tampilan Navbar pada blogger.com ?
Untuk memodifikasi tampilan Navbar blogger.com, ada 2 cara yang bisa kamu lakukan, yaitu :
A. Modifikasi standar blogger.com,
Mengapa saya menyebutkan demikian ? Karena pada cara ini yang dapat kamu lakukan hanyalah mengubah tampilan warna pada Navbar yang telah tersedia pada template blog kamu.
Caranya adalah :
1. Setelah Login kedalam blogger.com, klik "Layout"
2. Pada halaman tab "Page Elements" (Elemen Halaman) klik "Edit" yang terdapat pada bagian Navbar.
3. Setelah Popup Window Navbar terbuka, pilih salah satu tampilan warna Navbar yang kamu inginkan dengna meng-klik radio button yang tersedia.
4. Terakhir klik "Save Your Template" (Simpan Perubahan). Lalu lihat hasilnya dengan meng-klik "View Blog" atau Preview (Pratinjau).
B. Modifikasi Navbar dengan CSS.
Cara ini merupakan cara yang dapat dikatakn paling banyak digunakan oleh para blogger. Dengan menggunakan Style CSS, ada tiga (3) cara yang bisa kamu lakukan untuk memodifikasi tampilan Navbar blogger.com. Antara lain :
1. Menghilangkan Navbar
Caranya adalah tambahkan Style CSS di bawah ini kedalam template blog kamu.
/* NAVBAR STYLES
----------------------------------------------- */
#navbar {
height:0px;
visibility:hidden;
display:none;
}
*Note: Letakkan class CSS diatas diantara tag <head> dan tag </head>.
2. Show Navbar onmouseover
Caranya adalah tambahkan class CSS di bawah ini kedalam template blog kamu.
/* NAVBAR STYLES
----------------------------------------------- */
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}
*Note: Letakkan class CSS diatas diantara tag <head> dan tag </head>. (Hasilnya bisa kamu lihat pada blog ini, coba arahkan cursor mouse ke bagian paling atas dari blog ini)
3. Membuat tampilan Navbar menjadi Transparant
Untuk cara yang ketiga ini, hasil dari tampilan Navbar yang akan kamu peroleh adalah Navbar akan terlihat transparant. Caranya juga sama seperti kedua cara yang diatas.
/* NAVBAR STYLES
----------------------------------------------- */
#navbar-iframe {
opacity:0.2;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:0.5;
filter:alpha(Opacity=100, FinishedOpacity=50)
}
Simpan perubahannya kemudian lihat hasilnya di blog kamu.
Semoga Tips dan trik ini bisa membantu kamu.
Selamat mencoba....
Tampilan Navbar itu sendiri mempunyai beberapa fungsi yang dapat memudahkan para pengguna blogger.com, diantaranya :
1. Mempunyai fasilitas mesin pencari blog yang memudahkan kamu untuk melakukan pencarian terhadap suatu blog (blogger.com) berdasarkan query yang kamu ketikkan.
2. Menjadi penghubung antara blog yang dibuat sebelum dan sesudah blog kamu dibuat.
3. Memudahkan visitor untuk membuat blog pada blogger.com (jika mereka belum mempunyai blog dan berkeinginan untuk membuat blog)
4. Untuk Login kedalam blogger.com, dan sebagainya.
Dan meskipun tampilan Navbar telah tersedia secara otomatis pada setiap template blogger.com, bukan berarti kita tidak bisa memodifikasi tampilan Navbar tersebut. Karena blogger.com, 100% memberikan kebebasan kepada kita untuk memodifikasi tampilan template yang ada termasuk Navbar.
Nah, sekarang tentunya kamu ingin mengetahui bagaimana caranya memodifikasi tampilan Navbar pada blogger.com ?
Untuk memodifikasi tampilan Navbar blogger.com, ada 2 cara yang bisa kamu lakukan, yaitu :
A. Modifikasi standar blogger.com,
Mengapa saya menyebutkan demikian ? Karena pada cara ini yang dapat kamu lakukan hanyalah mengubah tampilan warna pada Navbar yang telah tersedia pada template blog kamu.
Caranya adalah :
1. Setelah Login kedalam blogger.com, klik "Layout"
2. Pada halaman tab "Page Elements" (Elemen Halaman) klik "Edit" yang terdapat pada bagian Navbar.
3. Setelah Popup Window Navbar terbuka, pilih salah satu tampilan warna Navbar yang kamu inginkan dengna meng-klik radio button yang tersedia.
4. Terakhir klik "Save Your Template" (Simpan Perubahan). Lalu lihat hasilnya dengan meng-klik "View Blog" atau Preview (Pratinjau).
B. Modifikasi Navbar dengan CSS.
Cara ini merupakan cara yang dapat dikatakn paling banyak digunakan oleh para blogger. Dengan menggunakan Style CSS, ada tiga (3) cara yang bisa kamu lakukan untuk memodifikasi tampilan Navbar blogger.com. Antara lain :
1. Menghilangkan Navbar
Caranya adalah tambahkan Style CSS di bawah ini kedalam template blog kamu.
/* NAVBAR STYLES
----------------------------------------------- */
#navbar {
height:0px;
visibility:hidden;
display:none;
}
*Note: Letakkan class CSS diatas diantara tag <head> dan tag </head>.
2. Show Navbar onmouseover
Caranya adalah tambahkan class CSS di bawah ini kedalam template blog kamu.
/* NAVBAR STYLES
----------------------------------------------- */
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}
*Note: Letakkan class CSS diatas diantara tag <head> dan tag </head>. (Hasilnya bisa kamu lihat pada blog ini, coba arahkan cursor mouse ke bagian paling atas dari blog ini)
3. Membuat tampilan Navbar menjadi Transparant
Untuk cara yang ketiga ini, hasil dari tampilan Navbar yang akan kamu peroleh adalah Navbar akan terlihat transparant. Caranya juga sama seperti kedua cara yang diatas.
/* NAVBAR STYLES
----------------------------------------------- */
#navbar-iframe {
opacity:0.2;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:0.5;
filter:alpha(Opacity=100, FinishedOpacity=50)
}
Simpan perubahannya kemudian lihat hasilnya di blog kamu.
Semoga Tips dan trik ini bisa membantu kamu.
Selamat mencoba....
4 Komentar:
Tambahkan properti CSS beikut ini untuk mengunci posisi Navbar.
Inilah properti CSS-nya :
position: fixed;
kok gak bisa ya Vin?
Thank's buat Wiedy for the Comment....!
Tapi klo boleh aku tahu, apanya yang ngak bisa?
Karena sebelum itu, aku sudah mencoba nya lebih dulu dan berhasil.
Thank's....:-)
numpang nanya nih... kok setiap saya masuk ke blog kamu saya selalu disuruh memasukkan nama??bagaimana caranya memasukkan perintah seperti itu untuk blog kita apa bisa??
Posting Komentar