About Mew O wSepakbolaTV OnlineGameOnlineAplikasiAwardDaftar isi

Minggu, 16 Desember 2012

Membuat menu dropdown keren



Nah sobat kali ini saya akan membagikan turtorial membuat menu dropdown keren seperti yang ada pada blog ini...
Sebelumnya saya sudah pernah post menu drop down lainnya...
sebagai referensi silahkan lihat disini....
Dropdown 1
Dropdown 2
Tinggal tergantung sobat untuk memilih yang mana...

Jika sobat tertarik dengan menu dropdown yang ini, silahkan ikuti turtorial berikut ini....
1. Login ke BLOG sobat...
2. Masuk ke Template > Edit HTML > centang Expand Template Widget
3. Search ]]></b:skin> (gunakan ctrl + f untuk mempercepat pencarian) dan pastekan script berikut ini tepat di atasnya


/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(http://1.bp.blogspot.com/-Dz55XjfHfIU/T2AtDWgb0aI/AAAAAAAAA9I/vZgjL1iEbgk/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 #444;border-top:3px 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 #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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:#edfdfd;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:#555!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}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

980px  adalah lebar dari menu tersebut

4. Search <div class='header-outer'> (gunakan ctrl + f untuk mempercepat pencarian) dan pastekan script berikut ini tepat di bawahya

<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='http://rexroom.blogspot.com/2012/10/the-owner.html'><span>This is</span>About Me</a></li>
<li><a href='http://rexroom.blogspot.com/2012/10/aplikasi_5.html'><span>Aplikasi</span>free Download</a></li>

<li><a class='arrow' href='#'><span>Turtorial</span>Belajar Ngeblog</a>
<ul>
<li><a href='http://rexroom.blogspot.com/2012/12/tentang-blogger.html'>Tentang Blogger</a></li>
<li class='hr'/>
<li><a href='http://rexroom.blogspot.com/2012/12/tips-n-tricks.html'>Tips N Tricks</a></li>
<li class='hr'/>
<li><a href='http://rexroom.blogspot.com/2012/12/aksesoris-blog.html'>Aksesoris BLog</a></li>
</ul>
</li>

<li><a href='http://rexroom.blogspot.com/2012/10/wow.html'><span>wOw</span>Top 10</a></li>

<li><a class='arrow' href='#'><span>Tukar Link</span>Komunitas Link</a>
<ul>
<li><a href='http://rexroom.blogspot.com/2012/10/link-komunitas.html'>Banner Link</a></li>
<li class='hr'/>
<li><a href='http://rexroom.blogspot.com/2012/12/text-link.html'>Text Link</a></li>
</ul>
</li>

<li><a href='http://rexroom.blogspot.com/2012/10/daftar-isi.html'><span>INDEX</span>Daftar isi BLog</a></li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>


Ubah sesuai kebutuhan sobat....

5. Save dan lihat hasilnya...

Related Post:

Ditulis Oleh : jolly sondakh ~ Great Works Of Art

Artikel Membuat menu dropdown keren ini diposting oleh jolly sondakh pada hari Minggu, 16 Desember 2012. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

:: Get this widget ! ::

Comments
2 Comments

2 komentar:

  1. [Help]

    trimakasih mas infonya,
    sudah saya coba dan hasilnya sudah keluar,,
    tapi di pengaturan Perancang Template Blogger nya koq rusak priviewnya ya???

    BalasHapus
    Balasan
    1. kadang bertabrakan sama scrypt2 lain yg pernah sobat tambahkan....faktor lain si karena faktor template yg tidak sesuai / cocok ^^

      Hapus