Blogger.Com Navbar Customisation

Category : Labels: , , , , , , ,

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.senyum

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 - anganstar 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.senyum

Ok, kenyitkalau 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;
}

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.gelakguling ).

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.. hehesengihnampakgigi
-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.sembah

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.sengihnampakgigi

Semoga berguna. !doasengihnampakgigiencempeace

18 Komentar:

keren sob tak cobanya

wah keren sobt....... ntar aku coba coba deh.. makasi ya...

keren2... tp aq masih tetep seneng kalau navbar blog aq ngilang alias sembunyi

wAH keren juga hasil modif blogger navbar nya ya mas..

keep sharing bro
ksh taukalo ada postig baru ya

nanti saya coba tk blog satunya
thx sobat

@ Semuanya : Terima kasih semua.. :)

wow.. begitu ya sob..
makasih banget infho nya ya..

thanks sob atas kunjungan nya..
keep posting sob..!

wah keren sob, trims infonya

Yoi. sangat kreatif dan menarik..
sekedar menambahkan bahwa efek rounded corner-nya hanya akan terlihat jika user menggunakan Modzilla Firefox saja..
lantas bagaimana dengan user yg menggunakan Chrome & safari (webkit).. bisa ditambahkan css3 berikut ini:

-webkit-border-radius:10px;

tambahkan juga:

-khtml-border-radius:10px;

untuk mengakomodir pengguna konqueror..

Oh ya, selain itu, ada baiknya jika diberi atribut:

z-index:10;

agar content navbar tidak terhalangi konten lainnya....

dan menurut saya jika dipadu dengan efek opacity pasti akan lebih menarik lagi...
heheh terimakasih...
:))

@ Imoel : Sama - sama sobat :D
@ Ipenk : Siiip juga :D
@ Dek Yusron : wkwkwkwkwk :))
@ Firex : Ya..sama - sama
@ Hendri : Makasih
@ Mapuc : Siip ..makasih..
@ Ardianzz : Wah..terima kasih sudah dibantu.. :D

tipsnya menarik, emng top lah

Oh.... sob blog tutorial toh... ehm sob...boleh gak ngasih saran...gimana kalo themesnya pilih yang putih aja backgroundnya..jadi pembaca lebih nyaman bacanya.. just saran aja sob...

keep posting juga sob.. salam kenal ya sob

@ Narsis : Thanks Sob :D
@ Khalid Abdullah : Untuk sementara ini masih belum bisa.. soalnya kalau ganti template saya harus mengatur ulang content. :)

Post a Comment