Cara Membuat Menu Horizontal Pada Blog

Cara Membuat Menu Horizontal Pada Blog - Dalam bahasan kita kali ini akan mengangkat topik Menu Navigasi yang sepertinya ini adalah elemen wajib yang harus ada di dalam sebuah web/blog . Nah , untuk permulaan , kali ini kita akan membuat menu Navigasi yang cukup sederhana . Ya , menu standar yang simpel namun elegan dan cantik .

Oke , mari kita pelajari cara membuat Menu Navigasi Untuk Blog kali ini .

Untuk langkah pertama yang kita siapkan adalah Css untuk membentuk Menu Horizontal itu sendiri .

Css :

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; }

Letakkan Css diatas tadi tepat diatas kode ]]></b:skin> pada Template . Gunakan Ctrl+f untuk mencari kode tersebut .

Selanjutnya adalah Tag HTML yang berfungsi untuk memanggil menu Navigasi Horizontal itu sendiri .

HTML :

<div class='redmenu'>
<a expr:href='data:blog.homepageUrl' class='current'>Home</a>
<a href='#'>Menu 1</a>
<a href='#'>Menu 2</a>
<a href='#'>Menu 3</a>
<a href='#'>Menu 4</a>
<a href='#'>Menu 5</a>
<a class="end">&nbsp;</a>
</div> 

Untuk memasang Tag HTML ini ada 2 cara , pertama bisa diletakkan di dalam template , atau opsi kedua yang juga lebih mudah adalah dengan memasangnya di dalam Widget .

Results :

Home Menu 1 Menu 2 Menu 3 Menu 4 Menu 5  

Atau anda tidak cocok dengan warnanya ? Disini masih ada warna yang lain kalau anda malas untuk mengeditnya sendiri .

Examp :

• 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://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='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a class='end'>&nbsp;</a></li>
</ul>
</div>
</div>

 Jika masih kurang cocok juga , silahkan edit di bagian Css nya .

Ganti tanda '#' dengan Link tujuan .
Sekian Tutorial singkat tentang Cara Membuat Menu Horizontal Pada Blog ini dan semoga bisa membantu .

resource : mas-andes.blogspot.com