Home » » Membuat Animasi Menu Dengan CSS

Membuat Animasi Menu Dengan CSS

Trimuda Reog | 09.45 | 19komentar
Menu animasi ini jauh dari bersifat program js/ javascript dan tidak menggunakan penyimpanan kode kecuali di blogger sendiri sehingga tidak memberatkan blog sama sekali. Menu Animasi dibuat dengan kode CSS dan HTML, hanya saja kemungkinan beberapa browser lama belum mendukung. Animasi menu ini sudah di uji dan bekerja normal di browser terbaru Mozilla Firefox dan Google Chrome.

Untuk lebih bagusnya silahkan diganti latarnya dengan gambar kesukaan, boleh jpg, png, ataupun gif. cuma yang harus diperhatikan adalah ukuran gambar/Kb nya jangan terlalu besar agar tidak menghabiskan bandwith maupun memberatkan blog sobat nantinya. lihat demo dibawah.

DEMO

OK, berikut adalah langkah-langkah membuat menu animasi dengan CSS.

  1. Sebaiknya back-up dulu tempate blog sebagai cadangan jika terjadi error.
  2. Salin salah kode CSS di bawah kemudian simpan bersama-sama dengan kode CSS yang lain (pada Blogspot biasanya disimpan di atas tetapi kode ]]></b:skin (<style type="text/css> dan </style>)  di bawah dihapus (tidak perlu dikopikan). Kode CSS dapat juga disimpan di bagian Widget blog dengan cara Add Gadgate, atau diletakan pada posting pada mode HTML (bukan pada mode Compose). Untuk kedua opsi terakhir kode <style type="text/css> dan </style> harus ikut dikopikan.
  3. Salin kode HTML di bawah dan tempatkan sesuai kebutuhan, misalnya pada widget atau pada posting.
  4. Ganti Home, About, Contact, Downloas, dan Privacy beserta URL masing-masing sesuai link yang besangkutan
  5. Simpan dan publikasikan/ terbitkan.
  6. Selesai
  7. Silahkan masukkan komentar
Menu Animasi Berputar dan Membesar silahkan pilih salah satu di bawah ini

 CSS nya

 <style type="text/css">

#mode-putar{
  width:140px;
  height:80px;
  border:1px solid #999;
  box-shadow: 5px 3px 5px #aaa;
  margin:5px auto;
  padding:5px;
  background:#9bbddd;
  font-size:12px;
  font-weight:bold;
  background-color: yellow;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
}

#mode-putar:hover {
  -webkit-transform: rotate(360deg) scale(1.5);
  -moz-transform: rotate(360deg) scale(1.5);
  -o-transform: rotate(360deg) scale(1.5);
}

</style>
 Kode HTMLnya
<div id="mode-putar">
  <a href="URL Home">HOME</a>
  <a href="URL About">ABOUT</a>
  <a href="URL Contact">CONTACT</a>
  <a href="URL DOwnload">DOWNLOAD</a>
  <a href="URL Privacy">PRIVACY</a>
</div>



  CSS nya
<style type="text/css">

#mode-maju {
  width:140px;
  height:100px;
  border:1px solid #999;
  box-shadow: 5px 3px 5px #aaa;
  margin:5px auto;
  padding:5px;
  background:#9bbddd;
  font-size:12px;
  font-weight:bold;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

#mode-maju:hover {
  -webkit-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -o-transform:scale(1.5);
}

</style>
Kode HTMLnya
<div id="mode-maju">
  <a href="URL Home">HOME</a>
  <a href="URL About">ABOUT</a>
  <a href="URL Contact">CONTACT</a>
  <a href="URL Download">DOWNLOAD</a>
  <a href="URL Privacy">PRIVACY</a>
</div>


Demikian sobat tutorial membuat animasi menu dengan css, semoga bermanfaat. bisa diletakkan di posting maupun gadget sobat. Selamat mencoba.




Share this article :

19 komentar:

  1. menarik nih sob, boleh dicoba nih sob untuk mempercantik blog. blog yang banyak menyajikan informasi pengetahuan dan pendidikan. sukses buat blog sobat.....thenks ya.

    BalasHapus
  2. saya juga sedang berencana untuk mengganti template.. mungkin ini akan menjadi bahan pertimbangan.. :)

    BalasHapus
    Balasan
    1. monggo sob. silahkan dicoba

      Hapus
    2. ha..? masa template saya bagus.. ?

      hehe. .:D

      Hapus
  3. wah...nice share bro...kpan" tes lar sob

    BalasHapus
  4. Wahhh keren niee Sobb
    Ajibb dahhh

    BalasHapus
  5. trims kawan sudah berbagi,
    [sharring]pengalaman saya <style>...</style> kalau disimpan diatas ]]></b:skin> biasanya dipojok kiri atas posting akan ada tanda panah
    sekali lagi trims kawan

    BalasHapus
    Balasan
    1. iya sobat... kan di atas sudah ada keterangan kalau di gadget pakek <style>...</style>! akan tetapi kalau di simpan di atas ]]></b:skin> maka harus dihilangkan atau tidak usah di copy. poin 2 saya rasa cukup dimengerti sahabat blogger. terimakasih juga sarannya

      Hapus
  6. sepertinya keren nich sob,...............

    BalasHapus
  7. saya masih berpegang teguh untuk tetap yang biasa biasa saja.. :D

    BalasHapus
  8. eh ternyata saya sudah komen di atas.. hihihi.. :D
    ternyata gak jadi ganti template.. :D

    BalasHapus
  9. Tampilannya memang menarik ya :)

    www.1sthappyfamily.com

    BalasHapus
  10. menunya keran cuman untuk aku sob,...aku sudah punya menu yang biasa saja biar blog aku jadi ringan

    BalasHapus
  11. mnatap nih entar kalo udah bikin blog baru, baru di terapin

    BalasHapus

Tinggalkan Jejak Dengan Berkomentar ya! Terimakasih

Daftar Kategori


close
cbox
 
Alamat: Talun | Ngebel | Ponorogo
Copyright © 2011. PUISI DAN PENDIDIKAN - All Rights Reserved
Template Modify by Cah Ngebel
Proudly powered by Blogger