Home
1. Kawan login dulu ke blog kawan
2. Pilih template lalu klik edit HTML
3. Centang Expand Template Widget
4. Kawan cari kode ini ]]></b:skin> lalu taruh kode yang ada dibawah tepat diatas kode ]]></b:skin>
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07CYIFWEZ_-uL-z0VzCkJu6ToBDY4c2-y3Q4WGlR7W-cQSevt3R0iQVrqNyVxfYRVBMsPO9IqrLV-sVnK9hwLeTIV0Y8dqgPLmw8gfpYVWx2lX1-64mArjuFjHOgXdM5dTIr_IwEBg0c/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKHAYXkycRyMmJSB3-gF0vgcB8mOzKegi2bx2kHiIsWCPI9AGJQHf5n2p_rW9dNJ0AAczNVnZp7QacDo5tZUY8EMNgcGlmhMPzF0f9mm6fu-TYqEhh5DpJoKob5KlagWuQpn5o7ffetMI/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar 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} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none} #Attribution1 { height:0px; visibility:hidden; display:none } .feed-links{ display:none; }
Nah,kalo udah sekarang kawan cari kode ini </header> atau <header> (pilih salah satu)
- </header> : Menu akan ada di bawah header blog
- <header> : Menu akan ada di atas header blog
Note 1 : Kalau kawan mau menu dibawah header blog kawan copy kode di bawah tepat dibawah kode </header>
Note 2 : Kalau kawan mau menu diatas header blog kawan copy kode di bawah tepat diatas kode <header>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIQBCiq2TduzCIThb3Yb9KPAsF_9jbER5hpqDQDJh9JYYgXTBxj2M7K3mPPCIu5fCffexHYalXFf18eGKUBPyxCEwWbpVuIAPE_fklHceB2a-N9RNYoU0N2EkKN8Tcx1QNaEVz3Qg2vHU/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a class='trigger'>Aplikasi</a>
<ul>
<li class='hr'/>
<li><a href='http://daniasd.blogspot.com/search/label/aplikasi%20android' target='new'>Android</a></li>
<li><a href='http://daniasd.blogspot.com/search/label/Aplikasi%20Blackberry' target='new'>Blackberry</a></li>
</ul>
</li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://daniasd.blogspot.com/search/label/Android'>Android</a></li>
<li class='hr'/>
<li><a href='http://daniasd.blogspot.com/search/label/Blackberry'>Blackberry</a></li>
<li class='hr'/>
<li><a href='http://daniasd.blogspot.com/search/label/Tutorial'>Blogging</a></li>
<li class='hr'/>
</ul>
</li>
<li><a href='http://daniasd.blogspot.com/search/label/Jokes' target='new'>Jokes</a></li>
<li><a class='trigger'>Contact Me</a>
<ul>
<li class='hr'/>
<li><a href='http://www.facebook.com/dani.subandi.7' target='new'>Facebook</a></li>
<li><a href='http://photoserver.ws/images/Bfm35023d9874508b.jpg' target='new'>BB pin</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://daniasd.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://daniasd.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3B4BUCVbi_V1wg6lovL6xBlX9Ka5n0qL7GE1zd4PXDJbidGUr5Xn07GRSEIqx-3ePC4j3_LdHG_bEKl4-jtSQ1Fkh8ErRElL5FjaEXel0XTIYGQDmSp3IAhzCmU9rvVZuHyAWP_6f9E0/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya kawan...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Zyur37LruZ89Dhfzf5Zp4MHJ1yXC0AZxdoTm4rfJAnoPPEktpKkHsCIlxn0ReSdx-GmTagadn_-_rJADmeMd_fbBOPWGN2UnO8YhtbvU11ZbA7XsUWb5Hc1Y5lqIUtLTZ5ZzkJR_Qn0/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
Kode warna merah kawan ganti dengan Url kawan
kode warna orange itu kode yang akan muncul di menu
Sekian tips dari saya,selamat mencoba ya kawan.Kalau ada yang kurang jelas jangan ragu untuk bertanya ya kawan v^^
