Tampilan blog terasa kurang kalau tidak ada hidangan horizontal maupun vertikal ya.. Disamping navbar juga berperan penting memperlihatkan citra peta lokasi kategori-kategori blog kepada pengunjung supaya tidak kebingungan mencari sesuatu di blog kita. Kali ini, sesuai dengan seruan Paxdhe Kawat ihwal cara bikin hidangan custom di blogger, akan mencoba menjelaskan pengalaman saya sendiri bagaimana caranya memasang hidangan horizontal di blogger, sebelah atas mendatar di bawah header.
Pertama persiapkan semua alat tempur, bom, peluru kendali dan semua missil yang akan dipakai 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 hingga 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 dipakai untuk menyambungkan hidangan dengan template. Kenapa tidak pakai notepada saja. Terserah, pakai saja notepad bawaan windows bila kau mau templatemu kocar-kacir :). Notepad ++ ini saya gunakan alasannya secara default mendeteksi hampir semua bahasa pemrograman, Kaprikornus nanti setiap tag standar maupun tag blogger dapat terbaca dengan jelas. Notepad ++ dapat anda download di SINI, Pilih yang terbaru. Karena berdasarkan pengalaman saya yang lebih gres mempunyai fitur yang lebih baik.
Sudah... Berarti kita sudah mempunyai 3 komponen itu. File2 warna Kuning itu yaitu Navbar yang kita download tadi, Hijau yaitu templat, dan Coklat yaitu Notepad ++.
Kita mulai..
Tes Template, dalam pola saya menggunakan temblog_kangmis,dengan memasangkan di dasboard Blogger.com. . Paste template gres 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 pribadi bisa mengakibatkan 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 hebat 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 dapat dibaca dengan mudah.
Sekarang kita cari File Navbar yang barusan kita download. Jika navbar di archive silahkan anda ekstract dulu dengan jadwal 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 sempurna di atasnya kemudia SAVE pekerjaan tersebut.
Langkah terakhir yaitu Pastekan file template yang telah kita edit di Dasboard Blogger.
Lihat hasilnya..
Oh ya.. untuk menghilangkan Bullet anda dapat 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 bila klarifikasi terlalu ruwet. hehehe...Sumber https://kangmis.blogspot.com/
