Catetan

MEMBUAT ANIMASI MENU CSS3 DI BLOGGER 19

Setelah seminggu istirahat dan ga bisa megang komputer karena kesenggol angkot, akhirnya sekarang bisa bikin postingan lagi... Alhamdulillah....

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu CSS3 di Blogger, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan mengenai Online Generator CSS3 dimana dalam postingan tersebut, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3 ini, untuk melihat tabel browser mana saja yang support CSS3, bisa dilihat di www.findmebyip.com.

Apabila browser anda support dengan CSS3, maka cobalah bermain dengan DEMO disini.

Nach lalu bagaimana proses diatas bisa sampai terjadi... yang perlu disiapkan adalah kode CSS3 dan HTML seperti di bawah ini.
<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://www.karsono.co.cc'>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>
Langsung saja copy kode diatas di add widget blogger anda.

Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada di antaranya.
  • angka 0.5s disini menandakan waktu perubahan dari animasi
  • angka 25deg disini menandakan rotasi perputaran dari area menu
  • angka 0deg disini menandakan bentuk akhir dari rotasi perputaran dari area menu
  • untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya
Untuk melihat hasil dari perubahan kode yang dilakukan, coba Copy Kode diatas, kemudian klik halaman Bermain Dengan Kode HTML dan pastekan kodenya, kemudian lakukan perubahan kode terutama untuk kode yang diwarnai, dan lihat hasilnya.

19 comments:

Asrul

24 Okt 2010 14.05.00
dijelasin dong..
cara masukin di blogger?
Karsono

25 Okt 2010 10.05.00
Untuk Cara masukin ke blogger, caranya :
1. Copy kode diatas
2. Masuk ke page element di blogger
3. Tambahkan Add Gadget dan pilih HTML/Script
4. Pastekan ke kotak pilihan HTML/Script, simpan.
5. Posisikan Add Gadget yang telah dipilih tepat di bawah Header, biar menarik.
6. Simpan perubahan dan selesai.

Seperti itulah akhirnya.
Rahmath

2 Nov 2010 13.30.00
Keren Banget!
Makasih ya......
www.Rachmath

2 Nov 2010 19.50.00
kok gak di balas...
Karsono

3 Nov 2010 12.52.00
Maaf mas... soalnya saya tidak selalu online... terima kasih banyak mas Rachmath... senang rasanya apabila saya bisa bantu...
Aris Oneto Assyraf

10 Nov 2010 22.44.00
mohon copas ya mas.
Juarta Hendra

11 Nov 2010 14.58.00
Gan..... bOleh ga di ganti warna nya??? kasi tau donk caranya ganti
warna menu nya ama tulisannya...
Karsono

11 Nov 2010 21.21.00
Cara ganti warnanya tinggal rubah kode warna html background-nya, contoh diatas background: #4FCF26.

Kalau ingin mengetahui aneka macam kode warna html coba dipostingan saya Kode HTML Warna.

Sedangkan kalau ingin melihat lebih baik lagi mengenai hasil pergantian warna, coba copy kode menu css3 diatas, dan lihatlah hasilnya secara online dengan melakukan paste di postingan saya Bermain dengan Kode HTML
starkonsole

14 Nov 2010 16.02.00
mas, untuk menerapkan css3 di widget gimana caranya?
kayak di blognya mas
Luwuk Komputer

28 Nov 2010 18.06.00
Mas.. kalo pertama bentuk menu lurus horisontal. truss dianimasikan. gimana caranya ??
Karsono

2 Des 2010 10.47.00
@Starkonsole... coba lihat postingan saya Social Network baru dan ilmu blogger di dalamnya

@Luwuk Komputer... Yang perlu dipahami disini adalah kode CSS3, dalam hal ini kode yang dimaksud adalah koede yang berwarna merah... kode itulah yang membuat animasi rotasi terjadi...

Jadi kalau mau membuat bentuk pertama lurus... ya tinggal replace aja kode css3 hover ke kode standarnya... hasil dari kode css3-nya akan berbentuk seperti dibawah ini... cobalah kode css3 dan html diremake dan lihat hasilnya langsung di postingan saya Bermain Dengan Kode HTML....

berikut hasil kode css3, untuk bentuk horisontal :

<style type="text/css">
.menuqu ul li{list-style: none; display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff;
}
.menuqu1:hover {
-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:hover{ background: #F0BFFF; color:#ccc;
-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);
}
</style>
bloekoetoek

15 Feb 2011 10.59.00
ini sebenarnya penerapan css transisi dengan mengubah fungsinya pada menu...pengaruhnya pada loading page akan lambat untuk beberapa template. lebih baik gan di bikin menu navigasi biar gampang, mungkin tidak berpengaruh pada loading page. makasih
Karsono

16 Feb 2011 19.25.00
Terima kasih gan... css transisi disini digunakan untuk mempercantik tampilan dari menu itu sendiri gan... jadi ya tanpa css transisi saya kira kurang seru... itu menurut saya, btw.. terima kasih gan atas masukkannya
Setya Share

25 Feb 2011 22.41.00
thx gan .. jadi ..

kunjungi blog q jga donk http://blogsetya.blogspot.com
wawan

21 Mar 2011 01.13.00
mas kalu kayak yang di gedget gimana tu tata letaknya kodenya dimana?
mohon kirim ke email ya wawan2408@gmail.com
terimaksih
Haris Febrianto

7 Apr 2011 15.38.00
gan,caranya masukin akun FB qt d Blog gmn?
knjungi blog Q y gan?
soft phobia

13 Apr 2011 22.26.00
thanks gan, bekerja 100% ..

mampir ya : http://softphobia.co.cc
Udiee Tukang Bcanda, S.Pd.

1 Jun 2011 13.35.00
karsono... blognyah kaga ada buku tamunyah.
eeettdaaahh..
==Musisi Indie==

30 Jun 2011 09.26.00
Mantaps .....

Posting Komentar