Cara Mudah Membuat Menu Navigasi Blogger

Karena sebagian teman-teman ada yang menanyakan cara membuat menu navigasi di blogger atau blogspot, jadi artikel ini sengaja saya buat sesuai dengan janji saya untuk membantu kawan-kawan.

Untuk cara mudah membuat menu navigasi baik itu yang berbentuk Vertical (atas ke bawah) atau Horizontal (kiri ke kanan), sobat bisa memanfaatkan salah satu tool yang tersedia yang secara otomatis mengcreate scrip css serta html menu untuk di pasang pada blog sobat hanya cukup dengan beberapa ketikan dan klak klik saja. Untuk langkah-langkah pembuatan menu di blogger dengan menggunakan tool ini, silahkan disimak di bawah ini yah :

Langsung tuju ke tool otomatisnya di http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/, dan akan tampak form webnya seperti

Dari gambar step 1 di atas yang perlu dilakukan ialah mengisi data-data menu apa saja yang akan ditampilkan untuk contoh blog Komputer Teknologi ini saya membuat dua menu yaitu menu Home yang megarah ke urlhttp://meambo.blogspot.com/ dan menu Bisnis yang mengarah ke link labelhttp://meambo.blogspot.com/search/label/Bisnis

Jika sobat sekalian ingin menampilkan menu lebih dari dua cukup dengan mengklik Add Top Level Navigation Item, sedangkan jika ingin menambahkan Sub Level Menu dari salah satu Top Level Menu yang ada, cukup dengan mencentang kotak kecil (Check Box) pada This link contains sub-level navigation (optional),

Jika sudah lengkap lanjutkan ke step 2 dengan mengklik tombol I’m done, Show me the styles dan akan tampil form seperti gambar dibawah

Seperti pada gambar diatas tentukan menu yang akan dibuat apakah model Horizontal atau Vertical dan jangan lupa tentukan pula jenis style tampilannya yang berada pada kotak yang ber scroll. Jika sudah lanjutkan lagi dengan mengklik tombol Show me the markup, dan secara otomatis akan tampil form yang berisi kode css dan html yang diperlukan untuk mebuat menu diblogger.

Ambil kode css dan html tersebut dan simpan sementara misalnya di notepad.

Sekarang tugas yang perlu dilakukan yaitu ke tahap pemasangan kedua scrip yang telah diperoleh tadi ke template blog sobat dengan cara :

1. Login ke blogger.com menggunakan account sobat,
2. Pada halaman Daskbor, klik Tata Letak setelah itu pilih lagi Edit HTML,
3. Untuk jaga-jaga, sebelum mengedit sebaiknya backup dulu template dengan cara klik Download Template Lengkap, sekarang siap untuk modifikasi template,
4. Pada halaman Edit HTML jangan lupa centang kotak kecil (check Box) Expand Widget Templates,
5. Cari kode ]]></b:skin> pada template sobat, biar gampang nemunya, tekan Ctrl-f kemudian copy script ]]></b:skin> lalu paste di kotak find,
6. Jika sudah ketemu, copy scrip css yang tadi diperoleh tepat diatas kode ]]></b:skin>,
7. Jika sudah, cari lagi kode <div id='content-wrapper'>, beberapa template mungkin berbeda jadi cari yang mirip-mirip,
8. Jika sudah ketemu, copy scrip html yang tadi diperoleh tepat diatas kode <div id='content-wrapper'>,
9. Untuk melihat hasilnya, klik tombol Pratinjau, jika sudah puas dengan hasilnya silahhkan di save dengan cara mengklik pilihan Simpan Template.

Wah capek juga nih buat tutorial membuat menu navigasi blogger panjang banget, dari penjelasan yang ada saya rasa sudah cukup lengkap dan bisa dimengerti jika di simak baik-baik, namun jika ada sebagian kawan-kawan yang belum mengerti, jangan ragu untuk ditanyakan!.

Sekalian bagi yang belum pasang, untuk memudahkan pengunjung me navigasi tiap-tiap halaman diblog kita, bisa juga memasang Navigasi breadcrumbs seperti pada postingan saya sebelumnya di Pasang Navigasi Breadcrumb di blogger.

link : http://meambo.blogspot.com/2010/06/cara-mudah-membuat-menu-navigasi.html