Menu “Beautiful Slide Out Navigation"


Cara membuatnya sebagai berikut:
  1. Login ke blogger
  2. Menuju menu Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. 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(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(http://4.bp.blogspot.com/-U0VzmKiVx3k/TZBeclR4x5I/AAAAAAAAAgc/c6T4Q-__HTw/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(http://2.bp.blogspot.com/-84f0jEeeffc/TZBehJq90AI/AAAAAAAAAgs/w4UaF1VPgLs/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(http://1.bp.blogspot.com/-sbloKktswgc/TZBed0gK93I/AAAAAAAAAgg/avwmYOErpGI/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(http://1.bp.blogspot.com/-Ro686lePoM8/TZBef9OyGcI/AAAAAAAAAgo/e_QaROPLVx0/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(http://3.bp.blogspot.com/-fi5XP0zvpB8/TZBeael-n5I/AAAAAAAAAgU/bwS_VlGvi-U/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(http://4.bp.blogspot.com/-RTxgq3NFIYM/TZBeei8J4-I/AAAAAAAAAgk/Zgo-9V-JXss/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> :
&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;
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.
 

2 comments:

Kami menawarkan software atau game yang telah di posting pada situs ini untuk anda miliki dengan cara klik link Order DVD diatas atau SMS ke 085 730 281 770 dengan format :

ORDER DVD (spasi) Nama Aplikasi/Paket (spasi) Nama dan alamat lengkap anda lalu kirim sms ke 085 730 281 770