April 1, 2013

Cara Membuat Menu Navigasi Slide Out

Halo sob...

Di pagi hari yang cerah ini saya mau share mengenai sebuah tampilan blog yang cukup menarik. Ya, dengan menggunakan menu navigasi slide out ini maka tampilan blog temen-temen akan lebih berbeda dan sedikit elegan, hehehe... Oiya sob, cara ini sendiri saya pelajari dari tipsfaenblog dengan melakukan sedikit kustomisasi.

Ok, untuk contohnya sendiri bisa temen-temen lihat penampakannya dibawah atau bisa dilihat di DEMO.



Langsung aja sob, kita praktek nya biar ga ketiduran denger saya intermezzo...

1. Login ke blogger.




2. Pilih Template - Edit HTML - Centang Expand Template Widget.



3. Cari kode ]]></b:skin> dan kemudian letakkan kode berikut tepat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQbshnaB8LhuikwOSS2KdwrHtaJ4C10fkEgJY8eYeMg_ay-jaU0ML47PdeyNi2V1bcHO-VMAM5_Wv16MOk5_OFB7WDWn7nj8hdCdi1CMhhimo05baNTtq7GtCwyGdMCoAMM9ufHvtnQY/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmRglnzLzziaZk7cXFhGxYBQUEt-vMobdiFqHfAZ0H8eWIzXlpLaI_C5r_lUKILA6EaBTbh8-rIBhEwfCALmikZBgshlxO_mGN3gp-CyvqegYRn85kSl1ncEzbGDoWwi-ofm6ZVjQbwc/s1600/id_card.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtQuon_NklcEX77Le5Tm7598M6xlLeWOcjVUYPlsCx5rywQ6ClfSgurPhJUv-3L_rq4iB77Wu4GqLgfgWJgKhAWu51KYH2thkVbNqns5NLvLoeQx8OjgpIkSoRoSilg0DDvcq24TEgBc/s1600/rss.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QHqOPstUfEAf4jjX2fT3UJiSWNl2FTSG8W1MDKtqHiQkdJkdT3z5qUvTWFMsBbx2-jLV29BWB-iZbKOmV6RvcBcOWQ3KlcLzRC_fDH-t_-sw8jY9qhIma8aw5wYM8qlMW5lUNTwTNAM/s1600/mail.png); }

4. Selanjutnya cari kode </head> dan letakkan kode berikut tepat diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='http://faencool.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. Selesai??? Belum sob.. Cari kode <body> atau </body> dan kemudian letakkan kode berikut diatasnya :

<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='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li> </ul>

6. Pratinjau -->> Kalau tidak ada masalah maka Simpan Template.

7. Enjoy.


*Keterangan : Ganti kode berwarna biru dengan link masing-masing menu milik temen-temen.

Gimana sob??? cukup mudah yah... kan tinggal copy paste saja, tapi kalau mau melakukan kustomisasi silahkan di obrak abrik sendiri kode-kode nya ya sob...

Terima kasih, semoga bermanfaat...Jangan lupa tinggalkan komentar...

19 comments

  1. makasih info nya,,,bisa buat di coba entar nie ahihihi

    ReplyDelete
  2. Mohon Demonya ya sobat..

    demo yang diatas tdk jelas..
    thx :)

    mohon kunjungan baliknya..
    http://lavixtastar.blogspot.com

    ReplyDelete
    Replies
    1. wah, maaf gan blog demo diatas memang kemarin sempat ada masalah namun sudah saya perbaiki, silahkan lihat demo nya di link tersebut http://aiizahh2.blogspot.com/ terima kasih yah atas koreksinya... :-d

      Delete
    2. Oke.. \o/

      thx ya sobat :)

      #sukses terus!! :D :bye:

      Delete
  3. owh, iya sobat..
    satu lagi nih..
    cara membuat kata2 sekaligus emoticon yang ada di atas form komentar sobat ini gimana ya?

    ReplyDelete
    Replies
    1. untuk kotak pesan nya bisa dilihat di postingan terbaru saya http://aiizahh.blogspot.com/2013/04/modifikasi-kotak-komentar-blog.html untuk emoticon nya mungkin akan saya buatkan tutorialnya nanti ya sob... :yaya:

      Delete
    2. oke..
      terima kasih banyak ya sob..
      :-d

      Delete
  4. terima kasih infonya sista...
    izin nyoba tutorialnya.
    :)

    ReplyDelete
    Replies
    1. silahkan, terima kasih juga atas kunjungannya... :-bd

      Delete
  5. loadingnya berat nggak gan?

    ReplyDelete
  6. saya coba dulu deh kk ,

    http://memolodys.blogspot.com/2013/08/rumah-adat-papua-struktur-dan-fungsi.html

    ReplyDelete
  7. mantap gan, terima kasih banyak ya atas ilmunya.. :)

    http://www.jamtanganori.com

    ReplyDelete