0 Membuat menu di blog

box-iNet - untuk membuat menu blog seperti di atas silahkan copy script berikut di editor blog.
1. Desain
2. Edit HTML
3. Letakan script berikut sesuai yang anda inginkan, biasanya terletakn dibawah header.



<!-- menu -->
<style type='text/css'>
#top-wrapper{background:#eeff;width:970px;margin:0 auto;padding:0 auto;border-bottom:1px solid #f89c21}
#topbar{width:970px;height:27px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#555;border-right:1px solid #ddd;padding:7px 10px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF016-vOYVP-sjSV1DdshvDBjaaSs3QAqZQNKwDIxDxL3h9nelEPw_NFF-R8qCH1mugYnH9IG3UQBj2MxG-luhVsjmOrQa6DEzz-wKzly59mJRtEq7Y0EVJoYmu9T_MJhe4ErJ41_zY88/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top 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}
#top li ul{z-index:100;position:absolute;display:none;background:#999;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#999;color:#000}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#000;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #aaa;border-top:1px solid #666;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#222;display:block;line-height:16px;text-transform:uppercase;}
#top li:hover a span,#top li:hover a.arrow span{color:#fff}
.navwrap{background:#eef repeat-x bottom;width:970px;margin:0 auto;padding:0 auto}
.nav{width:970px;height:24px;margin:0 auto;padding:3px 0}
.nav ul{padding-left:7px;color:#666;text-transform:capitalize;list-style-type:none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;margin:0}
.nav li{display:inline;margin:0}
.nav li a{float:left;display:block;text-decoration:none;border-right:0 solid #415770;font-weight:400;color:#333;padding:5px 6px 3px}
.nav li a:hover{background:#e0e;border-radius:3px;-webkit-border-radius:3px;-opera-border-radius:3px;-moz-border-radius:3px;color:#eee;text-decoration:none}
.navsearch{width:300px;float:right;margin:0 auto;padding:0 auto}


.headline-wrapper{background:33f repeat-x bottom;border-bottom:0px solid #000;width:970px;height:22px;margin:0 auto;padding:0 auto}
.headline{width:970px;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}
.headline a:hover{color:#eace12;text-decoration:none}


.credit-wrapper{background:#ffffff repeat-x top;width:990px;margin:0 auto;padding:0 auto}
.credit{width:990px;line-height:1.6em;text-align:center;font-family:Arial;font-size:11px;color:#000;overflow:hidden;clear:both;margin:0 auto;padding:10px 0 10px 10px}
.credit a:link,.credit a:visited{color:#000;text-decoration:none}
.credit a:hover{color:#1da7e7;text-decoration:none}


</style>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>boxarif</span>Homepage</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-news'><span>box-News</span>News Update</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-sport'><span>box-Sport</span>Sport</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-tech'><span>box-tech</span>Technology</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-inet'><span>box-Net</span>i-Net</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-finance'><span>box-Finance</span>Finance</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-tutorial'><span>box-Tutorial</span>Tutorial blog</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-health'><span>box-Health</span>Health</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-food'><span>box-food</span>Food</a></li>
<li><a href='http://boxarif.blogspot.com/search/label/box-unik'><span>box-Unik</span>Unique</a></li>
<li><a class='arrow' href='#'><span>About US</span>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/116981825335077594940' target='_blank'>Goggle +</a></li>
<li class='hr'/>
<li><a href='https://www.facebook.com/Boxarif.site' target='_blank'>boxarif on Facebook</a></li>
<li class='hr'/>
<li><a href='https://www.facebook.com/boxarif' target='_blank'>Admin on Facebook</a></li>
        <li class='hr'/>
<li><a href='https://twitter.com/#!/boxarif' target='_blank'>Contact on Twitter</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
<div class='navwrap'>
<div class='nav'>
<ul><li class='home'><a href='/'>Home</a></li>
<li><a href='http://feeds.feedburner.com/boxarif' title='Posts RSS'>Posts RSS</a></li>
<li><a href='http://boxarif.blogspot.com/feeds/comments/default' title='Comments RSS'>Comments RSS</a></li>
</ul>
<div class='navsearch'>
<div style='float:right;padding:1px 8px 0 0;'>
<form action='http://www.boxarif.blogspot.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://crottt.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;border-radius:5px;padding:2px 4px; font:12px Arial;color:#666; background:#fffffc no-repeat;' type='text' value='Search ...'/><input align='right' id='search-btn' padding='5px 7px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2Ssk_v1QDFEv-wkGlKrGp5n12JdcSpJMkRwqjRp2AokF2tXJycVfIKOVvkdcXRjNKpVphkMf2ZA5by400SzFojgI3Rc7his1faBzmuATQjg311YDZmd3_SJkljmQzi860c3xRc_fy7g/s1600/go.gif' type='image' value='Search'/>
</form>
</div>
</div>
</div>
</div>
<!-- akhir menu -->


Silahkan klik suka jika postingan ini anda sukai. Terima kasih semoga bermanfaat.

Komentar →