BLOG AMATIRAN

Membuat Menu Dropdown Melayang Keren

Kali ini silakan untuk yang punya blog, ingin membuat menu seperti yang saya gunakan saat ini, langsung saja saya bagikan,
sebelumnya silakan lihat dulu penampakannya seperti apa,



Cara memasangnya cukup dengan menambahkan HTML/JavaScript, tidak perlu mencari kode <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'> yang jika salah blog anda akan berantakan, ya.... berantakan seperti pengalaman saya, hehe.... cara membuat menu ini cocok untuk blogger pemula seperti saya, jadi cukup Klik Tata Letak > Tambahkan Gadget > HTML/JavaScript
silakan copy edit dan paste script dibawah ini....
atau bisa di download disini via 4shared cuma 2KB lho.....


<style type='text/css'>

#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekJJmMPLhnqOPEPm3-Td9zylgAydI0DJTb2M96D8YZqe3WD3jvWIgWzN3ZXW_Ake8JaR6MscIbKbpTBixj8frt0SZlJcq1w4yCKTj-haYiucuv7uBLWIGAymtXrSfwT7oTkeNeVaf7lo1/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 40px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4qyxeFywO53I3DJi9w9mMiBP7HWlb9RX2Ks4mOmWSe96hSx5S1RiFkxs9cxZv82IlYx9s1Hirq0pCJ_knIflX9Lps7fNDBCp8Wtinuj82mt2S-YaYAwVMmXvgtdxTr2RrIAwf8KAUnwY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 30px 7px 20px}
#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;}

</style>


    <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='http://rah-koko.blogspot.com'><span>HOME</span>Homepage</a></li>
    <li><a class='arrow' href='http://rah-koko.blogspot.com/search/label/Download%20Lagu%20Bali'><span>Download</span>Lagu Bali</a>
    <ul>
    <li><a href='http://rah-koko.blogspot.com/2013/05/album-pop-bali-kompilasi.html'>Pop Bali Kompilasi</a></li>
    <li class='hr'/>
    <li><a href='http://rah-koko.blogspot.com/2013/06/dedari-comp-vol-1.html'>Dedari Comp Vol 1</a></li>
    <li class='hr'/>
    <li><a href='http://rah-koko.blogspot.com/2013/05/alin-manis-saja-manis.html'>Alin</a></li>
    <li class='hr'/>
    <li><a href='http://rah-koko.blogspot.com/2013/01/galuh-bilen-pelet-bali.html'>Galuh Bilen</a></li>
    </li></li></li></ul>
    </li>

    <li><a class='arrow' href='http://rah-koko.blogspot.com/search/label/Software%20Gratis'><span>Download</span>Software Gratis</a>
    <ul>
    <li><a href='http://rah-koko.blogspot.com/2013/06/any-video-converter-271-gratis.html'>Any Video Converter 4.7.1</a></li>
    <li class='hr'/>
    <li><a href='http://rah-koko.blogspot.com/2013/06/horoskop-offline-untuk-windows-gratis.html'>Horoskop Gratis</a></li>
    <li class='hr'/>
    <li><a href='http://rah-koko.blogspot.com/2013/06/kalender-bali-digital-gratis.html'>Kalender Bali Offline</a></li>
    <li class='hr'/>
    <li><a href='http://rah-koko.blogspot.com/2011/04/normal-0-false-false-false.html'>AudioShell</a></li>
    </li></li></li></ul>
    </li>

    <li><a class='arrow'http://rah-koko.blogspot.com/search/label/kesehatan'><span>INFO</span>Kesehatan</a>
    <ul>
    <li><a href='http://rah-koko.blogspot.com/2013/03/3-cara-hilangkan-bau-tak-sedap-di-area.html'>3 Cara Hilangkan Bau Tak Sedap Pada Area Intim</a></li>
    <li class='hr'/>
    <li><a href='http://rah-koko.blogspot.com/2013/03/sembuhkan-jerawat-dengan-jus-bawang.html'>Sembuhkan Jerawat Dengan Jus Bawang putih</a></li>
    <li class='hr'/>
    <li><a href='#'>#</a></li>
    <li class='hr'/>
    <li><a href='#'>#</a></li>
    </li></li></li></ul>
    </li>
    <li><a class='arrow'#'><span>Tentang Saya</span>Hubungi Saya</a>
    <ul>
    <li><a href='http://www.facebook.com/rah.koko'>Facebook</a></li>
    <li class='hr'/>
    <li><a href='https://twitter.com/Rah_koko'>Twitter</a></li>
    </li></ul></li></ul>


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

 Catatan: 
Warna MERAH ganti dengan link tujuan anda
Warna BIRU ganti dengan Judul dari linknya
Warna Hijau ganti dengan keterangan, seperti gambar diatas ya!!

Selamat mencoba, semoga sukses, 
jika ada masalah silakan dikomentar, sebisa saya akan saya bantu,


Share:

0 comments:

Post a Comment

Popular Posts

Powered by Blogger.

Followers

Total Pageviews

Download

Recent Posts