Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Menu Navigasi Horisontal Blog

Menu Navigasi Horisontal Blog Cara Membuat Menu Navigasi Horisontal Blog – kalau pada tutorial sebelumnya mungkin  mengenai mega menu drop down terlalu ribet maka sekarang kita membahas yang ringan saja, menu horisontal sederhana dengan kode CSS yang tidak terlalu banyak maka membuat menu ini tidak terlalu rumit seperti mega menu yang mempunyai banyak sub menu. Menu navigasi horisontal dengan CSS yang sederhana ini terdapat dua pilihan menu beserta demo yang ada dibawah agar tidak penasaran sebelum memasang mungkin bisa terlebih dahulu dengan melihat demonya. Tampilan yang ramping dan masih sederhana serta source kode yang simple bisa menjadi tahap dasar untuk permulaan belajar, khususnya saya pribadi dan pemula lainnya untuk melangkah lebih jauh lagi dalam belajar mengolah kode dan mempercantik tampilan blog. Untuk penjelasan lebih lanjut, maka berikut tutorial untuk Cara Membuat Menu Navigasi Horisontal Blog.

1. Login ke akun blogger.
2. Masuk menu Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin> kemudian Simpan Template.
div.redmenu{ background:#9A0000 url(https://lh3.googleusercontent.com/-zkvIc1a5Oqc/Uiv9v_LY_LI/AAAAAAAAGG0/_pQzW04tfXM/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://lh3.googleusercontent.com/-V421OopKYKk/Uiv9wFXb3QI/AAAAAAAAGG8/elEEpjz9NRg/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; }
div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }
4. Lalu langkah selanjutnya untuk menampilkan Menu Navigasi Horisontal di Blog caranya copy kode berikut ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut didalamnya.
<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='http://mas-andes.blogspot.com'>Menu 1</a>
<a href='http://mas-andes.blogspot.com'>Menu 2</a>
<a href='http://mas-andes.blogspot.com'>Menu 3</a>
<a href='http://mas-andes.blogspot.com'>Menu 4</a>
<a href='http://mas-andes.blogspot.com'>Menu 5</a>
<a class="end">&nbsp;</a>
</div>
Keterangan:
Ganti http://mas-andes.blogspot.com dengan URL label blog anda.

5. Langkah terakhir klik Simpan, maka selesai dan seperti ini nanti hasilnya dari Cara Membuat Menu Navigasi Horisontal Blog.


Atau apabila ingin menggunakan Menu Navigasi Horisontal Blog dengan warna lain seperti yang ada dibawah, maka langkah-langkah penerapannya seperti pada yang sudah tertera di atas. Berikut ini live demo beserta source kode menu navigasi horisontal blog.


CSS*
#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://lh6.googleusercontent.com/-7AqqOE7ofpk/Ui2rcZ8HbVI/AAAAAAAAGHg/JKehF4xo7iM/h120/bluebg.gif) repeat-x; }
#menublues{ font-size:0; } 
#menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menublues a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://lh5.googleusercontent.com/-wr04E0lX-Iw/Ui2rcMUXtAI/AAAAAAAAGHs/4pmDipZWAgw/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; }
#menublues a.end{ width:2px; padding-left:0;padding-right:0; }
HTML*
<div id='bluemenu'>
<div id='menublues'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>



CSS*
#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://lh4.googleusercontent.com/-84N8in2YMCc/UjS0YrTZQ7I/AAAAAAAAGJc/fWb8wN23bAg/h120/greenbg.gif) repeat-x; }
#menugreen{ font-size:0; }
#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://lh5.googleusercontent.com/-OZYpaCR_6Ho/UjS0YsW2NhI/AAAAAAAAGJY/F0zOGRUg2nA/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }
HTML*
<div id='greenmenu'>
<div id='menugreen'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>

Berlangganan artikel via email

156 Response to "Cara Membuat Menu Navigasi Horisontal Blog"

manteb mas efek hovernya, warna2nya juga keren enak dipandang

Balas

widihhh.. hover lagi yah,, lanjutkan mas :)

Balas

wah keren mas, saya suka warnanya keliahatan menarik dan elegan, kalau mau warna hijau gimana mas? Makasih buat tutorialnya :)

Balas

Izin simak simak Kang Mas..? enakan yah keren menu nya
Coba pasang di blog saya, tapi sudah valid html 5 yah Mas?
Terima kasih lagi atas Trik menu navigasinya...Mas Andes

Balas

bagus sekali mas tampilan menunya :)

Balas

wuihh lengkapp mas.. mantapp...

Balas

Kereen massss menu dropdownya..

Balas

Saya suka yg warnanya biru...keliat kalem soale...kayak saya....hehe

Balas

Warna ijo ndak di jual mas..kan udah punya mas adminnya :)

Balas

Tutorial menu horizontal keren. Mudah2an kalau diterapkan tidak menambah berat loading blog. Terima kasih.

Balas

wih keren, makasih gan udah share

Balas

hehe... yang hijau milik pribadi yah :)

Balas

kalau bahasa inggrisnya cool yah mas hehe...

Balas

Keren-keren ni menu navigasi nya, ijin praktek sob

Balas

Wahh ini tamu yang datang sudah pada ngantri
tapi yang punya rumah nya gak nongol2 entah kemana?
Saya mau yang Biru tursy saja Mas..? saol nya sejuk,
Kalem, lembut dan bersahabt hhh muji sendiri gkgkgkgk
Mas Andes...... kamana nya..?

Balas

keren tuh yag warna Hijau...

Balas

Wah keren juga nich Menu Navigasinya. Bisa berwarna-warni yang cukup menarik. Bisa buat blog/web jadi lebih keren pastinya dengan menu navigasi horizontal buatan Mas Andes. Tapi caranya yang cukup rumit, sehingga membuat saya jadi pusing hehehe :D
Thanks master atas ilmunya :)

Balas

Pandangan pertamax... ya mas :)

Balas

Sama punyanya Hulk mas..hehe :)

Balas

Kalo bahasa okem nya kece ..dong mas hehe :)

Balas

Lagi main gaple mas di belakang..kurang satu nih...mau ikutan..hehe :)

Balas

apapun pandangannya minumnya teh botol orson :)

Balas

kayaknya Hulk cuma punya kolor ijo deh :D

Balas

oh mangga atuh kang Karrysta, silahken sudah valid tenang aja :)

Balas

bukan mas, jelek sekali tampilan menunya.. kalo bagus sekali adminnya saya baru setuju :) ngahaha

Balas

udah lengkap yah mas :) padahal belom tak kasih telor deh..

Balas

kan gak pake dropdown mas..

Balas

kalo bahasa jawanya manis kincoo yah mas :D heuheu

Balas

hehe iya kang Karrysta lagi di rumah sakit nungguin ibu tercinta :) minta do'anya yah kang biar diberi kesehatan.
hehe absen dulu mas bud gaplenya :)

Balas

biar lebih mudah langsung pasang ke widget tanpa edit HTML juga bisa kok mbak :) tinggal tambahin tag <style> untuk pembuka CSS dan tag </style> sebagai penutup CSS.

<style>
Taruh kode CSS disini
</style>
Taruh kode HTML disini


sehingga seperti ini, misal untuk yang warna hijau:

<style>
#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://lh4.googleusercontent.com/-84N8in2YMCc/UjS0YrTZQ7I/AAAAAAAAGJc/fWb8wN23bAg/h120/greenbg.gif) repeat-x; }
#menugreen{ font-size:0; }
#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menugreen a{ text-align: center; display: inline-block; font: normal 12px Arial; background: url('https://lh5.googleusercontent.com/-OZYpaCR_6Ho/UjS0YsW2NhI/AAAAAAAAGJY/F0zOGRUg2nA/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }
</style>

<div id='greenmenu'>
<div id='menugreen'>
<ul>
<li><a expr:href='data:blog.homepageUrl' class='current'>Home</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 1</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 2</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 3</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
<li><a href='http://mas-andes.blogspot.com'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>

Balas

tutorialnya keren masbero, keep sharing :)

Balas

biasa aja pak uda, terimakasih kunjungannya :)

Balas

bagus sekai adminnya..heheh

Balas

no coment mas... hehee, save dulu aja dech, mungkin nanti saya butuh ini,... nice post,, terima kasih

Balas

bahasa cinanya wong ve hong ya...

Balas

moga cepet sembuh ya mas ibunya

Balas

Tampilan dan Warnanya Enak Sekali Dipandang Gan ^_^
Makasiih yah gan Udahh Sharing (Y)

Owhh Iyaa gann Saya Mau nanyaa Nihh Tapi Maap Yahh Klo Pertanyaan Saya ini Keluar Dari Jalur Postingan agan Hehe
Cara Menambahkan Tombol Back Home Dan Next Pada Blog Gimana Yahh gan ?? :D

Saya Bingung Nihh Gan Soalnya Saya Udah Cari Sana Sini Tutorialnya Tapi Kagak ada yang Mempan Ama Blog saya {Tampilan Back Home dan Nextnya Kagak Nampil")

Balas

buka edit html template cari kode:


<div class='blog-pager' id='blog-pager'>
sampai....
</div>


hapus kode tersebut, ganti dengan kode ini:


<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Newer post</a>
</div>
</b:if>

<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Older post</a>
</div>
</b:if>

<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>

<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>

</div>

Balas

amin,,,, moga cpat sembuh mas

Balas

Hehehe iya mbak sama, saya juga mumet lihat kode-kode script. Memang sepertinya saya nggak bakat utak-atik kode CSS hikz :D

Btw terimakasih banyak atas penjelasannya :)

Balas

jangan sering-sering nge-save mas. Nanti kulkas nya penuh lho wkwkwk :D

Balas

tidak hanya keren lagi, tapi cakep banget, seperti admin nya :)

Balas

Mungkin habis lihat menu drop down di tetangga sebelah mas wkwkwk :D

Balas

wah, manteb mas... tapi warnanya itu tuh, ndak ada yang senada dengan warna belog saya... coklat gitu loh...

Balas

Hmmm sbnrnya ada masalah dengan blogku terkait menu2 beginian dengan menu top yg fixed itu... yah kapan2 sy harus konsultasi k sini..

Balas

yang komen kan mbak?

Balas

iya pengalaman saya, kulkas saya juga dipake ngesave terus-menerus jadinya jebol deh...

Balas

waduh saya kok malah pusing ya mas lihat kode2 sebanyak itu hehe

Balas

Oooh Kira,an lagi Kemana Mas Andes..? Kata Mas Budi
Katanya maen Gaple,,..eeeh gak Tau nya Ibunda Mas Andes
Lagi Sakit,, maaf aja yah Mas, Semoga Ibunda nya lekas
Sembuh ya Mas..? (amien)

Balas

Oke deh Mas, Pasti kalau script postingan Mas Andes
Sudah pasti, Valid Html5-Css3 terima kasih atas artikelnya
Yah Mas,. semangat terus ,...dan sukses.

Balas

oke bang brow.. sukses dipasang di blog ane.. thanks yah

Balas

Pendapat Premium sementara Naik.
Sementara Teh Botol kehabisan stok
Ganti dulu dengan wedang Bajigur campur semangka hhahah

Balas

Kalau Orson nanti bisa-bisa Maboknya Mundur Mas Andes.hhhh

Balas

Keren tampilan menu navigasinya Mas Andes
elegan dan menarik juga sedap di pandang Mata
Cantik, ayu, geulis, cakep dan sagala-gala pokona mah hhh

Balas

gimana carax agar pnjg menux bisa sama maz, uda saya coba utak atik tp gak bisa pas, lbih dkit, ne tuk lbh jlsx blog saya http://moeclazh.blogspot.com/
makasi sblumx maz....,,

Balas

fungsinya kok gk ada kk...?

Balas

salam kenal mas, manteb tutorialnya, saya sedikit nyontek nih, masih belajar bikin blog mohon bimbinganna

Balas

bang, gimana posting artikel di tiap menu blog ?
tolong dong

Balas

kan di atas udah dijelaskan mas, Ganti http://mas-andes.blogspot.com dengan URL label blog. ato langsung dengan link artikel juga boleh tapi repot kalo memasukan link satu per satu

Balas

Mantap Gan...makasih dah berbagi ni...
Salam Sukses

Balas

keren gan..cara di bikinin drop down 1 menu gimana ya caranya, jgn seperti di posting sebelumnya yg megga drop down, terlalu kebanyakan jd pusing, hehehe
thank untuk pencerahanya

Balas

Makasih gan sangat membantu...

Balas

thank you very big big http://www.khmerleadership.org/

Balas

alhamdulillah, setelah saya coba berhasil, hanya saja...... kok gak jadi horizontal ya, jadinya malah numpuk. Home, menu 2 dan menu 4 tersusun ke bawa, begitu juga dengan yang lainnya. mohon arahannya mas bro. thanks

Balas

pasangnya jangan di widget sidebar, tapi di widget bawah header biar tampilannya tidak menumpuk

Balas

keren
http://duniagame7.blogspot.com/

Balas

joosss lah, sip!

Balas

gan , maap ni ya gan sebelumnya , kalo warna hitam ada gak ya gan ? soalnya saya suka warna hitam nih gan , maaf sekali lagi kalau ngerepotin gan :) terima kasih

Balas

mohon balasannya gan

Balas

thanks mas artikelnya :)

Balas

tinggal di ganti aja mas warnanya, seluruh background ama border tinggal di sesuaikan

Balas

wah keren mas artikelnya
mau tanya mas, kalau udah di buat navigasinya trus buat ngarahin kehalaman yang mau dibuatkan konten gmn ya mas,saya bloger pemula mas mohon bantuannya : )
http://sumarnimusrifin.blogspot.co.at/p/tentang-saya.html

Balas

misalkan <a href='#'>Menu</a> ganti tanda # dengan link label dari masing2 halaman

Balas

bagus ce..
tapii ada cara yg mudah tanpa bermain coding seperti itu gan

Balas

ok terimakasih gan, ini sangat membantu dalam proses mengubah desain blog ane.
kunjungi blog ane gan..
bloganeukteungoh.blogspot.com

Balas

manthap
salam www.duniagame.info

Balas

boleh di coba ni...

Balas

gan mo nanya dong, kok tab dropdown saya ga bisa diklik ya? bisa kasih solusi?
ini link nya lilchanger.blogspot.com
thx gan...

Balas

atur pake CSS, bukan HTML doang

Balas

mas andez, kalau templatenya ndak original dari blogger kayaknya susah ya..aku baru aja down load templae dari b template. mau tak tambahin menu horisontal tapi pas mau edit html ternyata ndak ada kolom widget di bawah kolom judul. jadi ndak bisa nambah menu horisontal

Balas

ini blog saya http://puskeswanunggulan.blogspot.com/2013/08/informasi.html

Balas

sebenernya mudah saja mas kalo udah tau dasar kodenya, HTML bebas mau taruh dimana saja. langkah di atas hanya saya permudah karena setiap template tidak selalu memiliki kode yang sama. langkah point 4 bisa langsung taruh sekalian di dalam template. sebagai contoh bisa taruh dibawah kode <div id='wrapper'>

Balas

bisa secara detail mas?

Balas

misalkan pada blog saya di atas ada menu Template, berarti tanda # yang saya sebutkan itu gantilah dengan label template. contoh:http://mas-andes.blogspot.com/search/label/Template
jadinya seperti dibawah ini<a href='http://mas-andes.blogspot.com/search/label/Template'>Template</a>

saat akan memposting artikel kan pasti memasukan label terlebih dahulu, copy masing2 link label lalu taruh kedalam menu

Balas

thanks mas broo ... (Y)
bermanfaat ...

Balas

keren mas tampilannya..
kunjung balik https://pandamand.blogspot.com/

Balas

thanks, masbroo...!
Bod Bless You...

Balas

Mas, kok aku gk bisa di drop down menunya ?
caranya gimana ?

Balas

THNKS GAN,,
MAMPIR IA,,,
http://mcholieq.blogspot.com/

Balas

mass minta yang warna ungu donk......!!!!!!!!!!!!!

Balas

mas punya saya kenapa gak da ]]> di blok saya

Balas

Salam kenal Mas Andes, saya pemula... bener2 pemula. mo nanya wktu mengkonfigurasi HTML/java script setelah sy kopi ko ga bisa disimpen ya? mohon solusinya...

Balas

kalo tidak bisa disimpan dan tidak menampilkan peringatan apapun mungkin sekedar masalah koneksi

Balas

Terima kasih.. kapan2 dicoba dehh.. mau cari tutor cara buat menu yg vertikal (turun kebawah)..

jgn lupa kunbalnya yah >> rima-yunida.blogspot.com

Balas

TRIMA KASIH SANGAT MEMBANTU..... IJIN COPAS

Balas

mas bikin home nya gimana ya?
html home ku ditaruh dimana n gimana formatnya?yg lain sudah berhasil tinggal homenya yg blm bisa....krn blogku stelah tak klik ...masih keluar semua postinganku

Balas

bisa di perjelas maksudnya?
atau tinggalkan url blog juga boleh

Balas

mas kenapa menunya ga kelihatan besar fontnya dan tidak berwarna

Balas

Makasih sob berhasil saya terapkan ...

Balas

aku juga iya,ketika ngetik blogku.www....blogspot.com postingannya keluar semua termasuk postingan di home menu 1 sampai menu semua...gimana mas ya caranya biar ketika kita ngetik www.......blogspot.com keluarnya yg dihome nya aja...?

Balas

gan, cara mengisi artikel ke menunya masing-masing gimana ya?

Balas

xixi masih blum jadi saiaa

Balas

Wuich... buanyak kali kode-kodenya bos,... jadi bingung ????

Balas

mantep bro langsung coba nih visit juga ya www.webgumulan.blogspot.com

Balas

mantap gan tutorialnya nanti ane coba. thanks gans

Balas

muantap info nya

Balas

Bagus bnyak manfaat
Kunbal ditunggu
Bangdeniklender.blogspot.com

Balas
Komentar ini telah dihapus oleh pengarang.

Maaf mas.. komentarnya di hapus... bagusss mas artikel blog nya. gmn cara belajar yang efektif ya... makash

Balas

Sumpah Mas keren Banget Ente emang TOP... thanks ya tutorialnya

Balas

wah keren artikelnya gan
Bermanfaat banget
ditunggu artikel selanjutnya..

Balas

gan saya sudah coba kok setelah di simpan dan blog dilihat hasilnya masih berbentuk skrip aslinya dan muncul diatas judul blog,,apakah ada yang salah?maklum pemula gan belum tahu caranya..mohon bantuanya ,,thanks sebelumnya

Balas

gan saya sudah coba dan berhasil tp entah kenapa di paling atas blognya ada tulisan "div.redmenu{ background:#9A0000 url(https://lh3.googleusercontent.com/-zkvIc1a5Oqc/Uiv9v_LY_LI/AAAAAAAAGG0/_pQzW04tfXM/h120/bg1.gif); border:1px solid #000; font-size:0; } div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://lh3.googleusercontent.com/-V421OopKYKk/Uiv9wFXb3QI/AAAAAAAAGG8/elEEpjz9NRg/h108/bg.gif); color:#fff; text-decoration:none; font: bold 12px Arial; line-height: 32px; } div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; } div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }" cara ngilanginnya gimana ya?

Balas
Komentar ini telah dihapus oleh pengarang.

jika kode /b:skin> tdk bisa saya temukan, apakah saya bisa menambahkannya? jika bisa, dibagian mana? saya hanya bisa menemukan kode b:skin><![CDATA[/*

Balas

Mas blog mu keren banget

Balas

Terima kasih gan buat ilmunya,,,
Salam blogger

Balas

mantap mas. trus menambahkan sub menu, dan sub-sub menu nya gimana mas. saya copas yang merah ya mas.. he h eh e.. tolong di jelaskan mas buat sub menu dan sub-sub menu nya mas.. :D

Balas

Berhasil Mas, Terimakasih ^^

Balas

cuma coba bantu

masuk ke TATA LETAK dan edit java script nya
cari kode ini dan hapus
expr:href='data:blog.homepageUrl' class='current

dan ganti dengan href='alamat yg diinginkan'

Balas

Mantap banget gan

Kunjungan pertama di blog agan saya sudah terkesima :D

Balas

Kalau mau masukin lebih dari 1 link dalam menu gimana caranya mas?

Balas

Untuk menu navigasi dengan gambar icon home bagaimana gan caranya?

Balas

Setelah ubek2 blog akhirnya jadi juga mas bikin menu navigasinya,..mksih mas.Tapi masih kurang sempurna.Masih banyak yang harus dipelajari.
http://mediadigitaljepara.blogspot.com/

Balas

Terimakasih gan infonya sangat membantu, maaf ya numpang barangkali ada yg membutuhkan refill toner printer atau service printer bisa di tuju ke link ini http://www.refilltonerprinter.com/ http://serviceprinterblog.wordpress.com/ http://www.multitonerindo.com/

Balas

Boleh minta sarannya ga?kalau pengen nambah menu navigasi di menu navigasi yang sudah ada gmn yahh ?

Balas

Newbie,

salam blogger, nih mungkin kunjungan perdana buat ane gan,

thanks yah gan udah mau berbagi ilmu, n jngan lupa yah kunbalnya di blog ane, ane tnggu kdtngan ente oke

Balas

ijin nyoba ;) terima kasih banyak

Balas

Selamat malam,
Pak mohon bantuannya sblmnya,saya prnah copas data membuat menu horizontal di blog akan tetapi kode2nya ada di html saya tdk bisa dihapus adakah cara menghapus kode2 yg dicopas krn mw saya ganti dg kode yg bapak berikan
Mohon dicek ke www.ruangusahabunda.blogspot.com
Terima kasih

Balas

Terimakasih buat artikelnya, mantab sob, menambah pengetahuan, bermanfaat..

http://emangobattradisional.blogspot.com/

Balas

thanks buat tutornya gan,, sangat memabantu sekali.. http://goo.gl/Pt4u71

Balas

mantap, ..!!!
Boss gw naksir menu kaya blogmu bagi imunya donk.. :D

Balas

bro code nya kok ga ditemukan yaa?

Balas

nice info, cara ubah lebar sama tingginya gmana yaa?

Balas

terima kasih mas, sangat membantu buat saya yang pemula

Balas

media query nya mana mas dia tidak responsiv di mobile

Balas

ko di btemplate ga bisa ya saya coba ni kodenya gan?

Balas

Makasih Mas Andes bagus banget, langsung diterapkan, aku ijin sedot ya mas, salam kenal dari saya ( edipurwanto2.blogspot.com )

Balas

Makasih buat infonya!!
Sangat membantu,.
Tapi kalo mau membuat tab menu yang sub enunya ketika di sorot muncul ke horizontal, gimana ya?

Balas

waaa, terimakasih atas infonya
sangat membantu ^^

Balas

tak berhasil juga bikin label horizontal dinavigasinya... ntah apa nya yang salah,, istirahat dulu deh...ntar coba lagi..thank youu

Balas

Ijin coba kang salam kenal

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Menu Navigasi Horisontal Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode