Pengen Punya Menu beserta Submenu seperti punya Gue ini, silahkan baca dan
praktekkan tutorial di bawah ini. pembuatan Menu dan submenu ini gue ambil dari
berbagai sumber yang kemudian gue praktekin dan gue coba otak-atik lagi dengan
kapasitas otak yang tersias ini. xixixix dan alhamdulillah akhirnya selesai
juga.. berikut ulasannya..:
1. Masuk ke Blogger
2. Klik Tata Letak
3. Klik Edit HTML
4. Cari kode: ]]></b:skin>
5. Tambahkan kode berikut ini di atas kode yang tadi (no. 4)
/* ----- NAVBAR MENU ----- */
/* aini1 sastra css3*/
#NavbarMenu ul{
background: #00FF00;
background: -webkit-gradient(linear, left
top, left bottom, from(#00FF00), to(#0000FF)); /* CSS
gradient Warna Form dibelakang Menu*/
background: -moz-linear-gradient(top,#0000FF,
#00FF00); /* CSS gradient */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#8A2BE2',
endColorstr='#00FF00'); /* CSS
gradient ie7 Warna Form dibelakang Menu*/
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00',
endColorstr='#555555'); /* CSS
gradient ie8 Warna Form dibelakang Menu*/
display: inline-block;
zoom: 1; /* hack untuk ie7 */
*display: inline;
border: solid 1px #555555;
padding: 3px 5px;
-webkit-border-radius: 20px; /* rounded
corner */
-moz-border-radius: 20px; /* rounded
corner */
border-radius: 20px; /* rounded
corner */
-webkit-box-shadow: 0 1px 0px
rgba(1,0,0,.1); /* CSS shadow */
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
/* CSS shadow */
box-shadow: 0 1px 0px rgba(0,0,0,.1); /*
CSS shadow */
}
/* css aini1 css3 end */
/* aini sastra css3*/
#NavbarMenu ul a{
background: #8A2BE2;
background: -webkit-gradient(linear, left
top, left bottom, from(#8A2BE2), to(#FF00FF)); /* CSS
gradient Warna Background Menu */
background: -moz-linear-gradient(top,#8A2BE2,
#FF00FF); /* CSS gradient */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#8A2BE2',
endColorstr='#FF00FF'); /* CSS
gradient ie7 Warna Background Menu */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8A2BE2',
endColorstr='#FF00FF'); /* CSS
gradient ie8 Warna Background Menu*/
display: inline-block;
zoom: 1; /* hack untuk ie7 */
*display: inline;
border: solid 2px #ffffff; /* Warna Border */
padding: 3px 5px;
-webkit-border-radius: 30px; /* rounded
corner */
-moz-border-radius: 30px; /* rounded
corner */
border-radius: 30px; /* rounded
corner */
-webkit-box-shadow: 0 1px 0px
rgba(1,0,0,.1); /* CSS shadow */
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
/* CSS shadow */
box-shadow: 0 1px 0px rgba(0,0,0,.1); /*
CSS shadow */
}
/* css aini end */
#NavbarMenu ul li a {position:
relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0
0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration:
none;color:transparant;font-weight: bold;outline: none;}
#NavbarMenu li .current{color:
transparant;}
#NavbarMenu li a:hover, #NavbarMenu li
a:active {
background: #4B0082;
background: -webkit-gradient(linear, left
top, left bottom, from(#4B0082), to(#FF0000)); /* CSS
gradient Merubah Background Saat klik Menu*/
background: -moz-linear-gradient(top,#4B0082,
#FF0000); /* CSS gradient Merubah Background Saat klik Menu */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082',
endColorstr='#FF0000'); /* CSS
gradient ie7 Merubah Background Saat klik Menu*/
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082',
endColorstr='#FF0000'); /* CSS
gradient ie8 Merubah Background Saat klik Menu */
display: inline-block;
zoom: 1; /* hack untuk ie7 */
*display: inline;
border: solid 1px #555555;
padding: 3px 5px;
-webkit-border-radius: 20px; /* rounded
corner */
-moz-border-radius: 20px; /* rounded
corner */
border-radius: 20px; /* rounded
corner */
-webkit-box-shadow: 0 1px 0px
rgba(1,0,0,.1); /* CSS shadow */
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
/* CSS shadow */
box-shadow: 0 1px 0px rgba(0,0,0,.1); /*
CSS shadow */
}
color: #ffffff;
margin: 0;
font-size:16px;
padding: 9px 15px 8px;
text-decoration: none;
}
#NavbarMenuleft {
width: auto;
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 {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: Bold 15px Georgia, Arial;
}
#nav li a:hover, #nav li a:active {
background:transparant;
color: #ffffff;
margin: 0;
font-size:20px;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li
li a:visited {
background: #00FFFF;
background: -webkit-gradient(linear, left
top, left bottom, from(#00FFFF), to(#000000)); /* CSS
gradient Warna Background Menu SubMenu*/
background: -moz-linear-gradient(top,#00FFFF,
#000000); /* CSS gradient */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF',
endColorstr='#000000'); /* CSS
gradient ie7 Warna Background Menu SubMenu*/
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF',
endColorstr='#000000'); /* CSS
gradient ie8 Warna Background Menu SubMenu */
width: 250px; /* Lebar Submenu */
color: #E6E6FA; /* Warna Huruf */
-webkit-border-radius: 12px; /* rounded
corner */
-moz-border-radius: 12px; /* rounded
corner */
border-radius: 12px; /* rounded
corner */
border-style: outset;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: transparant;
border-left: transparant;
border-right: transparant;
font: bold 14px Georgia, Arial;
}
#nav li li a:hover, #nav li li a:active {
background: #FF0000;
background: -webkit-gradient(linear, left
top, left bottom, from(#FF0000), to(#00FF00)); /* CSS
gradient Background Klik Submenu*/
background: -moz-linear-gradient(top,#FF0000, #00FF00); /* CSS
gradient Background Klik Submenu */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000',
endColorstr='#00FF00'); /* CSS
gradient ie7 Background Klik Submenu*/
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000',
endColorstr='#00FF00'); /* CSS
gradient ie8 Background Klik Submenu*/
color: #ffffff; /* Warna
Huruf Submenu*/
font-size:20px; /* Merubah
Ukuran Huruf Saat diklik*/
text-align: center;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: 20px;
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;
}
-----------------------------------
6. Kemudian, cari kode ini (kurang lebih
seperti dibawah ini) jika template belum banyak berubah:
-----------------------------------
<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>
7. Tambahkan kode berikut ini di bawah
kode no. 6
Jika posisinya dibawah header (Tapi Jika
Posisinya di atas Header maka taroh Code dibawah ini diatas
kode <body> )
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a
expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Menu-1</a>
<ul>
<li><a href='#'>SubMenu-1-1</a></li>
<li><a href='# '> SubMenu-1-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-2</a>
<ul>
<li><a href='#'>SubMenu-2-1</a></li>
<li><a href='#'> SubMenu-2-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-3</a>
<ul>
<li><a href='#'>SubMenu-3-1</a></li>
<li><a href='# '> SubMenu-3-2</a></li>
<li><a href='#'> SubMenu-3-3</a></li>
</ul>
</li>
<li><a href='#'>Menu-4 </a></li>
</ul>
</div>
</div> <!-- end navbar -->
Teks
yang berwarna Biru Bisa Sobat Ganti sesuai warna Campuran yang sobat Mau
Teks
yang berwana Merah itu itu merupakan bentuk sudut Form Menu yang ingin kita
buat, semakin besar nilainya maka semakin bulat juga bentuknya tapi sesuai
dengan Panjang dan lebar Menu.
