Tuesday 7 December 2010

cara membuat side menu pada blog

Standard
1.Login ke akun blogger pilih Layout" and "Add a Gadget" of HTML/JavaScript

2.Silahkan copy paste kode dibawah ini

<center><div id="menu">
<ul>
<li><a class="current" href="http://publicindonesia.blogspot.com/">home</a></li>
<li><a href="
http://publicindonesia.blogspot.com/">Still wish</a></li>
<li><a href="
http://publicindonesia.blogspot.com/">Hospital</a></li>
<li><a href="
http://publicindonesia.blogspot.com/">Create Money</a></li>
<li><a href="
http://publicindonesia.blogspot.com/2008/09/contact-us.html">Blog Asep canda</a></li>
</ul>
</div></center>
<style><br/>/* --------------------------<br/>AUTHOR : STYLED MENUS<br/>URL : http://www.styledmenus.com<br/>Copyrights by STYLED MENUS<br/>Widget From http://bloggerstop.Net<br/>----------------------------*/<br/>*{<br/>margin:0;<br/>padding:0;<br/>}<br/>#menu{<br/>background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFb_LOenNozue8nmVwgOSp3AOBPodmPMiZ9Gn68Nn4CgTf0aP-lf8aoRhsdtRcRcDIcpK3eBy_nHEgAaCYU7cc9XSmjJoadtOQvuJUP1csJ8EVoLCHNHADmcy2bmHuqYobOs1gUcatIz8/s1600/menu_026_bg.jpg) no-repeat;<br/>width:172px;<br/>height:191px;<br/>padding:15px;<br/>}<br/>#menu ul{<br/>list-style:none;<br/>padding:0 0 0 8px;<br/>}<br/>#menu li{<br/>list-style:none;<br/>display:block;<br/>padding:10px 0;<br/>}<br/>#menu li a{<br/>list-style:none;<br/>display:block;<br/>background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhFLqIRbfzUAasYctDDTlS5MaqXF5_-7enFm1vYJSXg-qUaC_fM0HS0rZqugZ0iMtLkqrdZoV2P9DaQn1Gx-TM6isOhY7B3q1Dom1T9qlbLavnd9mzlpza2uE4UqhCibRDuoDerfbFkpQ/s1600/menu_026_b.gif) no-repeat left center;<br/>color:#ffe991;<br/>font-weight:bold;<br/>text-transform:uppercase;<br/>font-size:11px;<br/>line-height:1.2em;<br/>text-decoration:none;<br/>padding:0 5px 0 25px;<br/>}<br/>#menu li a:hover{<br/>background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2pxitNyjBEqxz0f1Vr84Ii45li1wOJfjTQdtXk4Za3rV9YNTmF4D0z6V01UHoQFLmU_hkgVksOqtJsi6Qu2cd77bDwtSu3GWQVNxn_Sir2_hrHo0HAqnlYWy23GhYX7ONptDOV6QL88/s1600/menu_026_h.gif) no-repeat left center;<br/>color:#fff;<br/>text-decoration:none;<br/>}<br/>#menu li .current{<br/>list-style:none;<br/>display:block;<br/>background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2pxitNyjBEqxz0f1Vr84Ii45li1wOJfjTQdtXk4Za3rV9YNTmF4D0z6V01UHoQFLmU_hkgVksOqtJsi6Qu2cd77bDwtSu3GWQVNxn_Sir2_hrHo0HAqnlYWy23GhYX7ONptDOV6QL88/s1600/menu_026_h.gif) no-repeat left center;<br/>color:#fff;<br/>font-weight:bold;<br/>text-transform:uppercase;<br/>font-size:11px;<br/>text-decoration:none;<br/>padding:0 5px 0 25px;<br/>}<br/>#menu li a.current, #menu li a:hover.current{<br/>background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2pxitNyjBEqxz0f1Vr84Ii45li1wOJfjTQdtXk4Za3rV9YNTmF4D0z6V01UHoQFLmU_hkgVksOqtJsi6Qu2cd77bDwtSu3GWQVNxn_Sir2_hrHo0HAqnlYWy23GhYX7ONptDOV6QL88/s1600/menu_026_h.gif) no-repeat left center;<br/>color:#fff;<br/>text-decoration:none;<br/>}<br/></style>
 
Catatan tulisan yang berwarna merah silahkan ganti dengan link kamu sendiri dan yang berwarna biru ganti dengan judul yang diinginkan dan yang biru itu ganti sesuai keinginan anda itu adalah judul menu 

0 komentar:

Post a Comment