- Back to Home »
- Blogger , TnT , Tutorial , Widget »
- Menu Dropdown Melayang Version 1 by Jalz~
Posted by : jalzae
Tuesday, May 8, 2012
Menu Dropdown Apa Sih??Melayang ??? gimana ya bentuknya ?? hahaha....
langsung check out reviewnya gan ^____^....ini dia..
tentunya saya membagi ini Bukan tanpa sebab...Setelah kemaren saya membahas Open Graph Meta Tag Untuk Facebook ...tentunya jika blog hanya terkenal pun tidak cukup...tampilan juga harus disesuaikan ^_^ ..contohnya saya memasang widget share lengkap seperti di samping ini..
Langsung saja...Gimana Cara Pasangnya ?? Check it out ~~>
1.Login Blogger Kamu
2.Masuk Ke Menu Page Elemen/Elemen Laman<<~Agar Lebih mudah
3.Selanjutnya Klik Kanan EDIT HTML dan centang
4. Cari </b:skin>
5.Pastekan Kode Berikut Diatasnya ...
* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic {background:#2a4375 top center;width:100%;margin:0 auto;padding:0 auto;border-bottom:1px solid #165D92;}
#menuwrapper {width:960px;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/AVvXsEi5DrpTYp-DV-I_oxiEKhTw0HbUPNUn7o_70sm4aIEOtIZHmTbJKBmwyJckM0GS6omq3sXzmt_QXq-AB7-kPpXZSe2PY_HOL21vwAlZFnO4jZFGShFQb9Q5gmTVEOs-s_vyHSxVkBHbOUY/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/AVvXsEhYAUl1J2RyxCHQ-_5sh5t3h0tP9s1Ij_GwfrNUQ_F50T8eqx7b7tp5fwUcn6d5FQPJrxvRW1GcSkvWl5j5MBe3DN_ALLh1EsKydEtOpVvN_2dVTuiRKRjl2hEM1XA9Zvr7WWtLDgz-VAo/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: url(search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
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: 200px;
}
6. Cari Kode <header> atau sejenisnya <<~biasanya juga header-wrapper
Pastekan kode berikut dibawahnya ^_^
<div id='fixed'>
<div id='fixedinner'>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHbnGM7zTNdJQgpFPV3eA6gPiuWq4M3ZS6vf0l6RcrFOidjj5TlDnUgoHsjOAz7R8_-Y_tG1V6Q3L-6_1NnAlBEEDnhWCLmqNNZ0xPTTOBGdibvfC6o8ghi62vWstKmzDY5mQrq-kO-E/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='http://tvxqff.blogspot.com'>Kim Jaejoong</a></li>
<li><a href='http://jalz-cassieast.blogspot.com/2012/03/tvxq-for-you-mobile.html'>Kim Junsu</a>
</li>
<li><a href='http://jalz-cassieast.blogspot.com/search/label/Blogger'>Jung Yunho</a>
<ul class='children'>
<li><a href='http://jalz-cassieast.blogspot.com/search/label/Tutorial'>Tutorial</a></li>
<li><a href='http://jalz-cassieast.blogspot.com/search/label/Widget'>Widget</a></li>
<li><a href='http://jalz-cassieast.blogspot.com/search/label/TnT'>Tips And Trick</a></li>
<li><a href='http://jalz-cassieast.blogspot.com/search/label/Template'>Template</a></li>
<li><a href='http://jalz-cassieast.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='http://jalz-cassieast.blogspot.com/search/label/Pc%20Tutor'>Pc Tutorial</a></li>
</ul></li>
<li><a href='#'>Park Yoochun</a>
<ul class='children'>
</ul></li>
<li><a href='http://jalz-cassieast.blogspot.com/2012/02/link-tradingjalz-tvxq.html'>Max Changmin</a></li>
<li>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Search...' size='40' type='text'/>
</form></li>
<li><a href='http://facebook.com/ka.jihoon'><img alt='Home' border='0' src='http://facebook.com/favicon.ico' style='padding:0px;'/></a></li>
<li><a href='http://twitter.com/kajihoon'><img alt='Home' border='0' src='http://twitter.com/favicon.ico' style='padding:0px;'/></a></li>
<li><a href='http://www.facebook.com/sharer.php' name='fb_share' type='button'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div><!-- end fixed jalz menu -->
</div>
Dan jadilah seperti ini:
Note:
Penjelasan ----------------------------------------------------------------------------------------
<li><a href='http://jalz-cassieast.blogspot.com/2012/02/link-tradingjalz-tvxq.html'>Max Changmin</a></li>
Kode berwarna Orange:menunjukan Link yang akan dibuka saat Kode tanda Merah Di klik
Tanda Merah menunjukan kode yang muncul di barisan menu ~>~