Home
Langkah I :
- Anda harus Login terlebih dahulu ke blogger ---> www.blogger.com
- Klick Design, dan Edit HTML
- Cari kode ]]></b:skin> {untuk memudahkan mecari kodenya klick Ctrl + F} dan letakkan kode berikut tepat Diatas kode ]]></b:skin>
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxQU8CcVpj1G-pkigg3BZSCFpNdMXU7YSqC3f0H6CGdcd_ePkbugMVeAm_5FzommtAqPe4o-fBVFhdGmdeNYi8rdm0gLsBTHI-J40waT4wNUUaKutw9oyTszT5-5qqkO7C6BD0_LFWg1o/s1600/menubar.png) repeat-x;width:880px;margin:0 auto;padding:0 auto} #menuwrapper{width:880px;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/AVvXsEgEsE9Wwg9xHLAzQ2e6JfvsEKIPIXphYm3Ur3Iw-n62xLU2IahphmNzCxnVTB_Qnc7d7anKXC_4RDHWxr-NRbQuvxFpG-GbzJDj-YaV0oc-9uUBuSYoChZoaR0W5stUFRnCzunNJHZWd04/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}
-------------------------------------------------------------------------------
- Kode warna merah diatas silahkan rubah sesuai selera anda!
- Selanjutnya kalian cari kode berikut:
<header> : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog
Langkah II
ini kodennya -------------------------------------------------------------------------
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://kursus-komputer2013.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-bjiaa0YVscrO1iFWBnQctgFeHhySrriiPc9-QV-eyzdowiQ-ZboqMmkca9fd-bF_KX7mkI35BL25l4JFDUyS5r4c8jLgi7MBPyIkp3E_BOci-r555Y8cn3YdlFnYEvGH1HS_KI58rFs/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://kursus-komputer2013.blogspot.com/' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='http://kursus-komputer2013.blogspot.com/' target='new'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://kursus-komputer2013.blogspot.com/'>Sub Menu 2</a></li>
<li><a href='http://kursus-komputer2013.blogspot.com/' target='new'>Sub Menu 3</a></li>
<li><a href='http://kursus-komputer2013.blogspot.com/' target='new'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='http://kursus-komputer2013.blogspot.com/' target='new'>Menu</a></li>
<li><a class='trigger'>Menu Drop Down</a>
<ul>
<li><a href='http://kursus-komputer2013.blogspot.com/'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://kursus-komputer2013.blogspot.com/'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='http://kursus-komputer2013.blogspot.com/'>Sub Menu 3</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Menu Blog</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 3</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 4</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://kursus-komputer2013.blogspot.com/' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://kursus-komputer2013.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/AVvXsEjXhpYLB_oXA5IObIKXkopw0zp2yjwCvoY-lpfE0ROWxdA-sFbhm8dRqz0Emf0nBLOeICUlydM7NR58lVYkoA-NT3Y54JCtBE5ec8F4yhXwazc8QZb-Fb28-dYBmRfZXB_EAqZk4oUYEkA/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3CTU6ew6rqP45q_MNG4Pd8bLNOaGJ1n2Enz9u9rb04cUkH4fmMqQDRwQ-xlum8Uwa5qoAyfWBNihoBK3zpGdDPzM7XKAYjjVRjPiZZoVLoPYoPB9bX0L3J4W3TtAMQ3wP0s1siFNwkDE/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
------------------------------------------------------------------------
- Kode yang mazinu beri warna orange adalah URL tujuan,, silahkan ganti sesuai yang kalian kehendaki!
- Simpan dan Lihat Hasilnya!
No comments:
Post a Comment