7 Mei 2013

Bagaimana cara membuat menu navigasi melayang CSS3 di blog

Posted at  07.56  |  in  tips dan triks blog



Hari ini, saya ingin share dan menunjukkan ke anda tentang  menu navigasi yang lain murni menggunakan CSS3, menu navigasi ini menerapkan beberapa efek animasi yang sangat bagus. Penulis pun tidak habis pikir kok bisa ya? submenu nya melayang. Hehehe..:D Tinggal menggulirkan atau menggerakan mouse/krusor anda ke elemen menu tersebut maka animasinya akan bekerja. Jika anda siap, mari kita mulai...


 KODE HTML 

<ul id="nav">
    <li><a href="http://jalu-pangna.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">All about blog</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Religi</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">Spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Science</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan">Wawasan</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">Wawasan umum</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
  <li><a href="http://jalu-pangna.blogspot.com/p/blog-page_14.html">TOC/site map</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">Tukar link</a></li>
    <li><a href="#">Lain-lain</a></li>
    <li><a href="http://jalu-pangna.blogspot.com">Kembali</a></li>
</ul> 
 

LANGKAH-LANGKAHNYA:
  • Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript atau anda bisa meletakannya di bawah tag <body> pada template
  • Pastekan kode di atas didalamnya
  • Simpan Gadget...  
Ganti URL/Link, Menu dan Submenu dengan URL/Link, menu dan submenu anda

 KODE CSS 


LANGKAH SELANJUTNYA: 
  • Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan dalam pencarian 
  • Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin> 
  • Simpan template...Selesai 

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 07.56
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

0 komentar:

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top