Cara Membuat Menu Horizontal

Beautiful Slide Out Navigation Horizontal Menu

Tutorial Blogspot : Cara Membuat Menu Horizontal
 

Jika ingin membuat menu horizontal sebagai navigasi di blog Anda mungkin artikel Cara Membuat Menu Horizontal bisa membantu Anda untuk mengatasi solusi Membuat Menu Horizontal atau Navigasi Horizontal pada blog Anda. Berikut cara pembuatan  Menu Horizontal




1. Masuk ke dashboard blogger
2. Pilih Rancangan --> Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut di atasnya

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left;
}
ul#navixed {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navixed li {
width: 103px;
display:inline;
float:left;
}
ul#navixed li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000;
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#navixed li a:hover{
background-color:#000;
}
ul#navixed li a span{
letter-spacing:2px;
font-size:11px;
color:#FFF;

}
ul#navixed .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMEnOdtPRgo5MNf904Lmi6wFtThh-sJ-i2VJkQwJrIDjX8RTz3FtLXjfJUyS2PrqGXpZxPYhbJvl0fLydjHV3ZDmylFIhvdgp1BsaiV-dn-DMsjSy0iaIjItEbilAseGSontigT_jIuV4/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPrF_aLaCgMgSUKfOm5qITc0AtZ3P7DrKSrHVMrgASoXfTEWiiEC6THjZfNpYEDK2QwrxCNKtxukPo7K9fevxsrpUjuj3NEnZtpONtowhXKTU8dkCNpKJkUY2CA3hlxtAMEw3IyzC05s/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU5tytVGZBzDMipntrDC3g_prCAGVqNFYOXsOLDV8Rok583ZHKbwTwiVXv57jQ2K1WvNFKz673lp1TGq4vTMPjegH4aTVEpIoTb07dKJRACs3mGcaqkv2WJSt7oztQm-p_OiDEZ5TAQMw/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiegqphOdanh6gAoLevSON2m2L7dhNlchCewHbuReACsze7HKnOjWyJ3gJ10UhpwL0yB8_CUB3IiB5Pqwh4dynJ8OGfLmoylCB9KhqftpjgJTcNsJH8mQAxd_UIs2GuoXwNFG8w9fsRkWI/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RWgoESTQnW4Qum59FzN1MPfW1bIH07TL1doLqSFvhMvJyadTVpvu53H6NpnL6eVOrGigaj3GaP1NeVCVXh7xx8QTwpaBAMjKiSpbXqKHe1yk4v8dY4FXxJ_q9om21a23dXy9gfE8yqc/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUW_NLnJnxkX5Y4DabytMXoADeMXih1eTYF2XDFQvFVtE8uVkydnntRb7BlBvXjzKyNKKB_buhel3YtMgTZdoQl-rxzNmDyT0V9plrfE48EpiJnX8uILYCTApPaIePLYmdeQzGjwH0Xx8/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHquIGFkAZhShGYXjKRoQG99e3s9eBbLpPg4eZqqvh-4N-53sZTO0FXf9RttxtPEfbaWktsQ44h5ZOKHAxg8e9tgejS8ICYPgOma3WWVVqLdz1QH0jBEL_nZ35oCzIvlRaXeW3vyMAp8/s1600/mail.png);
}

4. Jika sudah, cari lagi kode </head>, kemudian script berikut ini di atasnya
 

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/&gt;
&lt;script src='http://kangdadang.googlecode.com/files/jcolor.js'/&gt;
&lt;script type='text/javascript'&gt;
$(function() {
var d=300;
$(&amp;#39;#navixed a&amp;#39;).each(function(){
$(this).stop().animate({
&amp;#39;marginTop&amp;#39;:&amp;#39;-80px&amp;#39;
},d+=150);
});

$(&amp;#39;#navixed &amp;gt; li&amp;#39;).hover(
function () {
$(&amp;#39;a&amp;#39;,$(this)).stop().animate({
&amp;#39;marginTop&amp;#39;:&amp;#39;-2px&amp;#39;
},200);
},
function () {
$(&amp;#39;a&amp;#39;,$(this)).stop().animate({
&amp;#39;marginTop&amp;#39;:&amp;#39;-80px&amp;#39;
},200);
}
);
});
&lt;/script&gt;

5. Untuk menampilkan menu navigasi horizontalnya, simpan kode CSS berikut sebelum <body> 

<ul id='navixed'>
<li class='home'><a href='#'><span>Home</span></a></li>
<li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
<li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

6. Selesai, jangan lupa simpan

Sumber : http://4-jie.blogspot.com/2011/09/beautiful-slide-out-navigation.html