Memasang Menu Navigasi Horizontal di Blogger
Tampilan blog terasa kurang kalau tidak ada menu horizontal maupun vertikal ya.. Disamping navbar juga berperan penting memberikan gambaran peta lokasi kategori-kategori blog kepada pengunjung agar tidak kebingungan mencari sesuatu di blog kita. Kali ini, sesuai dengan permintaan Paxdhe Kawat tentang cara bikin menu custom di blogger, Kang Mis akan mencoba menjelaskan pengalaman saya sendiri bagaimana caranya memasang menu horizontal di blogger, sebelah atas mendatar di bawah header.
Pertama persiapkan semua alat tempur, bom, peluru kendali dan semua missil yang akan digunakan untuk ini. Setelah itu nanti kita akan menyambungkan kabel detonator untuk meledakkan Blog kita. hahaha... Bercanda...
Okey dech...
- Persiapkan Template yang akan kita gunakan. Pilih tema yang benar-benar cocok dengan mood. Jika belum cocok silahkan mencarinya lagi sampai bener-bener yakin.
- Download Navbar (navigation bar) Horizontal. Silahkan cari sendiri di internet, sampelnya banyak kok. Cari dengan kata kunci "cool horizontal navbar" atau "sampel navbar keren" biasanya file download ada dalam format .rar atau zip.
- Download dan install Notepad ++ untuk mengedit script template tersebut. Notepad ++ ini yang nantinya akan digunakan untuk menyambungkan menu dengan template. Kenapa tidak pakai notepada saja. Terserah, pakai saja notepad bawaan windows jika kamu mau templatemu kocar-kacir :). Notepad ++ ini saya gunakan karena secara default mendeteksi hampir semua bahasa pemrograman, Jadi nanti setiap tag standar maupun tag blogger bisa terbaca dengan jelas. Notepad ++ bisa anda download di SINI, Pilih yang terbaru. Karena menurut pengalaman saya yang lebih baru memiliki fitur yang lebih baik.
Sudah... Berarti kita sudah memiliki 3 komponen itu. File2 warna Kuning itu adalah Navbar yang kita download tadi, Hijau adalah templat, dan Coklat adalah Notepad ++.
Kita mulai..
Tes Template, dalam contoh saya menggunakan temblog_kangmis,dengan memasangkan di dasboard Blogger.com. . Paste template baru di situ dan Lihat blog/View Blog. Lebih lanjut silahkan dibaca tutor berikut.
Dengan masuk ke Template dan Pilih Edit HTML
Nanti akan ada Warning yang isinya. Hey kamu,,,, Ngedit HTML secara langsung bisa menyebabkan kanker, serangan jantung dan gangguan kehamilan dan janin. Pilih saja Proceed. Karena kita sudah PD dengan apa yang akan kita lakukan. Yakin aja kalu anda sudah jago banget di bidang scripting.. hahaha....
Setelah itu nanti bakal keluar Popoup yang isinya Script Template Blogger kita.
Pilih area edit dan CTRL + A (pilih semua), Terus CTRL + C (mengkopi skrip). Kemudia buka notepad ++ di Program file -> All Program -> Notepad ++ . Setelah terbuka tekan CTRL + N (Buka halaman baru), CTRL + V (untuk menempelkan Skrip yang tadi kita Copy. Sudah selesai dengan proses Kontral-kontrolnya. Dan sementara skrip sudah bisa dibaca dengan mudah.
Sekarang kita cari File Navbar yang barusan kita download. Jika navbar di archive silahkan anda ekstract dulu dengan program Winrar. Lalu temukan file HTML dalam folder yang iconnya Mozilla Firefox. Klik Kanan dan Buka,, Jika navbar itu bekerja dengan benar maka bersyukurlah.
Selanjutnya kita gabungkan Navbar dengan Template blogger tersebut.
Buka Explore, cari file2 yang sudah kita persiapkan tadi. Klik kanan index.html (file navbar) dan juga template blogger dan pilih edit with notepad ++,
Blok semua file dalam tag <header> kemudia klik kanan Copy.
dan Pastekan File tersebut ke dalam file temblog_kangmis (sample saja) di sebelah bawah </div> milik div Header Template blog.
Sekarang tinggal CSS'nya. Buka File senjata kita tadi di Explore. cari Folder CSS. Klik kanan Open with Notepad ++ dan Copy. Buka lagi Template Blog, Cari Kode ]]></b:skin> dan pastekan CSS tadi tepat di atasnya kemudia SAVE pekerjaan tersebut.
Langkah terakhir adalah Pastekan file template yang telah kita edit di Dasboard Blogger.
Lihat hasilnya..
Oh ya.. untuk menghilangkan Bullet anda bisa menambahkan atribut style='list-style: none;' di dalam tag <ul> dibawah <div> navbar.
Jangan lupa mengedit Menu-menu sesuai dengan label yang anda miliki.
Selamat berkreasi. Maaf ya jika penjelasan terlalu ruwet. hehehe...