Cara membuatnya sebagai berikut:
- Login ke blogger
- Menuju menu Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Copy lalu Simpan kode berikut tepat diatasnya code ]]></b:skin>
/*----------------
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/AVvXsEgdgpC9gKLesGZB3klF4HLZ6Bmidptk4M7PUhgxVCi-_WDQj3CXm4hyphenhyphenr8UNh-cYjh103nYLVNBTLRCFlYQGeCDf6aD6vymAOh2kBl6ybeHFdLW0W1wBCMpRoialNGg_QMwcpyfy7wMeXRg/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzL0iQ9_q81ziPguXt5Zi41GsXMwUouKAMhBbuREcdUdIX7fTgIerJ4wKZsKroG86KownhsfVqxtO8QN4b4wlkX7d5exG2LRCsKtKRtF66IN4zDzvTfp7b1a0vwIYwkchofsLvOAhCN0s/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir51V_RBGiw_M9UV_C5pxfe8jx648F2_Ffq86sZGgRC7wonT6yYCBNXIL008ZXi8V4iDnJNsvl7SG1ReKKCRctbkt9pLDyezyuzb4ETgUIFP6shnTjbEMlLuFMKVpYet_P30mOWgVujAk/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8D7PI_PWmibiobBYnXZo9EOMKvaicLx_urBuw4wZVRrvR88LpoL4eg2guSmSigCaYbeTVK8gqe-5lWuBid37JzqtX1cUvHxTwieUsWMSVyzqwllDCRsGoICJ8LV382NnZ0IbzRHwzhQ/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyUV-eFBV7OpxDjjdGUuC3tX5Ujnp8qwp5Tcn0l9KJBfTk_kmEUNNEL9dDebHtDad5QYLRhETtcxYHQCvTzr4fYYBXYc783cOSRZBmpZStQl8ZkMCOygQnSn1fuX3QQyiXTAN0T-36R2M/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrtcdIhfO4NW-3iAprZYNOIX3zfbT4rp-6L5y-u7Pd-GB6kCAax2A6hQcF657YqmNcdqOdF1LgRGcveU-_xWYApAcD11ChNm9p8tTdB675UD7hN0Hjtx4PPXVnu5ixfCwQHPbv_AIy_ds/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ypXd9eN4yZ0kQibwnEl2njfV5wnu_Hb-eYXwlTU4ujlvDUqRc5pVjnip1pM-fiv7kcre7I71fLY_1qv4pBH2XuHce1rFoR9IUGMj-S0kGFx3Hgm7xn8Rp1nQqV-nDZY8wDYVHRf2msY/s1600/mail.png);
Jangan disave dulu brow,masih panjang nih langkahnya,yuk mari lanjutin..Kalau sudah sekarang tekan ctrl+f dan masukan code </head> dan tekan enter lalu copy code dibawah ini tepat diatas code </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
$(function() {
var d=300;
$(&#39;#navixed a&#39;).each(function(){
$(this).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},d+=150);
});
$(&#39;#navixed &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-2px&#39;
},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},200);
}
);
}); </script>
Lalu tambahkan widget html blog<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>
Ganti
# dengan url anda sendiri.
