Sabtu, 06 April 2013

Menu Drob Down





1. Login ke blogspot sahabat
2. Kemudian masuk ke Template
3. TerusCari tulisan ]]></b:skin>
4. Kemudian copy kode dibawah ini . di Atas tulisan ]]></b:skin>



#imenu {
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(49%,#707070), color-stop(51%,#5e5e5e), color-stop(100%,#777777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #fff;
border: none;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
overflow: visible;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-appearance: none;
margin-bottom: 20px;
margin-left:0px;
}
#halfnav{float:right;}
#halfnav ul, #halfnav ul li{display:inline;list-style:none;padding:0;margin:0}
#halfnav ul li a{
display:inline-block;
margin: 5px;
font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;
font-size:16px;
padding: 5px;
color:#fff;
line-height:20px;
text-decoration:none;
background: #5e5e5e; /* Old browsers */
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 49%, #5e5e5e 51%, #777777 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a8a8a), color-stop(49%,#707070), color-stop(51%,#5e5e5e), color-stop(100%,#777777)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* IE10+ */
background: linear-gradient(top, #8a8a8a 0%,#707070 49%,#5e5e5e 51%,#777777 100%); /* W3C */
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
border: 1px solid #666;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#halfnav ul li a:hover{border: 1px solid #222;box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
#halfnav .current-menu-item a{border: 1px solid #000;}
#nav{position:relative;z-index:2000}
#nav .parent > a, #nav .parent > a:hover{background-image:url(../images/arrow.png);background-position:right;background-repeat:no-repeat}
#nav ul ul .parent > a, #nav ul ul .parent:hover > a:hover, #nav ul ul li:hover ul .parent > a, #nav ul ul li:hover ul .parent > a:hover{background-image:url(../images/arrow-right.png);background-position:right;background-repeat:no-repeat}
#nav ul, #nav ul li{display:inline;list-style:none;padding:0;margin:0}
#nav ul li a{display:inline-block;font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;font-size:13px;color:#fff;line-height:15px;text-decoration:none;text-shadow:1px 1px 1px #333;padding:800 15px;margin-left:-4px;border-right:#777 5px solid}
#nav ul li a:hover{box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
#nav .current-menu-item a{color:#ccc;}
#nav .current-menu-item .sub-menu a{color:#fff;text-shadow:1px 1px 1px #333}
#nav .menu > li:first-child a:hover{border-radius:0}
#nav .menu .sub-menu li a:hover{border-radius:0}
#nav ul li{position:relative}
#nav li ul{display:none;position:absolute;top:33px;left:-2px}
#nav li ul a{background:#555}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul{left:0;margin:-37px 0 11px 180px}
#nav ul li:hover ul{display:inline-block}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul{display:none}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul{display:block}
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a{border:#777 1px solid;margin:0px 0 0 -11px}
#nav ul li:hover ul li a{width:150px;padding:50 14px}
#nav ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#888}
#nav ul ul ul li:hover ul li a{width:150px;padding:0 14px;background-color:#aaa}
#nav .children {z-index: 000;}
#home {float: left;border-right:#777 1px solid;margin-right:4px;margin-left:20px; height: 20px;}
#home a:hover{opacity: .5}
#nohome {float: left; margin-right:4px;margin-left:5px; height: 35px;}
.searchform {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
width: 160px;
padding: px;
margin: 7px 2px 2px 10px;
height: 20px;
box-shadow:inset 0 0 1px #222;
background: #fff;
float: right;
margin-right: 10px;
}
.center .searchform {float:none;}
#morefoot .searchform {float:left;}
.searchform .s{
margin:;
border: none;
margin: 3px 2px 2px 15px;
font-size: 12px;
height: 14px;
width: 140px;
color: #333;
overflow: hidden;
}
#magnify {float:left;position:absolute;margin: 2px 0 0 5px;}
#magnify {margin: 0 0 0 5px}
.searchform .s:focus {outline:0; border:none;}
.searchform .searchsubmit {display:none;}
.row { width: 100%; max-width: 1250px; min-width: 800px; margin: 0 auto; }
/* To fix the grid into a certain size, set max-width to width */
.row .row { min-width: 0; }
.column, .columns { margin-left: 4.4%; float: left; min-height: 10px; position: relative; }
.column:first-child, .columns:first-child { margin-left: 0; }
[class*="column"] + [class*="column"]:last-child { float: right; }
.row .three { width: 21.679%; }
.row .nine { width: 73.9%; }
.row .ten { width: 82.6%; }
.row .twelve { width: 100%; }


5. Save Template
6. Kemudian masuk ke Tata Letak - Tambahkan Gadget pilih HTML/JavaScript .copy kan code di bawah ini :



<div class="container">
<div class="row">
<div class="twelve columns" id="imenu">
<div id="nav" class="nine columns">
<div id="home"><a href="http://nomblonk.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhah7QEZiZaqoudAaNCbCuXvuMIy7XKMTu0z3b1mPVQT8a5kA98MqTEI-TskVJ5L5V-2yfPmEbR7D865jDwly0Jfbc5bJBRS7oeyAuic6R2siSD895LP8Lbjy4kx9Kg9T6CgIe6FlQPlaG/s320/home.png" alt="home" /></a></div>
<ul id="nav_menu">
<li><a href="#">Induk</a>
<ul>
<li><a href="#"target="_blank">Anak Induk 1</a></li>
<li><a href="#"target="_blank">Anak Induk 2</a></li>
<li><a href="#"target="_blank">Anak Induk 3</a></li>
</ul>
</li>
<li><a href="#">Induk</a>
<ul>
<li><a href="#"target="_blank">Anak Induk 1</a></li>
<li><a href="#"target="_blank">Anak Induk 2</a></li>
<li><a href="#"target="_blank">Anak Induk 3</a></li>
</ul>
</li>
<li><a href="#">Induk</a>
<ul>
<li><a href="#"target="_blank">Anak Induk 1</a></li>
<li><a href="#"target="_blank">Anak Induk 2</a></li>
<li><a href="#"target="_blank">Anak Induk 3</a></li>
</ul>
<li><a href="#">Induk</a>
<ul>
<li><a href="#"target="_blank">Anak Induk 1</a></li>
<li><a href="#"target="_blank">Anak Induk 2</a></li>
<li><a href="#"target="_blank">Anak Induk 3</a></li>
<li><a href="#"target="_blank">Anak Induk 4</a></li>
</ul>
<li><a href="#">Induk</a>
<ul>
<li><a href="#"target="_blank">Anak Induk 1</a></li>
<li><a href="#"target="_blank">Anak Induk 2</a></li>
<li><a href="#"target="_blank">Anak Induk 3</a></li>
</ul>
<li><a href="#">Induk</a>
<ul>
<li><a href="#"target="_blank">Anak Induk 1</a></li>
<li><a href="#"target="_blank">Anak Induk 2</a></li>
<li><a href="#"target="_blank">Anak Induk 3</a></li>
</ul>
</li>
<li><a href="#">Request</a>
<ul>
<li><a href="#"target="_blank">Sofware</a></li>
<li><a href="#"target="_blank">Lagu</a></li>
<li><a href="#"target="_blank">Film</a></li>
</ul>
</li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#"target="_blank">Facebook</a></li>
<li><a href="#"target="_blank">Twitter</a></li>
<li><a href="#"target="_blank">Blogspot</a></li>
</ul>
</li>
</li></li></li></ul>
 </div>
<div class="three columns">
<form method="get" class="searchform" action="http://nomblonk.blogspot.com/ ">
<div id="magnify"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7AyyH3GCo-YL2nyU3B2YJgU5EyksvIzoefOt47JLcWx5kyItwK1tLGEEavgel8tvwJW_L1UQUAh8kFx_5Da0YudqL0DhNGCaSUcTrNdQZc_A17BGdBTgV5y3hqLHGPElGxXNCxCGzg9x/s320/magnify.png" alt="magnify" /></div>
<div><input name="s" class="s" value="Search" id="searchsubmit" onfocus="if (this.value == &#39;Search&#39;) this.value = &#39;&#39;;" type="text" /></div>
<div><input class="searchsubmit" value="" type="submit" /></div>
</form> </div>
</div>
</div>
</div>



7. Terus ganti tulisan :
Yang Bertanda Biru dengan link Blogspot sobat ..
Yang Bertanda Hijau dengan nama yang sobat akan tuju
Yang Bertanda Merah dengan link yang sobat tuju
8. Simpan . dan Lihat hasil nya


0 komentar:

Posting Komentar