Rabu, 25 September 2013

Cara Membuat Beautiful Slide Out Navigation di Blog

Cara Membuat Beautiful Slide Out Navigation di Blog - Tips Blog untuk mempercantik blog anda semakin banyak tersebar di dunia maya, contoh Cara Membuat Beautiful Slide Out Navigation di Blog. Efek dari slide out navigation ini menggunakan Jquery yang bagus dalam membuat hal slide begituan. Jadi pastikan anda mencoba anda agar mempercantik hiasan blog anda.

Disini saya akan bagikan cara pemakaiannya :

1. Buka Blogger anda
2. Pilih Rancangan -> Edit HTML -> Centang Expand Widgets Templates
3. Kemudian Cari kode script dan letakkan kode dibawah tepat diatas

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

4. Setelah itu cari kembali kode script </body> dan letakkan kembali tepat dibawah kode </body>

<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>

5. Cari lagi kode script <body> dan letakkan lagi kode dibawah ini tepat diatas 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>

6. Save tempalate anda dan lihat hasilnya.

Note :*  # ganti dengan link anda masing-masing.

ref:http://hariopamungkas.blogspot.com

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

Ditulis Oleh : Alfrandhy dharwisi // 17.07
Kategori:

Comments
0 Comments

0 komentar:

Poskan Komentar

umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin

1. Komentar SPAM akan dihapus segera setelah saya review
2. Pastikan untuk klik "Berlangganan Lewat Email" untuk membangun kreatifitas blog ini
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana
4. Bila menyebarluaskan artikel ini harap cantumkan baclink nya

Bila anda senang dengan artikel ini silahkan Klick Disini atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar atau share sesuai dengan artikel diatas.

 

Maaf Kenyamanan Anda Terganngu Website Sedang Direnobvasi

×

Powered By Facebook and Get This Widget

Site info

My Friend

lingkaran google plus