Menu Apple Di Blog

Biasanya pemilik blogger ingin tampilan bloggernya menjadi indah dan elegan dengan tampilan seperti web/blog populer. Pada kali ini saya akan memberikan script menu pada blog seperti pada situs apple. Namun biasanya kebanyakan menu tampilannya ke samping namun kai ini saya akan memberikan script menu dengan tampilan ke bawah. Langsung pada langkahnya

Pertama salin kode berikut ke dalam formulir gadget di blog anda

<ul id="nav">
<li><a href="#" class="apple"><span>Apple</span></a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Support</a></li>
<li class="search_container">
<form class="search" method="get" action="#">
<label for="search">
<input type="text" id="search" placeholder="Search" />
</label>
</form>
</li>
</ul>

<style type="text/CSS">
#nav {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#cacaca), to(#848484));
background:-moz-linear-gradient(top, #cacaca, #848484);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);
display:inline-block;
list-style:none;
margin:0 0 20px;
overflow:hidden;
padding:0;
}
#nav li { border-right:1px solid #808080; -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); float:bottom; }
#nav li a { color:#262626; display:block; font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif; height:36px; line-height:34px; padding:0 30px; text-decoration:none; text-shadow:0 1px #cecece; }
#nav li a:hover { background:-webkit-gradient(linear, 0 0, 0 100%, from(#929292), to(#535353)); background:-moz-linear-gradient(top, #929292, #535353); -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.1); color:#fff; text-shadow:0 -1px #414141; }
#nav li a:active { -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); }
#nav li .apple { padding:0; }
#nav li .apple:hover { -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; }
#nav li .apple span { background:url(images/apple.png) center 6px no-repeat; display:block; padding:0; text-indent:-99999em; width:102px; }
#nav li .current,
#nav li .current:hover { background:-webkit-gradient(linear, 0 0, 0 100%, from(#373737), to(#525051)); background:-moz-linear-gradient(top, #373737, #525051); -webkit-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow:inset 0 -10px 20px rgba(0,0,0,.05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255,255,255,.1); color:#fff; text-shadow:0 1px #242323; }
#nav .search_container { border-right:none; padding-right:5px; }
#nav .search { background:url(images/site-search-sprite.png) right -53px no-repeat; padding:7px 20px 8px 5px; }
#nav .search label { background:url(images/site-search-sprite.png) 0 0 no-repeat; display:block; height:20px; }
#nav .search input { border:none; color:#a9a9a9; height:12px; margin-left:25px; -webkit-appearance:none; }
#nav .search input:focus { border:none; outline:none; }
</style>

<script type='text/javascript'>
$(function() {
var $placeholder = $('input[placeholder]');
if ($placeholder.length > 0) {
var attrPh = $placeholder.attr('placeholder');
$placeholder.attr('value', attrPh)
.bind('focus', function() {
var $this = $(this),
$form = $this.parents('.search');
if($this.val() === attrPh)
$this.val('').css('color','#333');
$form.addClass('focus');
}).bind('blur', function() {
var $this = $(this),
$form = $this.parents('.search');
if($this.val() === '')
$this.val(attrPh).css('color','#a9a9a9');
$form.removeClass('focus');
});
}
});
</script>

Kemudian simpan. Nah hanya itu saja, sekali lagi saya hanya ingin membantu anda dan mungkin mempermudah dalam design blog. Semoga bermanfaat :D