Category : Labels: Blog Stuff, Blog Tutorial, Blogger Stuff, Blogging, Desain, Iseng- iseng, Template, Tips Trik
Telah sudah kita ketahui pada artikel sebelumnya yang membahas mengenai keuntungan dan kerugian navbar blogger.com, bahwa navbar blogger mempunyai beberapa kekurangan di balik kelebihan yang dimilikinya sehingga mungkin beberapa blogger platform blogspot membuat kurang nyaman atau bahkan tidak suka dengan adanya navbar bawaan blogspot tersebut. Ada beberapa faktor yang membuat blogger platform blogspot merasa tidak nyaman dengan navbar default blogspot. Salah satunya yaitu pada style atau tampilan dari navbar yang kelihatannya memang tidak cocok kalau tetap ditampilkan bersama dengan template blogspot yang banyak bertebaran sekarang ini. Maka dari itu rata - rata para blogger berinisiatif untuk menghilangkan ( menghapus ), menyembunyikan ( auto hide ), dan bila ada blogger platform blogspot yang sudah menyadari, membutuhkan, dan menyukai akan kelebihan dari navbar blogspot mereka hanya akan mengganti warna navbar saja. Dan mereka yang tidak menyukai biasanya mencari navbar alternatif navbar blogspot seperti contohnya yang populer sekarang ini wibiya toolbar.
Nah, berdasarkan bahasan materi di atas atau pada artikel sebelumnya, saya berangan - angan untuk membuat navbar default blogspot menjadi "sedikit" lebih nyaman untuk dilihat dan digunakan. Dan akhirnya, setelah melakukan sedikit percobaan sederhana di salah satu blog saya, akhirnya saya bisa mewujudkan angan - angan
saya itu. Tapi sayangnya masih ada kekurangan di hasil percobaan saya ini, yaitu hasil dari percobaan tidak berhasil pada browser Internet Explorer 6, tapi bisa bekerja pada browser Opera walaupun agak sedikit kasar daripada dilihat dari browser Mozilla Firefox. Sampai di sini, bagi yang tidak berminat untuk melanjutkan ke langkah selanjutnya bisa berakhir di sini.
saya itu. Tapi sayangnya masih ada kekurangan di hasil percobaan saya ini, yaitu hasil dari percobaan tidak berhasil pada browser Internet Explorer 6, tapi bisa bekerja pada browser Opera walaupun agak sedikit kasar daripada dilihat dari browser Mozilla Firefox. Sampai di sini, bagi yang tidak berminat untuk melanjutkan ke langkah selanjutnya bisa berakhir di sini.Ok, 
kalau masih ingin terus melanjutkan silahkan ikuti langkah - langkah di bawah ini. Caranya cukup mudah seperti biasa, sobat tinggal copy-paste saja script yang telah disediakan di bawah ini di atas kode ]]></b:skin>
kalau masih ingin terus melanjutkan silahkan ikuti langkah - langkah di bawah ini. Caranya cukup mudah seperti biasa, sobat tinggal copy-paste saja script yang telah disediakan di bawah ini di atas kode ]]></b:skin>/******************************************
Blogger Navbar Customise (untuk Blogspot)
(C)2009 by Muhammad Umar Hasyim Asyari
kunjungi http://lembar-coretan.blogspot.com
********************************************/
.navbar {
width:98%;
position:fixed; bottom:5px;left:5px;
display: yes;
border: 4px groove black;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
}
Blogger Navbar Customise (untuk Blogspot)
(C)2009 by Muhammad Umar Hasyim Asyari
kunjungi http://lembar-coretan.blogspot.com
********************************************/
.navbar {
width:98%;
position:fixed; bottom:5px;left:5px;
display: yes;
border: 4px groove black;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
}
Atau kalau sobat menggunakan template default minima dari blogspot seperti saya, sobat bisa meletakkannya tepat di bawah credit author template. Pokoknya tempatkan code di atas di dalam tag code css sobat.
Langkah terakhir, silahkan sobat memilih keempat warna navbar dari blogspot yang sudah disediakan di widget navbar blogspot. Dari sini memang sudah berakhir, tapi biar lebih jelas saya jelaskan "sedikit" arti kode/ script di atas dengan pemahaman saya ( alias ngawur... hihihi.
).
).width : Bagian ini untuk mengatur panjang dari navbar. Kenapa saya pakai "%" , itu dikarenakan navbar selalu bisa menyesuaikan panjangnya sesuai dengan resolusi dari layar monitor. Maka dari itu, bila menggunakan "pixel" ( px ) maka navbar akan menjadi terkekang. Dan Akhirnya penampilan akan menjadi tidak enak dipandang ( muncul jadi separuh bagian ).
position : fixed; bottom:5px;left;5px; : Bagian ini mengatur letak dari navbar. Position:fixed, bisa diganti dengan position:absolute, tapi navbar tidak akan tinggal menetap di bawah saat halaman di scroll ( menempel di bagian halaman blog ). Sedangkan bila "fixed" maka navbar akan tetap tinggal dimana dia ditempatkan. Untuk kode di atas saya meletakkan navbar di bawah atasnya status bar browser dengan jarak 5 pixel.
display: yes; : Bagian ini tentu saja untuk mengatur navbar hendak ditampilkan atau tidak. Bila tidak ingin menampilkan navbar, sobat tinggal mengganti kata "yes" ( tanpa tanda petik ) dengan kata no.
border: 4px groove black; : Bagian ini mengatur border dari navbar. 4px berarti tebal border 4 pixel, groove berarti salah satu jenis dari border, black berarti sudah tentu ini mengatur warna dari border.
-moz-border-radius-bottomright:10px; : Mengatur lengkungan border pojok kanan bawah. Biar kelihatan seperti wibiya toolbar gituu.. hehe
-moz-border-radius-topleft:10px; : Mengatur lengkungan border pojok kanan kiri atas.
-moz-border-radius-topright:10px; : Mengatur lengkungan border pojok kanan atas.
-moz-border-radius-bottomleft:10px; : Mengatur lengkungan border pojok kiri bawah.
Nah.. bila tidak ingin sama dengan Navbar Customisenya si Tukang Corat -coret yang bisa sobat lihat di bawah halaman ini, silahkan rubah sendiri. Untuk saat ini saya masih bisa menjadikan seperti itu saja. Bila kawan - kawan blogger yang lebih berpengalaman ataupun belum, bisa membantu saya untuk menyempurnakan ( memperbaiki tampilan dan memperbaiki bugs ) Navbar Customise saya ini.
Untuk saat ini sampai di sini dulu. Terima Kasih dan sampai jumpa di materi sharing berikutnya. Salam Blogger. Oh ya, sampai lupa mengucapkan Terima Kasih banyak kepada Mas Doyok yang sudah mensupport saya, Om Agus Ramadhani dan Kang Rohman yang sudah menginspirasi saya. Dan Tak lupa pada Wibiya.
Semoga berguna. !
-moz-border-radius-bottomright:10px; : Mengatur lengkungan border pojok kanan bawah. Biar kelihatan seperti wibiya toolbar gituu.. hehe
-moz-border-radius-topleft:10px; : Mengatur lengkungan border pojok kanan kiri atas.
-moz-border-radius-topright:10px; : Mengatur lengkungan border pojok kanan atas.
-moz-border-radius-bottomleft:10px; : Mengatur lengkungan border pojok kiri bawah.
Nah.. bila tidak ingin sama dengan Navbar Customisenya si Tukang Corat -coret yang bisa sobat lihat di bawah halaman ini, silahkan rubah sendiri. Untuk saat ini saya masih bisa menjadikan seperti itu saja. Bila kawan - kawan blogger yang lebih berpengalaman ataupun belum, bisa membantu saya untuk menyempurnakan ( memperbaiki tampilan dan memperbaiki bugs ) Navbar Customise saya ini.
Untuk saat ini sampai di sini dulu. Terima Kasih dan sampai jumpa di materi sharing berikutnya. Salam Blogger. Oh ya, sampai lupa mengucapkan Terima Kasih banyak kepada Mas Doyok yang sudah mensupport saya, Om Agus Ramadhani dan Kang Rohman yang sudah menginspirasi saya. Dan Tak lupa pada Wibiya.
Semoga berguna. !
keren sob tak cobanya