Jumat, 12 Oktober 2012

Cara Membuat Menu Horizontal Drapdown Di Blog


Oke lama Sekali saya gak update artike baru kali ini saya bakalan bahas habis mengenai menu bar drapdown seperti punya saya ini...oke langsung aja ya perhatikan baik-baik Tutorial ini

Untuk membuat menu seperti punya saya kalian harus punya blog dulu heheheh....
baca Tutorial Cara Membuat Blog Di Sini
 Kalo kalian sudah punya Blog kalian Masuk ke Dasbord
Control Panel Blog Kalian....
Pilih Tamplate, Edit HTML,( Oya jangan lupa Beckup Dulu ya Untuk Persiapan saja jika terjadi kegagalan nantinya)



Setelah basuk di Edit HTML kalian jangan lupa Centang Expand Template Widget

Cari Kode Brikut :

]]></b:skin> kalo sudah ketemu Taroh Kode Diwah ini Tepat Di Atas Kode ]]></b:skin>



<style type='text/css'> * Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic {background:#2a4375 top center;width:100%;margin:0 auto;padding:0 auto;border-bottom:1px solid #165D92;} #menuwrapper {width:110%;margin:0 auto;height:41px; background:#2a4375;} .clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;} #menubar {width:100%;} #menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:Arial, sans-serif;} #menubar a {display: block;text-decoration: none;padding: 13px 12px 12px 12px;font-size:12px;font-weight:bold;text-transform:none;color:#d1d8e5;border-left:1px solid #165D92} #menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOwkp4pi2FvoZr0kXMWrpuybrKiPnUcU8__s5B8Qhp1mgclM0gG2j1OHyzGKVkJYXXxR3bvDgAi1vDeiN9RjKCHbxOevSvvkyOlXSyOaoPKN3whJQj_xQzULaS6FdfrNdHad4edryaqlA/s1600/arrow.gif);background-repeat: no-repeat;padding: 13px 24px 12px 12px;background-position: right center;} #menubar li {float: left;position: relative;} /* hide from IE mac \*/ #menubar li {position: static; width: auto;} /* end hiding from IE5 mac */ #menubar li ul, #menubar ul li {width:165px;} #menubar ul li a {text-align:left;color:#13598D;padding: 6px 12px;font-size: 12px;font-weight:bold;text-transform:none;font-family:Arial;} #menubar li ul {z-index:100;position: absolute;display: none;background:#0F4E7D;padding-bottom:5px;} #menubar li ul {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;} #menubar li ul {-moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;} #menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#115383;color:#d1d8e5;text-decoration:none;} #menubar li:hover ul, #menubar li.hvr ul {display: block;} #menubar li:hover ul a, #menubar li.hvr ul a {color:#d1d8e5;background-color:transparent;text-decoration:none;} #menubar li ul li.hr {border-bottom:1px solid #296A99; border-top:1px solid #0E4064; display:block; font-size: 1px; height: 0px; line-height: 0px; margin:4px 0; } #menubar ul a:hover {background-color: #0E3B5D!important;color: #d1d8e5 !important;text-decoration:none;} #menubar li.home a, #menubar li.home a:visited {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-RGGbqoj39bRNaXlIpOH1KKc2js9WwO823V1sQJrMugoz7lTsxEPKOfznmGPOY9yytN0uXc6vbRDVWQpmKD4-u0k51oc59ksVEhymWzRYjdi4we4Hb4KFuLCMiAy2FHDy5YB47qUl-l8/s1600/menu_hover.gif) repeat-x top left;border-left:none} #menubar li.home a:hover {background:#1d335d;} /* Fixed Position */ #inner{padding-top:41px;} #fixed {position:fixed;top:0;left:0;width:100%;height:41px;z-index:999;} #fixedinner{text-align:center;background:transparent;height:41px;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;} /* -- SET FOR STATUS MESSAGE -- */ #search { } #search input[type="text"] { background: #fffff; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #0000; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { width: 150px; } </style>


Setelah itu cari kode </head>
Dan letakan Kode Berikut Tepat Dibawah Kode </head>


<div id='header-wrapper'>
<div id='fixed'>
<div id='fixedinner'>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9HA0FcoBJhJZy_fsBV19zFuVt43PcdDvsC6b91S1SVpD0f4VGjPUY62VTqlDb4910r0kf1OXlD4tN6qKf1Bc1lv2PExBkIy4iKE8FT5E1Sog6zgzpIXAy4S7bTh5cRV88BWsQ4oxpiWw/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://gudangdownloadd.blogspot.com/2012/09/kontak-admin_3.html' target='new'>Kontak Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='KONTAK GOOGLE' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/sigitholic' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.yahoo.com/indrasarianita' target='new'>Contact on Myyahoo</a></li>
<li><a href='http://www.facebook.com/Gudangdownloadgratis' target='new'>Gudangdownload on Facebook</a></li>
</ul>
</li>
<li><a href='http://gudangdownloadd.blogspot.com/p/blog-page.html' target='new'>Daftar Isi</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/Komputer?max-results=3'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/tips%20bloger?max-results=3'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/intenet?max-results=3'>Internet</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/seo?max-results=3'>Seo</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Download Gratis</a>
<ul>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/download%20script?max-results=3'>Script</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/Game%20PC?max-results=3'>Game</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/software?max-results=3'>Software</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/Mp3?max-results=3'>Mp3</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/download%20script?max-results=3'>Download Sript</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/Game%20PC?max-results=3'>Game Pc</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/intenet?max-results=3'>Internet</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/komputer?max-results=3'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/seo?max-results=3'>Seo</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/software?max-results=3'>Software</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/Tutorial?max-results=3'>Tutorial</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/tips%20bloger?max-results=3'>Tips Bloger</a></li>
</ul>
</li>
<li><a href='http://gudangdownloadd.blogspot.com/p/tukar-link.html' target='new'>Tukar Link</a></li>
<li><a class='trigger'>Lucu Unik</a>
<ul>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/unik%20dan%20lucu?max-results=3'><Foto Lucu</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/cerita%20lucu?max-results=3'>Cerita Lucu</a></li>
<li class='hr'/>
<li><a href='http://gudangdownloadd.blogspot.com/search/label/lain-lain?max-results=3'>Artikel Lainya &gt;&gt;&gt;</a></li>
<li class='hr'/>
</ul>
</li>
</ul>
<br class='clearit'/>
</div></div></div></div></div>


Keterangan Ganti yang berwarna MERAH Dengan alamat Artikel Anda
Ganti Yang Warna BIRU Dengan nama yang akan tampil di menu bar..
 Oke sob sekian ya Tutorialnya Baca Artikel yang Lain Juga ya>>>jangan lupa comentnya

0 komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...