Membuat Horizontal Menu Dropdown, pada posting sebelumnya saya telah membahas Tentang Artikel ini yaitu
Cara Membuat Horizontal Menu Dropdown . Pada posting sebelumnya ada teman blogger bernama
Moch.Ghozali yang ingin
Horizontal Menu Dropdown seperti punya saya, baiklah silahkan simak penjelasan berikut:
1. Silahkan Login
Blogger2. Langsung menuju
Edit HTML3. Jangan lupa
Backup Template anda terlebih dahulu
4. Contreng
Expand Widget Template5. Cari kode
]]></b:skin> dan letakkan kode berikut sebelum kode
]]></b:skin>#NavbarMenu {
background:#1d1313 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLeVTO7EdmrtIJ1cKm2d_lS4xVLIUTjRt-7VwsnszHTszyGeDYGTJ7xNj-DotBwdLx5jYMRC1n5V8Yxh0dzqvm0q-mc8vJ8uSML7JELrmlZcuCAACKK_FYALydjBQomPlPjLdXRZ3R-84U/) repeat-x center;
width: 960px;
height: 35px;
color: $navcolor;
margin: 0 auto;
padding: 0;
font: bold 8px Trebuchet MS;
}
#NavbarMenuleft {
width: 650px;
float: left;
margin: 0;
padding: 0;
}
#search {
width: 240px;
font-size: 11px;
float: right;
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 {
color: $navcolor;
display: block;
text-transform: uppercase;
margin: 0;
padding: 9px 15px 8px;
font: bold 11px Trebuchet MS;
border-right:1px solid #000;
}
#nav li a:hover, #nav li a:active {
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinsuGrT_wFi75wSr5EYlZxv7YsO-5c1rVDgfupDvd46cnwMmU4RI93X06enf8jY6QRqcvq4u4OFkezXyNbx_-jgt4dSzjdKESpezKSD9aB3L4nFJzv2_9inuJkSg7-N9qgtxYpMiV8_5kt/) repeat-x;
color: #e6e1e1;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#000;
width: 150px;
color: #fff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
font: normal 13px Trebuchet MS;
}
#nav li li a:hover, #nav li li a:active {
color: #e0dbdb;
padding: 7px 10px;
background:#5c5858;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding:10px;
background:#000;
border-bottom:3px solid #C30606;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
padding:10px;
background:#000;
border-bottom:3px solid #C30606;
}
#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;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
padding:0;
margin:0;
}
#search input{
background: transparent;
color: #fff;
float: left;
font-size: 12px;
margin: 7px 0 0 10px;
width: 178px;
padding:3px 7px;
border: 1px solid #605151;
font: normal 10px arial, verdana, Times New Roman;
}
#search .btn{
margin: 7px 0 0;
padding: 0;
width: auto;
border:0;
}
Catatan:Warna
biru Gambar Background Horizontal Menu Dropdown
width: 960px; Pengaturan Lebar, Silahkan anda sesuaikan dengan template anda
.
6. Kemudian Cari Kode seperti ini
<body> dan Letakkan Kode berikut Setelah kode
<body><div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='http://www.deddycamp.com/search/label/PTC'>PTC</a>
<ul>
<li><a href='http://www.deddycamp.com/search/label/PTC%20Indonesia'>PTC Indonesia</a></li>
<li><a href='http://www.deddycamp.com/search/label/PTC%20Internasional'>PTC Internasional</a></li>
</ul>
</li>
<li><a href='http://www.baris-iklan4u.co.cc' target='new'>Free Advertise</a></li>
<li><a href='http://www.deddycamp.com/2010/07/banner-exchange-yuk.html'>Banner Exchange</a></li>
<li><a href='#'>About Me</a>
<ul>
<li><a href='#'>My Profile</a></li>
</ul>
</li>
</ul>
</div>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWpayXNtEshV8O_qb0TH493KnzMSs9MpLv0cMivK8jedZwBtrVLeahg3wQjSStv6HnYH5EBCt6QrWv0X2Q9F8vvGCWqjhordgb-2rULOvRlPvgYDJaR3FYSkmiA9c9-tbrdiW8RIIZLg/?imgmax=800' type='image' value='Go'/>
</form>
</div></div>
Catatan:Tulisan yang berwarna
merah, adalah Link/alamat/URL halaman yang dituju, ganti dengan Link milik anda.
Tulisan yang Berwarna
biru adalah Judul atau Nama dari Link tersebut, silahkan ganti dengan milik anda.
7.
Simpan Template anda, dan Lihat Hasilnnya.
Selamat Mencoba
0 komentar:
Posting Komentar
Terima kasih atas komentar anda