pertama masuk pada Template » Edit HTMLkemudian Copy CSS di bawah ini dan letakkan tepat di atas tag ]]></b:skin>
#lscnav{width:100%;min-
width:960px;position:fixed;top:0;left:0;right:0;height:30px;font-size:13px;z-index:99;background-color:#1E6510;border-bottom:1px solid #000}
#lscwrapper{width:980px;height:30px;margin:0 auto;}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#lscmenunav{width:960px}
#lscmenunav,#lscmenunav ul{list-style:none;font-family:Arial, serif;margin:0;padding:0;}
#lscmenunav a{display:block;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;color:#fff;padding:8px 8px 8px;border-left:0px solid #000;text-shadow:0 1px 1px #000;}
#lscmenunav a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VumbT0o-x_jIFhq9VpnhJZ4sHWDHUxEhDoR9f3P7DSwVA9FYrIeH6_FmHMFWDJK7_Mrn7Lfzp8gGWlMBOsDuWO59lTD6MfBy0T9C6oDb4SZ9Kc-R-OnEQhOvZtcxZsm8lST4EqrJ41Y/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 8px}
#lscmenunav li{float:left;position:static;width:auto}
#lscmenunav li ul,#menubar ul li{width:150px}
#lscmenunav ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#lscmenunav li ul{z-index:50;position:absolute;display:none;background:#26231c;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#lscmenunav li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#000;color:#fff;-webkit-transition: background-color .555s;-moz-transition: background-color .555s;-o-transition: background-color .555s;-ms-transition: background-color .555s;}
#lscmenunav li:hover ul,#menubar li.hvr ul{display:block}
#lscmenunav li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#lscmenunav li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
#lscmenunav ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#menu-right{float:right;display:inline;width:160px;padding-top:5px;margin-right:5px}
#topsearch1 #feed-1{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#333}
#topsearch1 #feed-s{width:126px}
#search{height:18px;width:150px;background:#aeaeae;padding:0}
#search input{border:0;background:none;color:#575757}
#s{font-size:12px;width:120px;padding-left:4px;background:none;margin:0}
#topsearch #search{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;border:1px solid #999}
#topsearch #s{width:125px}
jangan simpan template dulu, masih ada langkah selanjutnya..
kemudian cari kode <body>.. dan copy paste kode dibawah ini tepat dibawah kode <body> tadi..
<div id='lscnav'>
<div id='lscwrapper'>
<ul id='lscmenunav'>
<li class='home'><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Drop menu 1</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 2</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
<li><a href='#'>Sub menu 4</a></li>
<li><a href='#'>Sub menu 5</a></li>
<li><a href='#>Sub menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<div style='float:right'>
<div id='menu-right'>
<div id='topsearch'>
<div id='search'>
<form action='/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/>
<input alt='search' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBNYTyi7gSbmGiEwLMW9QMPkQ5VCJ9MK-RNqtuCdqp5UrrVzBK8EJum9TnqZf1AOqLMhAKKJ719YE2vmPLzxA95AAALe_tFUpx_1bYNYlsQeejPiMedZ16D4J03hE_6Mrb_YRkVaIULTs/s1600/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' title='Search' type='image'/>
</form>
</div>
</div>
</div>
</div>
<br class='clearit'/>
</div>
</div>
Ganti tanda # dengan link blog anda dan Menu 1, Sub Menu dst sesuai dengan kata-kata anda sendiri dan jika sudah selesai, silahkan klik pratinjau atau simpan untuk melihat hasilnya.
No comments:
Post a Comment