Cara Membuat Drop Down Menu Style Part I
Pertama-tama coba sobat lihat Desain drop down saya di atas header blog, yang saya kasih warna orange,, he..he.. Lumayan to, Sederhana mudah pemasangannya dan terkesan elegant.. hemmm
Mau mencobanya Soooob... Mari ikuti langkah berikut :
SEBELUM MELAKUKAN EDIT HTML SARAN KAMI DOWNLOAD TEMPLAT FUUL, SETELAH ITU LAKUKAN EDIT HTML.
1. Langsung aja, klu sudah kepengen buat menu drop down pasti udah dekat dengan kode ]]></b:skin>
cari kode di atas di taruh kode css dibawah ini tepat di atas kode No. 1
#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQinQVjwEPo1OgJErY9nhU3VLGDHlZmYmg8gXzxdOvUTa3dwA__wr4NW93fI7m1S6o1peDuVziM1SAuHK42IwfxqZlka6ztD7SUlcd9XQ_cvlITtD0iLD6YWr_EXwvAdwyNhjFLyx7EIK/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #ffd000;border-top:5px solid #f1c822}
#topbar{width:980px;height:40px;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:#CECECF;border-right:1px solid #fff;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SzrWC90kCwPR5qfS6ZPX8oOHZ5l1uo_iqIIxkRZRG31tLz-Ed_XVgDYfEq28xx16DSmg8lkyDkNZNEm5kL-5qF-_kB1RbsgqtLIQv-mZ66KKr6YEWUmiO7UlfkgYWvYSTZqr-l2J68M/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:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#ffd000!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}
2. Selanjutnya cari kode <div id='outer-wrapper'><div id='wrap2'>
3. Taruh kode di bawah ini tepat di bawah kode No. 2
<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='url 1'><span>Daftar Isi</span>Table Of Contens</a></li>
<li><a class='arrow' href='Url 2'><span>Support</span>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/Kode Googe + Sobat'>Goggle +</a></li>
<li class='hr'/>
<li><a href='Url FB Page Sobat'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='Url Tweet Sobat'>Contact on Twitter</a></li>
<li class='hr'/>
<li><a href='Url Feed Sobat'>RSS Feed</a></li>
<li class='hr'/>
<li><a href='Url Youtube Sobat'>Youtube</a></li>
</ul>
</li>
<li><a href='URL 3'><span>Sport File</span>Gambar</a></li>
<li><a href='URL 4'><span>Oto Sport</span>Automotive Word</a></li>
<li><a class='arrow' href='URL 5'><span>Ghoooosiip</span>Gosip</a>
<ul>
<li><a href='URL 6'>Film</a></li>
<li class='hr'/>
<li><a href='URL 7'>MP3</a></li>
<li class='hr'/>
<li><a href='URL 8'>Hots</a></li>
<li class='hr'/>
<li><a href='URL 9'>Health</a></li>
<li class='hr'/>
<li><a href='URL 10'>Games</a></li>
<li class='hr'/>
<li><a href='URL 11'>Komiks</a></li>
</ul>
</li>
<li><a href='URL 12'><span>Gratis</span>Lihat Doang</a></li>
<li><a class='arrow' href='URL 13'><span>Galery</span>Blogger Tuts</a>
<ul>
<li><a href='URL 14'>Blog gratis</a></li>
<li class='hr'/>
<li><a href='URL 15'>Blog bayar</a></li>
<li class='hr'/>
<li><a href='URL 16'>Bisnis</a></li>
<li class='hr'/>
<li><a href='URL 17'>Money</a></li>
<li class='hr'/>
<li><a href='URL 18'>Monetize</a></li>
<li class='hr'/>
<li><a href='URL 19'>Templat</a></li>
<li class='hr'/>
<li><a href='URL 20'>Facebook</a></li>
<li class='hr'/>
<li><a href='URL 21'>Twitter</a></li>
</ul>
</li>
<li><a href='URL 22'><span>News</span>News</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>
4. Klik Pratinjau (Berhasil)
5. Klik Simpan
Oke selamat mencoba dan Salam Sukses !!!
Post a Comment