• Home Home
  • Buku Tamu
  • Kontak
  • Fb
  • Download Theme Blogger
  • Versi Mobile

:D

THIS BLOG HAS BEEN HACKED :D


#YOSH24


Thanks for Quest

I WIN


#HackerIndonesia

» » cara buat Beautiful Slide Out Navigation

cara buat Beautiful Slide Out Navigation

"fv aRhy" 12 Apr 2011

Demonya bisa dilihat disini








    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya : 

/*----------------
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);
}

dan simpan script ini di atas kode </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>

terakhir simpan cara pemanggilannya di atas kode <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>

selesai... jangan lupa simpan template......
Label:

Posting Komentar

blogging tidak ubahnya dunia offline, banyak hal yang harus anda pahami. jangan menerima suatu informasi dengan apa adanya. blogger yang maju selalu kritis terhadap apapun,,,salah satu caranya dengan berkomentar..