Cara Membuat Menu Horizontal Pada Blog

Unknown

Menu, Navigate, Newbie, Widget

Belum ada komentar

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtB3gWX2XTNXM70bN9TT-2DoloasluKgS4zpfMAJqwHP9fOI4kxk8NnANEOMGR2fLwDbKcQkmovPh731t5KdCZLF7PMK_-zws261_1iQhiQ3FGNVhKxp56dbBaLrrPSofsiZwzTz67VUc/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/AVvXsEjMwNmBJxTmDvpB_U1LWz30iO9PGmAUZm7kT7ek0StlOA946mkfLBjeBaMYzddtRbsU_1ACJdw7gp_ti2q-2hj2ZOzXUEkabPPkSYzQCukWlBVdyDNYRyhiitJ589rWxabkvwPeSRvYYfk/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 :

HomeMenu 1Menu 2Menu 3Menu 4Menu 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ChEI21dhAoQpiGKrXpVGuVuJLiB2QkkgeWspSpdoEHC5fQ3d5d-AOeE-YuGS47R0N0oPNIeQecBxpDto1_f6NIPCs89e8OS4oxSgXSoDV2ZVd9dp8JVodwWwQSGOs1S86-8YjvKvtEI/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/AVvXsEg9cirt5oqpgAvBEFaBAxLn9w6y1pc_C36Q_DgzN6ykVpSQ9xoHMIAYbRv_atG8HBuL3X7G_HIINb0aPXun8_BBJP1assxTrj7kQ3FK2XSmaEGEAMYaym5DilFu0IDMpkKGWJhFPCwempQ/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