Panduan Cara Membuat Menu Horizontal di Blog

Panduan Cara Membuat Menu Horizontal di Blog Salah satu aspek penting yang tidak boleh ditinggalkan dalam mendesain blog adalah adanya menu horizontal. Menu tersebut bisa memudahkan pemirsa blog untuk menjelajahi web/blog kita, selain bisa juga mempercantik tampilan sebuah blog/web. Untuk membuat menu navigasi tersebut ternyata cukup sulit untuk dilakukan, terutama Blogger pemula seperti saya. Namun, setelah saya membaca berbagai referensi dan melakukan uji coba untuk mempraktekkannya, akhirnya berhasil bisa membuatnya.

Tentu saja, pengalaman yang saya miliki tersebut rasa-rasanya belum lengkap bila tidak saya informasikan kepada anda yang masih baru belajar di dunia blogging. Dengan bagitu, harapannya blog anda bisa terlihat rapi dan menarik karena terdapat adanya menu horizontal yang terpasang di blog anda.

Berikut saya jelaskan langkah-langkah yang bisa anda lakukan untuk membuat menu horizontal di blog anda. Ada 2 cara yang bisa anda lakukan. Tentu, itu tergantung dari template apa yang anda pasang di blog anda.

Panduan Cara Membuat Menu Horizontal di Blog

Cara Pertama
Jika blog anda menggunakan template sederhana yang tidak perlu merubah/edit template dalam membuat menu, misalnya seperti template Trick Collection SEO Friendly Blogger Template, berikut adalah cara membuatnya:
1. Silahkan log in ke akun Blogger anda. Silahkan masuk ke Dashboard dan kemudian pilih menu Pages/Halaman.
Panduan Cara Membuat Menu Horizontal di Blog
2. Berikutnya silahkan klik tombol New Page/Halaman Baru, maka ada 2 pilihan.
cara bikin menu navigasi di blog
Keterangan:
Nomor 1 adalah halaman kosong
Nomor 2 adalah alamat url web/blog

3. Jika anda memilih nomor 1 yakni halaman kosong, maka anda harus membuat posting baru. Contohnya seperti screenshoot berikut ini
cara buat page halaman statis di blogger
Keterangan:
Nomor 1 silahkan tulis Judul Menu/Halaman, misalnya "About" Contact Us" atau yang lainnya
Nomor 2 silahkan tulis sesuai dengan keinginan anda

Kemudian silahkan klik Publikasikan.

4. Jika anda memilih nomor 2 yakni alamat web/blog, maka anda hanya perlu mengisi beberapa kolom berikut ini
cara bikin halaman menu di blogspot
Keterangan:
Nomor 1 silahkan diisi dengan Judul Menu
Nomor 2 diisi dengan url label/kategori blog anda

Berikutnya silahkan klik tombol Simpan/Save

Apabila sudah selesai, maka tampilan menu horizontal blog anda akan seperti screenshoot berikut ini
cara buat menu di blog tanpa edit template HTML
Cara Kedua
Jika template anda menggunakan template yang mengharuskan meng-edit template dalam pembuatan menu, seperti template Putih Biru Blogger Template, maka cara untuk membuat menu horizontal adalah sebagai berikut:
1. Silahkan sign in ke Blogger. Silahkan masuk ke Dashboard. Pilih menu Template.
langkah langkah membuat menu keren di blog
2. Silahkan klik tombol Edit HTML
cara edit template untuk membuat menu navigasi di blogspot
3. Setelah anda masuk pada Edit HTML, silahkan cari kode seperti di berikut ini. Untuk mencarinya, silahkan tekan Control F pada keyboard komputer anda dan masukkan kode tersebut, dan tekan Enter

<div CLASS='bar'>
<ul id='dropdown'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a HREF='http://ririnx.blogspot.com/search/label/Kecantikan'>Kecantikan</a></li>
<li><a HREF='http://ririnx.blogspot.com/search/label/Resep%20Masakan'>Resep Masakan</a></li>
<li><a HREF='http://ririnx.blogspot.com/search/label/Life%20Style'>Life Style</a></li>

Keterangan:
Kode warna merah silahkan diganti dengan url label/kategori blog anda
Kode warna biru silahkan ganti dengan nama menu
menu drop down keren di blog website
Langkah selanjutnya adalah silahkan klik tombol Simpan Template/Save Template

Apabila sudah selesai, maka tampilan menu horizontal blog anda akan seperti screenshoot berikut ini
contoh menu navigasi sederhana di blog dicuekin
Catatan:
Sebelum anda membuat menu horizontal ini, pastikan bahwa seluruh postingan anda sudah diberi label/kategori. Hal tersebut dimaksudkan agar proses pembuatan menu horizontal bisa dilakukan dengan mudah.

Demikian informasi yang dapat saya sampaikan untuk anda tentang Panduan Cara Membuat Menu Horizontal di Blog. Semoga dapat bermanfaat dan terimakasih atas atensinya.
Share artikel ke: Facebook Twitter Google+

37 komentar:

Anonymous said...

*sedang mencoba memahami.

HP Yitno said...

kalau menu horizontal, wajib bagiku sob.

Kang Ucup said...

dulu saya juga mengalami kesulitan dalam pembuatan menu bar, khususnya menu horisontal. saya yakin blogger pemula akan sangat terbantu dengan hadirnya artikel seperti ini :)

Unknown said...

Baru tahu mbak rin cara buatnya, saya kan cuma terima jadi hasil kreatifitas org. hehehe

lang lang blog said...

cara yang ke dua belum pernah saya gunakan mbak, sepertinya lebih ribet

Daniel Erick said...

yang ke 2 akan saya coba, lumayan dapat ilmu baru.. :D

Thanks mbak

Unknown said...

Menu Horizontal memang wajib berada dalam blog sob, tujuannya agar memudahkan para pengunjung dalam mengakses menu menu dalam blog kita

Anonymous said...

memang benar, pertama kali saya blogging, sempat kesulitan membuat menu horizontal, apalagi saya ingin menunya di atas header, sampai puyeng kepala saya :D

Claresta said...

terima kasih sharingnya yg sangat jelas mbak,,, sekarang saya jadi tahu cara membuat menu horizontal ^_^
salam cemerlang! :)

Unknown said...

Keren ....

Unknown said...

baru tau nih cuma di cara ririn doang :D

Anonymous said...

kodenya kok gak sekalian di lengkapi mbak.. hehe

Hariyanto Wijoyo said...

aku juga mau coba menggunakan menu horizontal ach... :-)

Wahyu Eka Prasetiyarini said...

Mas Kolong, gimana mas sudah paham belum? pasti sulit dipahami ya? soalnya tulisan saya jelek hehehe :D

Mas Yitno, iya benar mas menu horizontal memang harus ada di blog. Untuk memudahkan pemirsa blog kita :)

Kang Ucup, wah ternyata kita mempunyai pengalaman yang sama ya kang hehehe :D Mudah-mudahan tutorial ini bisa bermanfaat ya :)

Mas Hasby, wah enak banget mas kalau terima jadi getu. Tapi kan kita nggak tahu proses nya. Jadi, kalau menurut saya mending buat sendiri aja, supaya dapat ilmu :)

Mas Thanjawa, iya betul itu mas. Cara nomor 2 memang agak rumit, soalnya harus edit template dan berhubungan dengan kode-kode HTML :)

Mas Daniel, iya sama-sama mas. Thanks atas kunjungannya ya :)

Mas Arie, betul itu mas. Eksistensi menu horizontal memang diperlukan bagi sebuah web/blog :)

Mas Jocker, wah pengalaman yang sangat berkesan ya mas. Tapi sekarang sudah bisa buat kan. Hehehe Blog anda sudah ada menu horizontal kayaknya :)

Mbak Indri, wah mbak indri sukanya merendah dech. Padahal aslinya sudah tahu kan? hehehe :D

Mas Antarez, biasa aja kok mas nggak keren-keren amat :D :P

Mas Isnan, hehehe thanks mas sudah singgah kemari :)

Mas Andes, yang mana mas kodenya yang belum lengkap? hmmm :)

Pak Hariyanto, iya silahkan dicoba pak. Siapa tahu cocok :)

Yanuar Catur said...

Pengen nyoba mbakkk, tp aq kok agak bingung yah.. Ntar deh pelan2..

Wahyu Eka Prasetiyarini said...

Nanti kalau ada yang bingung, kita diskusikan bersama mas. Saya juga masih belajar buat menu horizontal :)

Unknown said...

Wah, patut dicoba ini mbak. Nice share

Wahyu Eka Prasetiyarini said...

Iya silahkan dicoba pak siapa tahu blog anda lebih cantik dengan adanya Menu Horizontal :)

Anonymous said...

kok banyak banget yang ngepost artikel menu horizontal blog minggu-minggu ini, saya tadi juga komen di blog lain dengan tema yang sama hehe...

Djangkaru Bumi said...

terimakasih atas sharingnya.dengan menu pastinya template akan lebih tampak profesional.

Wahyu Eka Prasetiyarini said...

Mas Anthonie, owh begitu ya mas. Mungkin saja pas kebetulan bareng tentang tutorial menu horizontal blog hhehehe :D

Pak Djangkaru, yang tampak profesional bukan template nya pak, tapi blog nya hehehe :D

Wahyu Eka Prasetiyarini said...

Mas Arie Gondes, mohon maaf nggak bisa berkunjung balik soalnya loading blog anda lama banget. Saya sudah hampir 1 jam menunggu loading, tapi blog anda belum terbuka juga :)

Mas Andes said...

tuh tag pembuka <div class='bar'> dan <ul id='dropdown'> gak sekalian dikasih tag penutup mbak :D

Wahyu Eka Prasetiyarini said...

Owh jadi kurang kode nya ya mas. Wah terimakasih banyak ya sudah menambahkan. Terus terang saya nggak begitu paham sama bahasa script :)

Asep Haryono said...

Sudah saya praktekan tips and tutorial di sini.
Keren keren. Mantafsss. Bertambah satu lagi ketidak tauan ku hiheiheiee.
Terima Kasih sudah berbagi :)

Wahyu Eka Prasetiyarini said...

Terimakasih banyak pak atas apresiasinya. Kita sama-sama belajar di dunia blogging. Anda sudah senior. Dan saya masih junior. Jadi ilmu saya masih sedikit :)

Mizz Aiza said...

boleh diletak banyak tajuk di menu itu.. dulu saya pernah mencuba, tetapi tidak jadi.. hehe..

Wahyu Eka Prasetiyarini said...

Iya betul itu miss. Jadi blog kita kalau dipasang menu horizontal ini, nantinya bisa terlihat keren dan profesional getu loh :D

hgunawan said...

Terimakasih sudah berbagi. Sangat bermanfaat bagi pemula seperti saya.

Wahyu Eka Prasetiyarini said...

sama-sama mas. saya juga masih pemula kok ^^
sampai saat ini saya masih belajar tentang membuat menu horizonatl di blog ^^

Anonymous said...

Nyimak lagi nih Mbak Ririn,. Enakan yah Mbak dengan
Menu Horizontal,..? page halaman kita jadi ada di atas
homepage .. di lanjut terus Mbak, lain waktu reques

Cara bikin menu Horizontal Version Genit ada gak yah,,? hhhh

Wahyu Eka Prasetiyarini said...

Wah saya nggak bisa membuat menu navigasi seperti itu mas wkwkwkwk :D

Sepertinya mas karis jago banget nich bikin menu yang genit-genit hehehe :D

StiliR said...

sangat membantu ....trims postingannya.

Wahyu Eka Prasetiyarini said...

Sama-sama mas stilir :) terimakasih juga atas kunjungannya :)

pulsaekstra said...

Makasih Mbah dah berbagi...
Salam Sukses.

Wahyu Eka Prasetiyarini said...

Iya sama-sama mas pulsa. Thanks ya atas support nya :)

admin said...

Mbak wahyu....maksih salam kenal ya.....semoga makin sukses, aamiin

Post a Comment