Forum, Blogger, diskusi, ilmu, berbagi, blogging, sharing, ide, inspirasi Kamu Forum

Jumat, 01 Januari 2010

Cara Membuat Navigasi Menu


Menu navigasi berfungsi untuk meletakkan link ke salah satu postingan anda atau ke situs/blog lain. Screenshootnya seperti gambar diatas.

Menu navigasi ini bisa diletakkan di bawah header. Nah, tertarik untuk membuatnya? Ikuti langkah-langkah berikut.

Pertama-tama login ke Blogger, lalu klik Tata Letak lalu masuk ke submenu Edit HTML. Nah, buat backup dulu ya...

Kalau sudah buat backupnya, sekarang lakukan langkah-langkah berikut.

1. Cari kode berikut.
]]></b:skin>
2. Taruh kode berikut diatasnya.
/*--Navigasi Menu--*/
#navmenu {
height:auto;
margin:0;
width:580; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:black; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:yellow; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover {
background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:black; /* Warna teks saat kursor mouse berada di atasnya */
}
3. Lalu cari kode yang mirip kode berikut ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='C A Minor D Minor ke G ke C Lagi (Header)' type='Header'/>
</b:section>
</div>
4. Letakkan kode berikut dibawahnya.
<div id="navmenu">
<ul id="navmenu">
<li><a href="http://muhammadrizkifadillah.blogspot.com">Home</a></li>
<li><a href="http://allaboutmusicishere.blogspot.com">Info Musik</a></li>
<li><a href="http://beritaduniamaya.blogspot.com">Berita Dunia Maya</a></li>
<li><a href="http://siapayangpantas.blogspot.com">Belajar SEO</a></li>
</ul>
</div>
Tulisan http://muhammadrizkifadillah.blogspot.com adalah link menuju posting/blog/situs lain. Sedangkan tulisan Home adalah teks yang akan ditampilkan.

5. Lalu klik Simpan Template.

6. Liat blog anda. Berhasil? Kalau berhasil, selamat! Kalau gagal, coba lagi. Kalau bingung, ya komen dong dibawah... gak usah malu-malu.


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



9 komentar:

Ega Priatma mengatakan...

saya yg pertamaxxxx, trims sob infonya

JATIPURNO BLOG mengatakan...

follow aku balik

dapat duit mengatakan...

horeee ..jadi yg ke 3

tempat teraneh dan terunik didunia mengatakan...

nice sharing kawan...
banyak belajar nih dari ini blog

Herlan mengatakan...

Alhmdulillah brhasil... tapi qo di dlam header yaa..?? bkan di luar? Coba liat blog ini http://herlanndi.blogspot.com

ptc no sam mengatakan...

makasih infonya langsung di coba

Mbah Cyber mengatakan...

MANTAP NICH ARTIKELNYA............

Nur Rahmat Wahyuaji mengatakan...

halo, nama gw ajik gw tanya donk kog gag bisa ya di blog gw, mncul kata" kek begini:

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "b:skin" must be terminated by the matching end-tag "".

mohon pencrahannya

marawis mengatakan...

mantab brow!!!!!!!!!!!!

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.