23 April 2013

Cara membuat menu drop down terpecah di blog

Posted at  14.20  |  in  tips dan triks blog


Dengan menggunakan kombinasi selektor dari CSS2, pseudo classes, CSS3 transisi, ditambah Java Script, akhirnya kita capai tombol menu yang terpecah/terpisah berbasis CSS. Konten yang dihasilkan pada tombol menu di sebelah kanan sangat dinamis menggunakan CSS2. Sedangkan Java Script disini hanya digunakan untuk mengaktifkan kotak centang / tombol arah bawah, secara menyeluruh dan dinamis. 


  • Silahkan anda lihat kode CSS Disini
  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih -> Template -> Edit HTML
  • Cari tag/kode ]]></b:skin> tekan CTRL + F  untuk memudahkan pencarian
  • Berikutnya pastekan kode CSS tepat diatas tag  ]]></b:skin>  
  • Simpan template...
  • Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript  
  • Pastekan kode berikut di bawah ini didalamnya:  
<div class="css3splitmenu">
<a href="#">Blogging</a> <input type="checkbox" />

<ul id="t">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan trik 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 java script</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
</ul>
</div>

<div class="css3splitmenu">
<a href="#">Dunia spiritual</a> <input type="checkbox" />

<ul>
<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/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>
</ul>
</div>

<div class="css3splitmenu nocss3splitmenu">
<a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">Jejaring sosial</a>
</div>


<!-- Script below should follow all split menus -->

<script type="text/javascript">

( function(){ // local scope

    if (!document.querySelectorAll || !document.addEventListener)
        return
    var uls = document.querySelectorAll('div.css3splitmenu > ul'),
            docbody = document.documentElement || document.body,
            checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
            zindexvalue = 100

    for (var i=0; i<uls.length; i++){
        ( function(x){ // closure to capture each i value
            checkboxes[i].addEventListener('click', function(e){
                uls[x].style.zIndex = ++zindexvalue
                for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
                    if (y != x)
                        checkboxes[y].checked = false
                }
                e.cancelBubble = true
            })
            checkboxes[i].addEventListener('blur', function(e){
                setTimeout(function(){checkboxes[x].checked = false}, 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
                e.cancelBubble = true
            })
        }) (i)
    }

    docbody.addEventListener('click', function(e){
        for (var i=0; i<uls.length; i++){
            checkboxes[i].checked = false
        }
    })

})();

</script>
  • Silahkan Ganti link warna kuning dengan URL/Link anda
  • Ganti judul Menu sesuai dengan yang anda inginkan
  • Ganti judul Sub Menu sesuai Sub Menu yang di inginkan
  • Simpan Gadget dan lihat hasilnya...
CATATAN: Untuk menambahkan tombol menu dan sub menu, tambahkan tag DIV dengan tag class="css3splitmenu dan menambahkan 3 element berikut:

<div class="css3splitmenu">
<a href="Link anda">Judul Menu</a> <input type="checkbox" />

<ul>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
<li><a href="Link anda">Sub Menu</a></li>
</ul>
</div>  

Mohon maaf kalau ada kekurangan dan kesalahan...
Semoga bermanfa'at and Keep blogging..!

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

43 komentar:

  1. gan tanya...kalau untuk membuat menu dropdown bercabang caranya bagaimana gan?maklum newbie aku nya

    BalasHapus
    Balasan
    1. Ikuti aja tutorial diatas dengan teliti, nanti anda klik script kode css nya (yang ada tulisan warna merah "disini") kemudian nanti saya share di pengaturan google code, karena script kode css ini saya simpan di drive google code. Langkah selanjutnya ikuti tutorialnya dengan teliti. Terima kasih kunjungannya. Salam.. :)

      Hapus
    2. Komentar ini telah dihapus oleh administrator blog.

      Hapus
  2. broo.. aku minta css nya dong segera

    BalasHapus
    Balasan
    1. Silahkan klik script kode css nya dulu mas bro(yang ada tulisan warna merah "disini") kemudian nanti saya share di pengaturan google code. Trims kunjungannya.. :)

      Hapus
  3. Yah Ribet Bener jdi susah nie :'(

    BalasHapus
    Balasan
    1. Baca secara intensive dan cermati tutorialnya mas, hehe...terima kasih kunjungannnya.. :)

      Hapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. Makasih gan. sangat membantu para newbie.
    keren blognya..
    :)

    BalasHapus
    Balasan
    1. Sama-sama mas jeck blue, terima kasih atas kunjungannya. Salam.. :)

      Hapus
  6. Trmksh bnyk mas....sangat bermanfaat sekali bagi pemula seperti saya... (h)

    BalasHapus
    Balasan
    1. Sama-sama mas zikof, terima kasih banyak atas kunjungannya.. :)

      Hapus
  7. sob punya saya itu pas masuk edit html
    bkn tampilan yg kayak bysax
    itu apa penyebabnya, dan gmna cra mengembalikanx.?

    BalasHapus
    Balasan
    1. bkn tampilan yg kayak biasanya? maksudnya gimana? bisa lebih diperjelas permasalahannya mas..

      Hapus
    2. gini sob, kan biasanya ada tuh kode , nah di edit html saya gak ada yang begituan sob, pokonya super aneh deh, jadi htmlnya gak bisa di edit ;-(

      Hapus
    3. itu biasanya gangguan sob coba di keluar dulu akunnya trus masuk lagi cuman sara gan...

      Hapus
    4. Mas arif, Coba ikuti dulu saran dari sahabat saya...

      Hapus
    5. udah bro, dah pindah pc, restat dan sembarang macam, masih tetap gak bz, klw mw tak screen shot kiremnya kemana ya.? Biyar kalian tau.?

      Hapus
    6. Mas arif saya lihat di view page source (tampilan sumber halaman) blog anda normal. Ini tampilannya:
      http://i1087.photobucket.com/albums/j479/jalupangna/sumberhal.png

      Hapus
    7. Komentar ini telah dihapus oleh pengarang.

      Hapus
  8. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  9. makasih infonya om, tapi bagaimana bikin kayak follow via fb, twitter, google+ ??? kayak di blog ini Om..? :-?

    BalasHapus
    Balasan
    1. Sama-sama mas aslam, floating social bookmark dengan efek easing spt di blog ini saya dapatkan tutorialnya dari maskolis seorang master blogger profesional. Silahkan mas kunjungi saja tutorialnya:
      http://www.maskolis.com/2013/03/floating-social-bookmark-dengan-efek.html

      Hapus
  10. Bagus banget mas script nya ... saya caba terapkan di blog saya indischool-malang-raya.blogspot.com jadinya istimewa ...
    trimakasih scriptnya ...

    BalasHapus
    Balasan
    1. Sama-sama mas ainul shodiq, terima kasih banyak udah berkenan berkunjung. Salam..

      Hapus
  11. gan minta kode cssnya donk di darminto15121989@gmail.com

    BalasHapus
    Balasan
    1. Sudah di klik belum mas? yang ada tulisan "disini" pada tutorial diatas. Klik dulu, nanti saya share di pengaturan google drivenya. Masalahnya email pemberitahuannya blm masuk..Trims

      Hapus
  12. Css'a sob ...
    Udh ane kirim :)...

    BalasHapus
    Balasan
    1. udah saya share mas, terima kasih kunjungannya.. :)

      Hapus
  13. gan minta kode css nya dong ;(( .. banarsoad@gmail.com

    BalasHapus
    Balasan
    1. udah saya share, mhn maaf emailnya baru saya buka..terima kasih udah berkunjung.

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
    3. makasih banget gan ... sukses terus blognya (o)

      Hapus
    4. sama-sama mas vino, aamiin yaa Robb.. :)

      Hapus
  14. Pak DiTunggu yang kode CSSnya saya sudah klik link Di sini dan ditunggu aksesnya. Thanks alot atas ilmunya semoga berkah dan bermanfaat.

    BalasHapus
    Balasan
    1. your'e welcome...maaf saya baru buka emailnya, udah saya share mas. Aamin yaa Robb..terima kasih kunjungannya..

      Hapus
  15. mas minta CSS nya dong..pengen nyobain...newbie bgt q -_- qdah klik link "disini" nya

    BalasHapus
    Balasan
    1. Udah saya share mas, mohon maaf terlambat bls..emailnya baru saya buka..terima kasih 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