Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Animasi Menu Drop Down di Blog

Animasi Menu Drop Down Blogger Cara Membuat Animasi Menu Drop Down di Blog – kaitannya dengan menu navigasi blog, setelah pada tutorial sebelumnya sudah membahas mengenai cara membuat menu navigasi with form search yang tidak lain pada navigasi menu tersebut tidak berbeda jauh dengan navigasi menu yang saya gunakan pada blog ini. Untuk memodifikasi sebuah menu navigasi pada blog maka pada tutorial ini saya kembali share tentang bagaimana cara untuk membuat animasi pada menu drop down serta langkah-langkah cara menerapkannya ke dalam blog. Untuk memasang menu navigasi drop down dengan efek animasi ke dalam blog langkahnya cukup mudah dan simple, anda hanya perlu menambahkan sedikit kode kedalam template dengan mengikuti petunjuk yang ada dibawah. Untuk melihat hasilnya dari tutorial menu navigasi ini bisa terlebih dahulu melihat demo yang sudah saya sertakan pada akhir artikel dibawah. Apabila ingin memasangnya ke blog, berikut tutorial untuk Cara Membuat Animasi Menu Drop Down di Blog.

1. Login ke blogger.
2. Masuk ke menu template dan pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>
#nav_menu { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#0091d6; }
#nav_menu ul { left: -9999px; position: absolute; top: -9999px; z-index: 1; }
#nav_menu li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 105px; }
#nav_menu li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#0091d6; }
#nav_menu li a:hover{ background-color:#222; }
@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }
@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#nav_menu li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#nav_menu li:hover > a { z-index: 4; }
#nav_menu li:hover ul.sub { padding: 0; left: 0; top: 35px; width: 200px; }
#nav_menu ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#nav_menu ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; }
#nav_menu ul li a:hover{ background:#111; }
@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
#nav_menu li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#nav_menu li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }
#nav_menu li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
#nav_menu li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
#nav_menu li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
#nav_menu li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
#nav_menu li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
#nav_menu li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
#nav_menu li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }
4. Copy kode berikut ini lalu paste kedalam Widget HTML/Javascript.
<ul id='nav_menu'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='http://mas-andes.blogspot.com'>Menu 1</a>
        <ul class='sub'>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com'>Menu 2</a>
        <ul class='sub'>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com'>Menu 3</a>
        <ul class='sub'>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
        </ul>
    </li>
    <li><a href='http://mas-andes.blogspot.com'>Menu 4</a>
    </li>
</ul>
Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link pada blog anda.

5. Langkah terakhir klik Simpan dan hasilnya akan seperti pada dibawah ini.


Demikian tutorial untuk Cara Membuat Animasi Menu Drop Down di Blog, apabila ingin merubah misal pada warna atau font maupun lainnya silahkan bisa di custom sendiri.

Berlangganan artikel via email

62 Response to "Cara Membuat Animasi Menu Drop Down di Blog"

pengen pasang mas, tapi kapan2 saja :)
untuk saat ini saya simpen dulu

Balas

Sub menunya melayang-layang. Keren pisan ! terimakasih atas sharing dan tutorialnya.

Balas

Mantap gan.. jgn lupa kunjungan baliknya :)

Balas

Keren Menunya..
Setelah Melihat Demonya, Tampilan Sesudahnya Bagus..

Balas
avatar
Anonymous

pengennya masang tapi nanti aja deh... kalau pas waktunya agak senggang

Balas

Wah keren mas..warna tealnya itu yang aku suka

Balas
avatar
Anonymous

wah wah wah keren sekali navigasinya :D

Balas

Wah ini bener-bener keren banget mas Menu Drop Down nya. Bisa goyang-goyang sub menu nya hehehe :) Jadi lebih kelihatan kece nya. Salut saya sama Mas Andes, kalau bikin sesuatu pasti nggak tanggung-tanggung :)

Balas
avatar
Anonymous

Wooow Mantap Mas,, izin simak
Sekaligus terapkan di blog saya nih Mas Andes
Kalau saya bingung mohon di pandu, dan mohon
Bimbingan, terima kasih artikel nya Mas.

Balas

Menu animasi drop down nya keren dan cantik
Kaya Pengunjung nya yah.? hhhhkkk
Yang nulis nya keren gak yah hhheeehhh...

Balas
avatar
Anonymous

saya pertahankan dulu sob. ^^

Balas

animasinya lumayan keren banget mas...

Balas

keren mas, menu animasinya ijin makai @-webkit-keyframes aja , boleh kan ?

Balas

semua juga boleh mas ambil aja hehe..

Balas

apalagi adminnya ya mas..

Balas

iya jangan sampe kebelet..

Balas

monggo kang karrysta :)

Balas

yang nulis jelas gak kalah keren hehe..

Balas

hehe udah dingin dulu yah mang..

Balas

suka yang teal teal ya mas.. hehe

Balas

untung tidak gaong2 pak :) hehe

Balas

Ikutan komen ah...biar ketular beken :)

Balas

Kalo nanggung malah kurang berasa...kerennya mbak Rin..hehe :)

Balas

Kece udah..keren apalagi...mantap pun sampun....
Elegance nih yg belum....hehe

Mas Andes emang cihuiiii deh :)

Balas

sudah berani utak-atik daleman ya mang sekarang :D

Balas

saya juga nggak tahu mas gaong2 itu apa, yang tahu cuma adminnya aja mas :)

Balas

kalau dingin tinggal diangetin lagi mas, didapur kan ada kompor nganggur hehe...

Balas

kalau mbak Ririn sih kece mas, keren juga bisa ding hehe...

Balas
avatar
Anonymous

Mas Andes memang top markotop yah mas Budi, nggak ada duanya deh :)

Balas

keren mas Andes menu drop down animasinya, bisa lari gitu yah, saya kasih jempol deh mas :)

Balas

yang tau kang Ucup mas :)

Balas

Segera menuju TKP mas. Jangan kawatir. Admin nya baik hati dan tidak sombong :)

Balas

Lari-lari kemana mas menu drop down nya? hehe Ntar kalau sudah capek,, istirahat ya sambil makan buah semangka hehe :)

Balas

Terimakasih banyak mas sirau. Jadi nggak enak sendiri nich. Terimakasih atas pujiannya ^^

Balas

Lebih keren lagi kalau Menu Drop Down nya di kasih animasi parsel ya mas. hehe :)

Balas
avatar
Anonymous

Tertarik saya mas mencobanya keren dropdownya apalagi warna birunya :)

Balas

Waduh.. keren sekali efeknya... oh ya, bisa request ga Mas Andes, gimana cara bikin menu navigasi bisa warna warni... kayak terselubungdotin itu lho, wkwkwk

Balas

adminnya juga rajin memberi kan mbak :)

Balas

parcelnya kan udah habis mbak diborong sama mas Budi :)

Balas

Ya udah kita makan bareng-bareng semangkanya mumpung masih seger mbak hehe...

Balas

silahkan kalo mau coba mas :)

Balas

kayak apa emang bang, kok saya ga bisa buka terselubungdotin padahal koneksi ngebut tapi muncul The connection was reset terus

Balas

Waduh gimana ya.. saya pake SS saja yh, http://prntscr.com/1v0gms

Balas

oh kayak itu, iya saya usahakan ntar bang.. segera. tapi ntar sharenya nunggu posting yang udah terjadwal biar abis dulu ya bang hehehe..

Balas

Okelah kalau begitu... tapi ada masalah, kalo pake begituan, trus css yg lama gimana ya, hehehehe bisa berantem mereka.. wkkwwk btw, saya nuunggu dah...

Balas

ya kalo ID CSSnya beda gapapa bang, tapi kalo sama ya bisa di replace

Balas

Gaong-gaong mah kalau tidak salah yang
ada di lumpur sawah, yang suka di buru
Pencari ikan di sawah sejenis reptit ehh
Salah gak yah,..? tt3tt3tt3...asal nylene we Mas.

Balas

Admin nya juga Keren Kasep, murah murah Mas Budi..
Eeeeh Maaf Murah Hati, maksudna,. yah pokona mah
Nu namana Murah ada di Mas Andes, uffst tapi
Gak Murahan lho ya Mas Andes..? ttettettette.

Balas

Berarti kuncinya ID CSSnya yah... barangkali diedit... disamain settingannya dengan yg baru...

Balas

Ini yang saya cari mas,
sangat membantu,
ditunggu follow-nya,
blog ini sudah saya follow,
terima kasih

Balas

menu-menunya keren Kang :)

Balas

saya udah coba tapi menunya cuma keliatan dikit, kayanya ada yg salah coba dicek http://hilalhuda.blogspot.com/ gimana solusinya ya

Balas

HTMLnya taruh di atas kode <div class='main-outer'>

Balas

Sip makasih, dah jadi akhirnya

Balas

waah sy ketinggalan, trmksh mas tutor,y

Balas

Makasih Sob saya koleksi bikinan mas ! Terus berkarya :D

Balas

hallo mas andes saya mau tanya caranya membuat sub menu keren kayak mas andes itu gimana . terima kasih

Balas

maakaasih ilmunya gan

Balas

tidak berhasil saya sudah mengikuti petunjuknya dengan benar hasilnya kurang sempurna

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Animasi Menu Drop Down di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode