Cara Membuat Menu animasi

Belajar SEO dan Blog Bagi pemula
Cara Membuat Menu animasi

Masih di Variasi Blogger share Cara Membuat Menu animasi cekidot

Silahkan sobat Copy Paste script  di bawah ini simpan di blog sobat

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://variasiblogger.blogspot.com/'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : Silahkan sobat edit kembali kode script di atas sesuai Variasi menu yang sobat inginkan , untuk contoh kode script di atas klik DEMO


Share to

16 Responses to "Cara Membuat Menu animasi"

  1. Weh weh weh. mantab mas....

    BalasHapus
    Balasan
    1. yups :D semoga diterapkan hehehe..

      Hapus
  2. Balasan
    1. ya lumayanlah daripada manyun :>)

      Hapus
  3. boleh juga nich... ijin pakai script ini sobat

    salam sukses.

    BalasHapus
  4. muantab mas brow

    BalasHapus
  5. Gak disangka hanya bermodalkan kode CSS?? hmm bisa keren gini, mantap sob triknya.

    BalasHapus
    Balasan
    1. yups sob , emang css tuh bisa merubah jadi cool , kalo saya lum begitu paham masih belajar hehehe.. :D

      Hapus
  6. mantap mas...
    jdi ada nafsu untuk ngurus blog kmbali...
    thank's full mas.... :)

    BalasHapus
  7. Oke oke banget nich, cuma sayang aku kesulitan yang mau posting ke menunya, gimana nich caranya Boss, keluarkan jurus nya lagi dong yang praktis dan gampang. Trimks sebelumnya

    BalasHapus
    Balasan
    1. mau posting ke menunya maksudnya :-? atau mungkin ganti linknya.. :D

      Hapus
  8. Bagus sob. Kunjung balik ea.

    BalasHapus
  9. Oke Terim kasih atas Menu Animasi yang aku pasang ternyata benar sudah terpasang. terima kasih sudah lama aku mencari Menu seperti ini. Thank

    BalasHapus
    Balasan
    1. yups , semoga bermanfaat.. :D

      Hapus

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

ADMIN Blog