Membuat Navigasi Top Menu Container - Navigasi top menu container adalah salah satu elemen yang tidak kalah penting dengan menu navigasi horizontal pada umumnya. Navigasi top menu container ini fungsinya sama dengan menu navigasi horizontal, yaitu sebagai media one click untuk menuju ke halaman inti dari sebuah blog seperti, home, about, contact, service, dll.
Navigasi top menu container ini sering kita jumpai di website/blog yang memiliki banyak menu utama. Untuk membuat navigasi top menu container ini silahkan bisa anda simak dan ikuti tutorial berikut ini!
1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".
3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".
4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!
/* Top Menu Container Ngeposta */
#topmenucontainer{
background-image: -webkit-gradient(linear, left top, left bottom, from(#D50B0B), to(#ff0000));
vertical-align: baseline;
z-index: 999;
line-height: 1.85em;
height:40px;
display:block;
width:100%;
padding:0 0 0 0;
font:13px oswald, Arial,Tahoma,Century gothic,verdana,sans-serif;
font-weight:normal;
}
#topmenu{
margin:0 auto;
padding:0 0;
height:40px;
overflow:hidden;
width:1000px
}
#topmenu ul{float:left;list-style:none;margin:0;padding:0 10px}
#topmenu li{float:left;list-style:none;margin:0;padding:0;font-weight: bold;}
#topmenu li a,#topmenu li a:link,#topmenu li a:visited{
color:#000;display:block;margin:0;padding:0 10px;line-height:44px; border-left: 2px solid #ccc;margin-left: 5px;
}
#topmenu li a:hover,#topmenu li a:active{
margin:0;
padding:0 10px;
line-height:40px;
text-decoration:none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#D50B0B));
}
#topmenu li li a,#topmenu li li a:link,#topmenu li li a:visited{
width:140px;
color:#000;
float:none;
margin:0;
padding:0 10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-weight:normal;
line-height:25px;
text-shadow:none
}
#topmenu li li a:hover,#topmenu li li a:active{
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#D50B0B));
color:#000;
padding:0 10px;
line-height:25px;
background: #999;
}
#topmenu li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:160px;
margin:0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #none;
padding:0 0 5px 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ea0000));
}
#topmenu li li{}
#topmenu li ul a{width:140px}
#topmenu li ul a:hover,#topmenu li ul a:active{}
#topmenu li ul ul{margin:-35px 0 0 200px}
#topmenu li:hover ul ul,#topmenu li:hover ul ul ul,#topmenu li.sfhover1 ul
ul,#topmenu li.sfhover1 ul ul ul{left:-999em}
#topmenu li:hover ul,#topmenu li li:hover ul,#topmenu li li li:hover ul,#topmenu li.sfhover ul,#topmenu li li.sfhover1 ul,#topmenu li li li.sfhover1 ul{left:auto}
#topmenu li:hover,#topmenu li.sfhover1{position:static}
5. Setelah itu cari kode
<body> dan letakkan script kode berikut ini tepat di bawahnya!<!--TOP MENU-->
<div id='topmenucontainer'>
<div id='topmenu'>
<ul>
<li><a href='#'>Categories</a>
<ul class='sub-menu'>
<li><a href='#'>Belajar CSS</a></li>
<li><a href='#'>Belajar HTML</a></li>
<li><a href='#'>Belajar PHP</a></li>
<li><a href='#'>Belajar JavaScript</a></li>
<li><a href='#'>Bllog Design</a></li>
</ul>
</li>
<li>
<a href='#'>Service</a>
<ul class='sub-menu'>
<li><a href='#'>Template Editing</a></li>
<li><a href='#'>Web Programming</a></li>
</ul>
</li>
<li><a href='#'>Social Media</a>
<ul class='sub-menu'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Yahoo!</a></li>
</ul></li>
</ul>
<li><a href='#'>Privacy and Policy</a></li>
<li><a href='#'>News Flash</a></li>
<li><a href='#'>Blogger</a></li>
</div>
</div>
<!--TOP MENU ENDS-->
6. Lalu klik save/simpan template, selesai dan lihat hasilnya...
Note :
Ganti tanda # dengan alamat url tujuan anda dan ganti tulisan di sebelahnya sesuai dengan alamat url yang di tuju. Untuk mendapatkan hasil yang sesuai dan pas dengan template blog anda, silahkan anda ubah dan sesuaikan kode seperti background, color, hover, ataupun atribut lainnya sesuai selera anda.
Cukup sekian postingan mengenai cara membuat navigasi top menu container ini, semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kesalahan yang ada. Salam sejahtera by ngeposta...
0 comments:
Post a Comment