28 September 2013

Cara membuat menu responsif seperti facebook di blog

Posted at  02.58  |  in  tips dan triks blog


Tanpa diragukan lagi, tekhnologi responsif semakin lama semakin populer. Hal ini memungkinkan kita untuk menghemat waktu ketika kita mengembangkan desain yang dimaksud untuk digunakan pada berbagai perangkat: dari perangkat mobile (hand phone) sampai ke komputer layar lebar. Tidak perlu untuk mengembangkan versi khusus dari situs untuk setiap format (perangkat).  

Pada kesempatan kali ini saya akan share lagi ke anda tentang membuat menu responsif baru yang terlihat seperti menu facebook. Untuk membuat menu ini, kita tidak perlu javascript, semuanya diimplementasikan hanya menggunakan CSS3 (untuk IE7-IE10, Firefox, Opera, Safari, Chrome dan iPad / iPod / iPhone).




KODE HTML
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li class="subs"><a href="#s1">Menu 1</a>
        <ul>
            <li><a href="#">Submenu A</a></li>
            <li><a href="#">Submenu B</a></li>
            <li><a href="#">Submenu C</a></li>
            <li><a href="#">Submenu D</a></li>
        </ul>
    </li>
    <li class="subs"><a href="#s2">Menu 2</a>
        <ul>
            <li><a href="#">Submenu E</a></li>
            <li><a href="#">Submenu F</a></li>
            <li><a href="#">Submenu G</a></li>
            <li><a href="#">Submenu H</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2013/09/cara-membuat-menu-responsif-seperti.html">Kembali ke tutorial</a></li>
</ul>

LANGKAH-LANGKAHNYA :
  • Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

  • Pastekan kode di atas didalamnya
  • Simpan Gadget...  
Silahkan ganti tanda # dengan URL/Link anda, nama Menu dan Submenu yang anda inginkan

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
 HAPPY BLOGGING..!

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 02.58
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.

4 komentar:

  1. Wah keren ni pak.. salam :)

    BalasHapus
    Balasan
    1. Terima kasih atas apresiasi dan kunjungan anda,,,'alaikassalaam..

      Hapus
  2. saya copas dulu pak,tutorialnya kapan2 saya praktekan

    BalasHapus
    Balasan
    1. silahkan dgn senang hati..terima kasih atas kunjungannya. :)

      Hapus

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