Sabtu, 11 Mei 2013

Tutorial membuat menu cantik drop down

ingin menambahkan menu cantik pada bagian atas blog?
hmm...anda bisa coba yang ini.

silahkan log in ke blog, pilih pengaturan template, lalu edit template.

cari kode ]]></b:skin>
copy paste kode berikut dibawah kode tersebut :

#rsidebar-wrapper{
width:310px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPFRgGQxZSx6eAGHZdMdJMDQvKTAS89jlkb4PSGtnSXBMOZSHu95EBHGLMacXPIN_i1BZT-xTC1x6xERSZtdfNG1k6PsNzGz5BDuyqxCLr5vDz3Ovq6RW5jOhe_IJwZd81xuBjHYSjmZ4/h1600/bg_post.jpg) top repeat-x;
float:right;
margin-left:0px;
padding-right:5px;
margin-right:0px;
padding-top:0px;
padding-bottom:15px;
word-wrap:break-word;
overflow:hidden;
}

.menus,.menus *{
margin:0;
padding:0;
list-style:none;
list-style-type:none;
line-height:1.0
}

.menus ul{
position:absolute;
top:-999em;
width:100%
}

.menus ul li{
width:100%
}

.menus li:hover{
visibility:inherit;
}

.menus li{
float:left;
position:relative;
}

.menus a{
display:block;
position:relative
}

.menus li:hover ul,.menus li.sfHover ul{
left:0;
top:100%;
z-index:99
}

.menus li:hover li ul,.menus li.sfHover li ul{
top:-999em
}

.menus li li:hover ul,.menus li li.sfHover ul{
left:100%;
top:0
}

.menus li li:hover li ul,.menus li li.sfHover li ul{
top:-999em
}

.menus li li li:hover ul,.menus li li li.sfHover ul{
left:100%;
top:0
}

.sf-shadow ul{
padding:0 8px 9px 0;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-topright:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px
}

.menus .sf-shadow ul.sf-shadow-off{
background:transparent
}

.menu-primary-container{
float:left;
padding:0 12px;
margin-top:8px;
position:relative;
height:34px;
width:956px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-mppC8AfaYWC617N9LRM4Ysdr-Ro47-BDCrjrK0xz85Vd9xtrySVNHg1HGYYj1yKsnOB-gyDLouo5QEdAoXSMOVqy8D3cbGn424_8AP9hkuN5DlYk5ivNZXiOo58VNuWmXYgXTVHKZY/h1600/bg_menu.jpg) bottom repeat-x;
z-index:100;
-moz-border-radius:4px 4px 0 0;
-khtml-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
border-radius:4px 4px 0 0

box-shadow: 2px 2px 8px 1px #999;
-webkit-box-shadow: 2px 2px 8px 1px #999;
-moz-box-shadow: 2px 2px 8px 1px #999;
-khtml-box-shadow: 2px 2px 8px 1px #999;
}

.menu-primary{}

.menu-primary ul{
min-width:160px
}

.menu-primary li a{
color:#fff;
text-shadow:0px 1px 0px #000;
padding:11px 15px;
text-decoration:none;
text-transform:uppercase;
font:normal 11px Arial,Helvetica,Sans-serif;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

.menu-primary li a:hover,.menu-primary li a:active,.menu-primary li a:focus,.menu-primary li:hover &gt; a,.menu-primary li.current-cat &gt; a,.menu-primary li.current_page_item &gt; a,.menu-primary li.current-menu-item &gt; a{
color:#fff;
outline:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwvy94fp42uLOG-_pzBg2j-E2HaLr3S3CHkMN9H1Z4_NZDtd4jPlzBzkiC7xP9lu33oUO7XMZ_Cknx9EllZVkMjTYO1xAWjpEg9LFJkS7Hzk9pM5mRfSNJ5Cw1SqotdlBixm5f2rDArM/h1600/bg_fp-slider.png) center repeat-x;
}

.menu-primary li li a{
color:#fff;
text-transform:none;
background:#B62E1A;
padding:10px 15px;
margin:0;
border:0;
font-weight:normal;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
}

.menu-primary li li a:hover,.menu-primary li li a:active,.menu-primary li li a:focus,.menu-primary li li:hover &gt; a,.menu-primary li li.current-cat &gt; a,.menu-primary li li.current_page_item &gt; a,.menu-primary li li.current-menu-item &gt; a{
color:#fff;
background:#488040;
outline:0;
border-bottom:0;
text-decoration:none
background-filter:alpha(opacity=50);
background-opacity:0.5;
}

.menu-primary a.sf-with-ul{
padding-right:20px;
min-width:1px
}

.menu-primary .sf-sub-indicator{
position:absolute;
display:block;
overflow:hidden;
right:0;
top:0;
padding:9px 10px 0 0
}

.menu-primary li li .sf-sub-indicator{
padding:9px 10px 0 0
}

.wrap-menu-primary .sf-shadow ul{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXMcwb1J9F-6f_JGUKoutelKzpxqqmmliUusl_onxwkZ_0eJboy3fkHAezZPLZsm0BeRi144MBltJrdhBzEHtBr-ka2yjTTgLGbKbka6PlFhUzVgCzL-sttTu9jR0u6hXVnDl8JGiFNk/s1600/menu-primary-shadow.png&#39;) no-repeat bottom right
}

.menu-secondary-container{
position:relative;
margin:0px auto 0px;
height:35px;
width:980px;
z-index:300;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-mppC8AfaYWC617N9LRM4Ysdr-Ro47-BDCrjrK0xz85Vd9xtrySVNHg1HGYYj1yKsnOB-gyDLouo5QEdAoXSMOVqy8D3cbGn424_8AP9hkuN5DlYk5ivNZXiOo58VNuWmXYgXTVHKZY/h1600/bg_menu.jpg) bottom repeat-x;
box-shadow: 2px 2px 8px 1px #555;
-webkit-box-shadow: 2px 2px 8px 1px #555;
-moz-box-shadow: 2px 2px 8px 1px #555;
-khtml-box-shadow: 2px 2px 8px 1px #555;
}

.menu-secondary{}

.menu-secondary ul{
min-width:160px;
}

.menu-secondary li a{
color:#488040;
text-shadow:0px 1px 0px #000;
padding:13px 15px 10px 15px;
text-decoration:none;
text-transform:uppercase;
font:bold 12px Arial,Helvetica,Sans-serif;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}


.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover &gt; a,.menu-secondary li.current-cat &gt; a,.menu-secondary li.current_page_item &gt; a,.menu-secondary li.current-menu-item &gt; a{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwvy94fp42uLOG-_pzBg2j-E2HaLr3S3CHkMN9H1Z4_NZDtd4jPlzBzkiC7xP9lu33oUO7XMZ_Cknx9EllZVkMjTYO1xAWjpEg9LFJkS7Hzk9pM5mRfSNJ5Cw1SqotdlBixm5f2rDArM/h1600/bg_fp-slider.png) bottom repeat-x;
}

.menu-secondary li li a{
color:#fff;
background:#488040;
padding:10px 15px;
text-transform:none;
margin:0;
font-weight:bold;
border-top: 1px solid #fff;
background-filter:alpha(opacity=50);
background-opacity:0.5;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
}

.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover &gt; a,.menu-secondary li li.current-cat &gt; a,.menu-secondary li li.current_page_item &gt; a,.menu-secondary li li.current-menu-item &gt; a{
color:#000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-mppC8AfaYWC617N9LRM4Ysdr-Ro47-BDCrjrK0xz85Vd9xtrySVNHg1HGYYj1yKsnOB-gyDLouo5QEdAoXSMOVqy8D3cbGn424_8AP9hkuN5DlYk5ivNZXiOo58VNuWmXYgXTVHKZY/h80/bg_menu.jpg) bottom repeat-x;
outline:0;
background-filter:alpha(opacity=50);
background-opacity:0.5;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
}

.menu-secondary a.sf-with-ul{
padding-right:26px;
min-width:1px
}

.menu-secondary .sf-sub-indicator{
position:absolute;
display:block;
overflow:hidden;
right:0;
top:0;
padding:12px 13px 0 0
}

.menu-secondary li li .sf-sub-indicator{
padding:9px 13px 0 0
}

.wrap-menu-secondary .sf-shadow ul{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKJWO-xaz9lun9UyK1a4WNzp6L3MfKwxsbzDk-Fl9tKvjUh7wlpwNuXV-nn4mEeu0WXG_jJOdAkPiSTAzSbVAQCUlnF-iyODKo94vya94NlZJXMTLLFmRRDiWw6HBfyUvn8hmoYjXSlg/s1600/menu-secondary-shadow.png&#39;) no-repeat bottom right
}




selanjutnya ..............
cari kode </b:section>
copy paste kode berikut dibawah kode tersebut :

<div class='span-24'>
<div class='menu-secondary-container'>

<ul class='menus menu-secondary'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>LINK SAHABAT</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>BISNIS ONLINE</a>
<ul class='children'>
<li><a href='#'>PTC DAN PTP</a>
<ul class='children'>
<li><a href='#'>INDONESIA</a></li>
<li><a href='#'>INTERNATIONAL</a></li>
<li><a href='#'>LIST</a></li>
</ul>
</li>
<li><a href='#'>PUBLISHER</a></li>
<li><a href='#'>ADVERTISER</a></li>
<li><a href='#'>BELANJA ONLINE</a></li>
</ul>
</li>


<li><a href='#'>WEBSITE</a>
<ul class='children'>
<li><a href='#'>BLOGGER</a></li>
<li><a href='#'>WORDPRESS</a></li>
</ul>
</li>

<li><a href='http://petunjuktutorialuntukpemula.blogspot.com/2012/09/list-ptc-banner-n-link.html'>BANNER</a></li>

<li><a href='http://petunjuktutorialuntukpemula.blogspot.com/2012/09/contact-us.html'>CONTACT US</a></li>

</ul>

<span style='float:right;margin-top:5px;margin-right:5px'>
<div id='google_translate_element'/><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: &#39;id&#39;,
    autoDisplay: false,
    multilanguagePage: true,
    gaTrack: true,
    gaId: &#39;UA-24626560-2&#39;,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, &#39;google_translate_element&#39;);
}
</script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
</span>

</div>
</div>

lalu simpan