Senin, 27 Juni 2011

Cara Membuat Slide Out Navigation

K
etika Anda membuka halaman blog saya, tentunya Anda akan melihat beberapa menu navigasi berupa "Home", "About Me", "Bannerku" dan lain sebagainya yang tentunya unik dan menarik. Dan sering kali temen-temen blogger menyebutnya dengan istilah "Slide Out Navigation". Tuuhh...lihat yang paling atas tuhh.. Menarik kan..??? hehe5.. Saya yakin deh Anda pasti penasaran dengan menu navigasi tersebut dan bertanya dalam hati, bagaimana yaa cara membuatnya, yaa kan..?? Jangan bohong deehhh..!!! hehe5..

Tapi Anda jangan khawatir, kali ini saya akan mencoba untuk share ilmu dan pengalaman saya ini kepada Anda semua [kurang baik apa cobaa... hihi5..].

Oke.., berikut langkah-langkah cara membuat Slide Out Navigation :

[1]. Login Blogger

[2]. Klik Rancangan kemudian Edit HTML lalu cari kode ]]></b:skin>

[3]. Copas script berikut dan letakkan di atas kode ]]></b:skin> tadi :
/*----------------
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]. Kemudian cari kode </head> dan letakkan script berikut 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>

[5]. Terakhir, cari kode </body> dan letakkan script berikut ini 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>
Catatan :
# : Silahkan Anda ganti dengan masing-masing link menu navigasi di blog Anda

[6]. Selesai deh.. dan jangan lupa Simpan Template

Bagaimana, mudah kah cara membuat Slide Out Navigation..??? Yakin deh Anda semua pasti bisa membuat SLide Out Navigation seperti yang saya terapkan di blog saya.

Selamat mencoba yaa dan semoga bermanfaat..

13 komentar:

  1. info yg bagus bozz... blog nya jg keren...
    lam knal ea...

    add aku dimari bozz :::
    http://www.ayoshare.com/members/papasee/

    thx's..

    BalasHapus
  2. @ Papa See
    Makasih mas dah sempatin singgah di blog saya..
    Salam kenal juga buat mas n sekarang saatnya saya ke TKP, meluncurrr...

    BalasHapus
  3. waaah..menarik nih..pengen coba..tapi apa nambah berat blog gag yach?

    BalasHapus
  4. @ YULYANTI_TK_PCR
    Yups..pastinya ini bakalan bikin blog tambah sedikit berat, mbak.. n saya telah membuktikan itu, apalagi ada musik, animasi mouse n gambar seabreg, hehe5..
    Tapi, lagi-lagi ini bertujuan buat mempercantik blog n sekarang kembali ke mbak-nya saja, hihi5..
    Gak ada salahnya kok untuk mencoba..!! Semangat...!!!

    BalasHapus
  5. mas, di tempat saya gak bisa loh, saya bingung deh jadinya.. btw nice infonya mas,

    BalasHapus
  6. edit mas.. ternyata bisa, makasih nih mas infonya good bgt deh tipsnya

    BalasHapus
  7. cara ganti namana gimana mas ?, saya dari tadi gak bisa mulu, pusing ganti gambar-gambarnya juga baru bisa gambar twiter sama facebooknya doang, bantuannya mas, coba liat ke www.spamdart-cheater.blogspot.com

    BalasHapus
  8. @ Paulus
    Nggak bisa gimana, mas..?? Mungkin bisa diperjelas lagi apa permasalahannya, sapa tau saya bisa bantu, hehe5..

    BalasHapus
  9. @ Admin
    Sebagai contoh kita ingin mengedit menu "about" :
    [1]. Untuk mengganti gambar, silahkan mas liat script pada langkah ke-3 di barisan terakhir ada tuisan "about a {background-image: url(http://4.bp.blogspot.com/-U0VzmKiVx3k/TZBeclR4x5I/AAAAAAAAAgc/c6T4Q-__HTw/s1600/id_card.png);
    }", ganti url yg dlm kurung tersebut dengan url gambar yg Anda miliki..
    [2]. Untuk mengganti nama, silahkan liat script pada langkah ke-5. Jika Anda ingin mengganti nama "About" yang bercetak hijau tebal dengan nama lain seperti "Tentang Aku", maka gantilah "About" tadi dengan nama "Tentang Aku"
    Silahkan dicoba yaa, semoga berhasil..
    Semangat...!!!

    BalasHapus
  10. mas itu berarti kayak fungsi laman gitu ga siii apa gimana??? kalo cuma ada 4 yang di tampilin misal home, about search, foto aja... yg lain bisa di hapus ato gimana?? hehe mohon pencerahan nuwun :)

    BalasHapus
  11. @ dheet-A
    Bukan laman, tapi menu navigasi semacam link gitu lah, hehe5.. tapi kalo mau munculkan laman tentu kita hanya ambil link laman tersebut aja n gadget laman gak usah diaktifkan..
    Kalo misalnya mau tampilin home, about, search dan foto aja berarti yang lain bisa dihapus..
    Silahkan dicoba dulu, tapi jgn langsung disimpan yaa n untuk melihat hasilnya bisa lihat pratinjau..

    BalasHapus
  12. mksh infonya mas hario,,,ini udah sayaterapkan di blog saya n sukses ... mksh :)

    BalasHapus
  13. @ Green KLOPERER
    Sama-sama, mas..
    Sebuah penghargaan bisa berbagi dengan para blogger lainnya..
    Semangat, mas..
    Hehe5..

    BalasHapus


Facebook Comment Box : "Silahkan berikan komentar Anda mengenai tampilan dan isi blog saya ini untuk membangun blog ini jadi lebih baik lagi . . ."