Cara Membuat Menu Navigasi Horisontal/ Horizontal Blog

Cara Membuat Menu Navigasi Horisontal/Horizontal 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTA1mL3UuV7Jv7F5pJSV3fmDDX8Zv8MQVJOU5uXCyBtM24Klpru5KqLEQewj7cIHSJARz99Ggs87oUA_y7ow0CTKhQ8J_gKF8o6HCDbAGuuzmhlYQrfdJGznfHp262kDpGCr-BV029U_4/h120/bg1.gif); border:1px solid #000; font-size:0; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdo0AySaz8L6fIygvmZAznT1vdAUjXDrg7ZXuQSDLUVtfeXb6NoNcT1Xq3VlzyuSyMakELWWzuqI9aG-mnvaMRz7A2Bv_9zTDfVDrWZ2_dB4n8TNonOpN4msv-WkaAcJfL5wS_5grLqC8/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://garlandtheme.blogspot.com/'>Menu 1</a>
<a href='http://garlandtheme.blogspot.com/'>Menu 2</a>
<a href='http://garlandtheme.blogspot.com/'>Menu 3</a>
<a href='http://garlandtheme.blogspot.com/'>Menu 4</a>
<a href='http://garlandtheme.blogspot.com/'>Menu 5</a>
<a class="end">&nbsp;</a>
</div>

Keterangan:
Ganti http://garlandtheme.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.

Home Menu 1 Menu 2 Menu 3 Menu 4 Menu 5  

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.

• Home
 
• Menu 1
 
• Menu 2
 
• Menu 3
 
• Menu 4
 
• Menu 5
 
•  

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2udEVS55K_nXn4z0ihXPJCcvTmADH-kqs5VJiQngc6-egx56AhnrSxOZ3Ba6ieizkjyOiJjv5lYznIFU-8gTb3zbwmNRout4eiuO6BRLF_HgFWieNrxE5bbqRvVe9MgKqxrLDNZcgE78/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://garlandtheme.blogspot.com/'>Menu 1</a></li>
<li><a href='http://garlandtheme.blogspot.com/'>Menu 2</a></li>
<li><a href='http://garlandtheme.blogspot.com/'>Menu 3</a></li>
<li><a href='http://garlandtheme.blogspot.com/'>Menu 4</a></li>
<li><a href='http://garlandtheme.blogspot.com/'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>

• Home
 
• Menu 1
 
• Menu 2
 
• Menu 3
 
• Menu 4
 
• Menu 5
 
•  

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh20RGfUHb58FgsfZW5RGgj_zWunafyhxfFQoxm9Vi1kopOgWJ-xqjGj7bPmyCEfrZ3_6ISt9MtlS3z1a6e9u5rGhWtbOD7Eo3FcDUuBCMSGzWNc6p8tmNZ_kM-W3uFpmLTJePz3qTJVBE/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://garlandtheme.blogspot.com/'>Menu 1</a></li>
<li><a href='http://garlandtheme.blogspot.com/'>Menu 2</a></li>
<li><a href='http://garlandtheme.blogspot.com/'>Menu 3</a></li>
<li><a href='http://garlandtheme.blogspot.com/'>Menu 4</a></li>
<li><a href='http://garlandtheme.blogspot.com/'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>