Di kesempatan pagi hari ini saya mau memberikan tutorial gimana caranya untuk membuat Sub menu atau dengan kata lain "Menu Navigasi". Postingan saya ini terutama ditujukan bagi sobat blog yang baru mengenal blog dan khusus yang sudah masta mohon di bantu untuk mereview ya. Menu navigasi ini bisa dibilang sangat di perlukan selain berguna untuk memudahkan juga untuk mempercantik blog,menu navigasi memiliki fungsi yang sangat penting untuk menunjukkan apa isi suatu blog kita.
Untuk melihat gimana hasilnya sobat bisa melihat langsung pada blog saya ini. Baik langsung saya kita menuju langkah-langkahnya Cara membuat menu navigasi di blog .
1. Pertama kali sialahkan anda menuju blog anda dan login [blogger.com]
2. Jika sudah login sobat langsung menuju menu "Tamplate"
3. Lalu klick menu "Edit HTML" centang "Expand template widget"
4. Jika anda sudah sampai di sini silakan anda cari code ]]></b:skin> dan untuk memudahkan pencarian silahkan klick pada kolom HTML 1x dan tekan tombol F3 ata tekan CTRL + F.
copy dan paste kode di bawah ini tepat diatas kode ]]></b:skin>.
#NavbarMenu { background: #000; width: 400px; height: 10px;
font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color:
#fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px;
float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; }
#nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav
li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li
a:link, #nav li a:visited { background: #222222; height: 15px; color:
#fff; display: block; font-size: 11px; font-family: trebuchet ms, ;
text-transform: none; text-decoration: none; margin: 0; padding-top:6px;
padding-bottom:5px; padding-left:13px; padding-right:13px;
border-right: 1px solid #000; } #nav li a:hover, #nav li a:active
{background: #222222; color: #ffffff; margin: 0; padding-top:6px;
padding-bottom:5px; padding-left:13px; padding-right:13px;
text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li
a:visited { background: #ffffff; width: 150px; color: #222222;
font-size: 11px; font-family: trebuchet ms,; font-weight: normal;
text-transform: none; float: none; margin: 0; padding: 7px 10px; border:
1px solid #000; } #nav li li a:hover, #nav li li a:active { background:
#222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left;
padding: 0; } #nav li ul { z-index: 9999; position: absolute; left:
-999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a
{ width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav
li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav
li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover
ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul,
#nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover {
position: static; }5. Klik simpan template.
Jika sudah sampai pada tahap ini tinggal kita menentukan dimana kita akan meletakkan menu navbar ini dengan cara.
- Msilahkan sobat masuk pada menu "Tata letak"
- kemudian pilih "tambah gadget"
- Pilih "HTML/Javascript" kemudian letakkan atau paste kode dibawah ini
<div class='menuhorisontal'>
<ul id='nav'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Menu 2.1</a></li>
<li><a href='#'>Menu 2.2</a></li>
<li><a href='#'>Menu 2.3</a></li>
<li><a href='#'>Menu 2.4</a></li>
</ul></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Menu 5.1</a></li>
<li><a href='#'>Menu 5.2</a></li>
<li><a href='#'>Menu 5.3</a></li>
<li><a href='#'>Menu 5.4</a></li>
<li><a href='#'>Menu 5.5</a></li>
<li><a href='#'>Menu 5.6</a></li>
<li><a href='#'>Menu 5.7</a></li>
<li><a href='#'>Menu 5.8</a></li>
<li><a href='#'>Menu 5.9</a></li>
</ul></li>
<li><a href='#'>Menu 6</a>
<ul>
<li><a href='#'>Menu 6.1</a></li>
<li><a href='#'>Menu 6.2</a></li>
<li><a href='#'>Menu 6.3</a></li>
<li><a href='#'>Menu 6.4</a></li>
<li><a href='#'>Menu 6.5</a></li>
<li><a href='#'>Menu 6.6</a></li>
</ul></li>
<li><a href='#'>Menu 7</a></li><li><a href='http://ngeposta.blogspot.com'>Ngeposta</a></li>
</ul>
</div>- Terakhir silahkan klik simpan dan untuk melihat hasilnya silahkan klik "lihat blog"
Baiklah sampai akhir postingan saya kali ini mengenai cara membuat menu navigasi di blog . semoga postingan ini bermanfaat bagi kita semua
0 Comments