Membuat Menu Slide Di Atas Heander

Membuat menu slide yang keren, seperti Apa menu slide ini.....?? Menu ini, Akan muncul di Bagian Atas header blog kita......

Dan kelihatan Hanya sebagian saja, bila kita arahkan kursor ke menu tersebut maka menu tersebut akan muncul sempurna.

Kelebihan menu ini, selain keren juga di lengkapi gambar yang bisa di bilang sebagai icon nya,

Nah untuk Caranya ada di bawah ini

1. Log in ke blogger
2. Klik rancangan / Layot
3. Klik Edit Html
4. Centang Expand template widget
5. Cari kode </head> dan letakan kode di bawah ini di Atas nya

<script type="text/javascript" src="http://cilimoes-script-file.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});


$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">

<li class="home"><a href="http://www.gribigan.co.cc/"><span>Home</span></a></li>

<li class="about"><a href="http://www.gribigan.co.cc/"><span>About</span></a></li>

<li class="search"><a href="http://www.gribigan.co.cc/"><span>Search</span></a></li>

<li class="photos"><a href="http://www.gribigan.co.cc/"><span>Photos</span></a></li>

<li class="rssfeed"><a href="http://www.gribigan.co.cc/"><span>Rss Feed</span></a></li>

<li class="podcasts"><a href="http://www.gribigan.co.cc/"><span>Podcasts</span></a></li>

<li class="contact"><a href="http://www.gribigan.co.cc/"><span>Contact</span></a></li>

</ul>

6. Cari kode  ]]></b:skin> dan Letakan kode di bawah ini di Atasnya

ul#navigation {

position: absolute;

float:left;

margin: 0px;

padding: 0px;

top: 0px;

right: 220px;

list-style: none;

z-index:999999;

width:721px;

}

ul#navigation li {

width: 103px;

display:inline;

float:left; 

}

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#E7F2F9;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 

}

ul#navigation li a:hover{

background-color:#CAE3F2;

}

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

text-shadow: 0 -1px 1px #fff; 

}

ul#navigation .home a{

background-image: url(URL GAMBAR 1);

}

ul#navigation .about a {

background-image: url(URL GAMBAR 2);

}

ul#navigation .search a {

background-image: url(URL GAMBAR 3);

}

ul#navigation .podcasts a {

background-image: url(URL GAMBAR 4);

}

ul#navigation .rssfeed a {

background-image: url(URL GAMBAR 5);

}

ul#navigation .photos a {

background-image: url(URL GAMBAR 6);

}

ul#navigation .contact a {

background-image: url(URL GAMBAR 7);

}

KETERANGAN :

1. Ganti alamat blog / website Anda
2. URL GAMBAR : Ganti dengan gambar icon selera Anda

" Setelah itu simpan template dan lihat menu nya Ada di Atas header blog anda "