20 Animasi Font Awesome Terbaru

Dengan adanya sedikit bekal kini saya akan berbagi mengenai Animasi Font Awasome, mungkin sobat sudah banyak mengetahui cara membuat animasi dari font awesome, namun yang akan saya berikan ini merupakan salah satu hal yang sangat baru, dan tidak di publikasikan di website penyedia font awesome itu sendiri. Cara membuat animasi font awesome yang saya dapatkan ini merupakan hasil dari pencarian dari website yang merupakan langganan saya membacanya, walaupun bahasa inggris namun saya berusaha menggunakan translate agar paham.

Font Awesome yang saya gunakan adalah versi 4.5.0 yang terdiri dari 650 icon merupakan versi terbaru yang ada sekarang. Namun untuk animasi hanya bisa menggunakan spin, tentu saja kalau menurut saya kurang menarik kalau cuma bisa berputar. Untuk memperbanyak animasi icon font Awesome saya menggunakan CSS3 yang telah di ajarkan di website langganan saya. Mudah-mudahan ini juga bermanfaat bagi sobat semua.

20 Animasi Font Awesome

Untuk ini saya akan menjelaskan animasi apa saja yang akan saya berikan kepada sobat sekalian, yang pertama animasi icon font awesome tambahan selain animasi spin masih ada 19 animasi icon font awesome lagi yang harus sobat ketahui, animasi tersebut terdiri dari 2 style yaitu Animasi on Load (berfungsi pada saat halaman di buka) dan Hover (berfungsi pada saat kursor mouse di arahkan ke icon). Langsung saja sobat lihat contoh di bawah ini:

1. Animasi On Load 

Kode Animasi	Font Awesome
1. faa-bounce animated
2. faa-wrench animated
3. faa-ring animated
4. faa-horizontal animated
5. faa-vertical animated
6. faa-flash animated
7. faa-float animated
8. faa-shake animated
9. faa-spin animated
10.faa-pulse animated

Animasi On Load biasanya digunakan untuk widget navigasi agar pengunjung tertarik untuk melihat ke arah sana.. misalnya topik terhangat, iklan dan lain-lain. intinya bisa menambah daya tarik pengunjung blog untuk melihat icon tersebut karena dia bergerak setelah halaman tampil.

2. Animasi Hover

Kode Animasi	Font Awesome
1. faa-bounce animated-hover
2. faa-wrench animated-hover
3. faa-ring animated-hover
4. faa-horizontal animated-hover
5. faa-vertical animated-hover
6. faa-flash animated-hover
7. faa-float animated-hover
8. faa-shake animated-hover
9. faa-spin animated-hover
10.faa-pulse animated-hover

Hover bisanya digunakan untuk navigasi yang ada di leadership, dan biasa juga digunakan untuk navigasi berupa sosial media, hal tersebut di sebabkan oleh karena icon font awesome sangat lengkap sehingga sangat mudah menambahkan icon sosial media di blog kita. Dengan menggunakan fungsi hover akan membuat tampilan navigasi menjadi lebih hidup dan menarik.

Nah itulah ke 20 animasi icon font awesome yang saya dapatkan, Keren kan, yang sebelumnya hanya spin saja bisa menjadi berbagai efek animasi. oh ia untuk penggunaan animasi tersebut sobat tinggal tambahkan aja kode animasi setelah kode font awesome yang biasanya sobat gunakan jadi tinggal di gabung saja.

Contoh: 'fa fa-glass tinggal tambah faa-shake animated menjadi

'fa fa-glass faa-shake animated'

Untuk penggunaan font awesome sebagai tombol atau navigasi seperti yang saya gunakan di pojok kanan atas, bisa di beri warna juga untuk penggunaan dalam animasi icon font awesome juga bisa menambahkan sytle warna yang sobat inginkan biar lebih keren lagi misalnya bisa kita ubah menjadi dan bisa kita tambahkan animasi lagi menjadi dalam penggunaan untuk tombol sobat tinggal menambahkan button misalnya

Contoh: untuk menambahkan warna sobat bisa menambahkan kode style="color: #003399; di belakang kode icon font awesome contoh fa fa-facebook-official" style="color: #003399;"

untuk penggunaan animasi di atas agar berfungsi sobat harus menambahkan kode CSS lagi di template sobat agar dapat digunakan sepenuhnya. Dengan senang hati saya akan membagikan kode tersebut untuk digunakan oleh sobat. berikut adalah kode cssnya

@-webkit-keyframes wrench{0%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}100%,75%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
@keyframes wrench{0%{-webkit-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);-ms-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}100%,75%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.faa-parent.animated-hover:hover>.faa-wrench,.faa-wrench.animated,.faa-wrench.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite;transform-origin-x:90%;transform-origin-y:35%;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-wrench.faa-fast,.faa-wrench.animated-hover.faa-fast:hover,.faa-wrench.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-wrench.faa-slow,.faa-wrench.animated-hover.faa-slow:hover,.faa-wrench.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}
@-webkit-keyframes ring{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}100%,20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
@keyframes ring{0%{-webkit-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);-ms-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);-ms-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);-ms-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);-ms-transform:rotate(12deg);transform:rotate(12deg)}100%,20%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.faa-parent.animated-hover:hover>.faa-ring,.faa-ring.animated,.faa-ring.animated-hover:hover{-webkit-animation:ring 2s ease infinite;animation:ring 2s ease infinite;transform-origin-x:50%;transform-origin-y:0;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-ring.faa-fast,.faa-ring.animated-hover.faa-fast:hover,.faa-ring.animated.faa-fast{-webkit-animation:ring 1s ease infinite;animation:ring 1s ease infinite}.faa-parent.animated-hover:hover>.faa-ring.faa-slow,.faa-ring.animated-hover.faa-slow:hover,.faa-ring.animated.faa-slow{-webkit-animation:ring 3s ease infinite;animation:ring 3s ease infinite}
@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes vertical{0%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}.faa-parent.animated-hover:hover>.faa-vertical,.faa-vertical.animated,.faa-vertical.animated-hover:hover{-webkit-animation:vertical 2s ease infinite;animation:vertical 2s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-fast,.faa-vertical.animated-hover.faa-fast:hover,.faa-vertical.animated.faa-fast{-webkit-animation:vertical 1s ease infinite;animation:vertical 1s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-slow,.faa-vertical.animated-hover.faa-slow:hover,.faa-vertical.animated.faa-slow{-webkit-animation:vertical 4s ease infinite;animation:vertical 4s ease infinite}
@-webkit-keyframes horizontal{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}100%,36%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes horizontal{0%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}100%,36%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}.faa-horizontal.animated,.faa-horizontal.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-horizontal{-webkit-animation:horizontal 2s ease infinite;animation:horizontal 2s ease infinite}.faa-horizontal.animated-hover.faa-fast:hover,.faa-horizontal.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-horizontal.faa-fast{-webkit-animation:horizontal 1s ease infinite;animation:horizontal 1s ease infinite}.faa-horizontal.animated-hover.faa-slow:hover,.faa-horizontal.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-horizontal.faa-slow{-webkit-animation:horizontal 3s ease infinite;animation:horizontal 3s ease infinite}
@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.faa-flash.animated,.faa-flash.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-flash{-webkit-animation:flash 2s ease infinite;animation:flash 2s ease infinite}.faa-flash.animated-hover.faa-fast:hover,.faa-flash.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-flash.faa-fast{-webkit-animation:flash 1s ease infinite;animation:flash 1s ease infinite}.faa-flash.animated-hover.faa-slow:hover,.faa-flash.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-flash.faa-slow{-webkit-animation:flash 3s ease infinite;animation:flash 3s ease infinite}
@-webkit-keyframes bounce{0%,10%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%,60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}
@keyframes bounce{0%,10%,100%,20%,50%,80%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%,60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.faa-bounce.animated,.faa-bounce.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-bounce{-webkit-animation:bounce 2s ease infinite;animation:bounce 2s ease infinite}.faa-bounce.animated-hover.faa-fast:hover,.faa-bounce.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-bounce.faa-fast{-webkit-animation:bounce 1s ease infinite;animation:bounce 1s ease infinite}.faa-bounce.animated-hover.faa-slow:hover,.faa-bounce.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-bounce.faa-slow{-webkit-animation:bounce 3s ease infinite;animation:bounce 3s ease infinite}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg)}}.faa-parent.animated-hover:hover>.faa-spin,.faa-spin.animated,.faa-spin.animated-hover:hover{-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-fast,.faa-spin.animated-hover.faa-fast:hover,.faa-spin.animated.faa-fast{-webkit-animation:spin .7s linear infinite;animation:spin .7s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-slow,.faa-spin.animated-hover.faa-slow:hover,.faa-spin.animated.faa-slow{-webkit-animation:spin 2.2s linear infinite;animation:spin 2.2s linear infinite}
@-webkit-keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes float{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.faa-float.animated,.faa-float.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-float{-webkit-animation:float 2s linear infinite;animation:float 2s linear infinite}.faa-float.animated-hover.faa-fast:hover,.faa-float.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-float.faa-fast{-webkit-animation:float 1s linear infinite;animation:float 1s linear infinite}.faa-float.animated-hover.faa-slow:hover,.faa-float.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-float.faa-slow{-webkit-animation:float 3s linear infinite;animation:float 3s linear infinite}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}
@keyframes pulse{0%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}.faa-parent.animated-hover:hover>.faa-pulse,.faa-pulse.animated,.faa-pulse.animated-hover:hover{-webkit-animation:pulse 2s linear infinite;animation:pulse 2s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-fast,.faa-pulse.animated-hover.faa-fast:hover,.faa-pulse.animated.faa-fast{-webkit-animation:pulse 1s linear infinite;animation:pulse 1s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-slow,.faa-pulse.animated-hover.faa-slow:hover,.faa-pulse.animated.faa-slow{-webkit-animation:pulse 3s linear infinite;animation:pulse 3s linear infinite}.faa-parent.animated-hover:hover>.faa-shake,.faa-shake.animated,.faa-shake.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-fast,.faa-shake.animated-hover.faa-fast:hover,.faa-shake.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-slow,.faa-shake.animated-hover.faa-slow:hover,.faa-shake.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}100%,80%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);-ms-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);-ms-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);-ms-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}100%,80%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}.faa-parent.animated-hover:hover>.faa-tada,.faa-tada.animated,.faa-tada.animated-hover:hover{-webkit-animation:tada 2s linear infinite;animation:tada 2s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-fast,.faa-tada.animated-hover.faa-fast:hover,.faa-tada.animated.faa-fast{-webkit-animation:tada 1s linear infinite;animation:tada 1s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-slow,.faa-tada.animated-hover.faa-slow:hover,.faa-tada.animated.faa-slow{-webkit-animation:tada 3s linear infinite;animation:tada 3s linear infinite}
@-webkit-keyframes passing{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0%);transform:translateX(0%);opacity:1}100%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}}
@keyframes passing{0%{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%);opacity:1}100%{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);opacity:0}}.faa-parent.animated-hover:hover>.faa-passing,.faa-passing.animated,.faa-passing.animated-hover:hover{-webkit-animation:passing 2s linear infinite;animation:passing 2s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-fast,.faa-passing.animated-hover.faa-fast:hover,.faa-passing.animated.faa-fast{-webkit-animation:passing 1s linear infinite;animation:passing 1s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-slow,.faa-passing.animated-hover.faa-slow:hover,.faa-passing.animated.faa-slow{-webkit-animation:passing 3s linear infinite;animation:passing 3s linear infinite}
@-webkit-keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}
@keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);-ms-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}.faa-burst.animated,.faa-burst.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-burst{-webkit-animation:burst 2s infinite linear;animation:burst 2s infinite linear}.faa-burst.animated-hover.faa-fast:hover,.faa-burst.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-burst.faa-fast{-webkit-animation:burst 1s infinite linear;animation:burst 1s infinite linear}.faa-burst.animated-hover.faa-slow:hover,.faa-burst.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-burst.faa-slow{-webkit-animation:burst 3s infinite linear;animation:burst 3s infinite linear}

Saya rasa dengan adanya contoh-contoh ini sobat bisa memahaminya, karena penggunaannya juga sangat mudah diterapkan, alasan menggunakan icon font awesome di blog saya adalah karena font awesome sangat ringan dan sangat bersahabat dalam blog, bisa mempercantik tampilan blog juga sobat. Dengan begitu kita akhiri saja tentang Cara Membuat 20 Animasi Font Awesome Terbaru ini.

Cara Membuat Pop Up Keren dan Responsive

Cara Membuat Pop Up Keren dan Responsive - Halo sobat, untuk hari ini saya akan berbagi tips tentang bagaimana membuat berhubung saya melihat popup yang digunakan oleh mbak Arlina saya tertarik dan ingin menambahkan popup tersebut di blog saya juga. Terus saya cari-cari tutorial tentang membuat popup dengan banyak versi yang menarik, namun tidak ada yang mirip seperti blog mbak Arlina tersebut.

Daripada pusing saya memutuskan untuk melihat source dari web mbak Arlina. Ketemu sih namun banyak yang membuat saya bingung. Terutama setelah saya menempatkan kode-kode dari sana tampilan Popup tidak mau muncul ha ha ha... tambah bingung dibuatnya. Namun dari usaha tersebut saya tidak mau mundur saya coba terus berkali-kali dengan sedikit bekal pengetahuan. Sampai keesokan harinya popup saya telah jadi dengan sempurna, sama persis dengan yang dimiliki mbak arlina, Boleh dikatakan ini adalah popup ala arlina design.

Cara Membuat Popup

Sebelum membuat popup alangkah baiknya kita tahu apa itu definisi popup. Menu Popup menurut definisi saya adalah menu yang apabila di klik terus muncul sebuah kotak dialog yang berisi sejenis peringatan, informasi, konfirmasi, dan dialog lainnya. Popup yang berisi peringatan biasanya digunakan untuk memberikan peringatan jika ada kesalahan atau kekurangan, ini biasanya digunakan untuk pencarian, contact form dan sejenisnya. Sedangkan Popup Konfirmasi biasanya digunakan untuk meyakinkan seseorang apakah benar-benar setuju atau tidak, pop up jenis ini biasanya digunakan untuk formulir registrasi, biasanya di dalam pop up ini ditambahkan dengan dialog peringatan. Terakhir adalah Pop up Informasi, seperti yang saya gunakan saat ini adalah sejenis pop up informasi, karena dialog yang saya gunakan adalah untuk memberikan info kepada seseorang untuk mengetahui segala informasi secara ringkas tentang isi dari blog saya. Dari Penjelasan di atas merupakan definisi menurut saya pribadi, jadi jika ada kesalahan saya mohon berkomentar agar saya dapat memperbaiki dengan benar, dan informasi yang saya berikan tidaklah menjadi informasi yang tidak berguna.

Langkah-langkah Membuat Popup

Oke, kita langsung saya ke pokok pembahasan tentang bagaimana membuat pop up seperti yang saya miliki saat ini.

1. Masuk ke blog sobat > dan pilihlah Template > selanjutnya pilih Edit HTML

2. Tambahkan CSS untuk menu pop up. Berikut ini adalah kode CSS yang akan sobat gunakan nantinya.

.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#ff675c;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
.top-menunavi li.infoInginTahu{border:0;}
.top-menunavi li.infoInginTahu a{background:#ff675c;color:#fff;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
.top-menunavi li.infoInginTahu a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

3. Cari kode</head> lalu tambahkan kode script di atasnya. Ingat jangan sampai masuk ke dalam tag kondisional ya sobat. Berikut ini kode javascript yakan sobat tambahkan.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("//fonts.googleapis.com/css?family=Roboto+Condensed:400,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');}
//]]>
</script>

Script tersebut berfungsi untuk menampilkan jumlah posting yang telah sobat publikasikan.
4. Cari kode <body>ini adalah bagian dimana dalog tersebut akan muncul pada saat menu pop up di klik. Sobat bisa mengubah pesan-pesan yang berisi di dalamnya. Misalnya  Logo, sosial media, dan isi dialog tentang blog sobat. Isikan kode di bawah ini di bawah kode <body>.

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='contentbox'>
<headbanger><span id='textlogo'>Ingin Tahu</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'></i></a>
</headbanger>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Ingin Tahu' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq3clKRSc8zsDPQ_PD1vjIjvofmp9W_rT9DK4B4ZicCTZn743TAPX3zHnLuxLAmImECkshqhs_jLxPl19kiQ2NfctEphUfAsOCYZ7hyCtukpUPAMWIWTT9WxfB5HtrNcVulBkDEtLE4X0/s1600/IT-InginTahu.png' title='Ingin Tahu' width='140'/><br/>
<script src='http://memberi-cara.blogspot.com/feeds/posts/default?alt=json-in-script&callback=getposts'></script><br/><br/>
Blog Ingin Tahu merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger<br/><br/>
Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi sobat semua. Terima kasih.<br /><br />
<div style=float:right;font-size:8px;margin-bottom:0;><script>eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1.4("<a 2=\'3://0-5.6.7\'>8 9</a>");',11,11,'memberi|document|href|http|write|cara|blogspot|com|Memberi|Cara|'.split('|'),0,{}))</script></div>
</div></div></div>
<div id='left'>
<div class='taber2'><a href='https://plus.google.com/111136239845024944402' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'></i> Google Plus</a></div>
<div class='taber3'><a href='https://www.facebook.com/Ingin.Tahu.IT' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'></i> Facebook</a></div>
<div class='taber4'><a href='https://twitter.com/aboeoeba' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'></i> Twitter</a>
</div>
<div class='taber6'><a href='http://codepen.io/abudarda/' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen fa-fw'></i> Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=BLOG ID SOBAT' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-users fa-fw'></i> Join this blog</a>
</div></div></div></div></div></div>

Keterangan : parse kode script yang paling atas. Ubah dan sesuaikan pesan singkat tentang informasi blog sobat. Ganti alamat sosial media dan id blog yang telah saya tandai tersebut

5. Langkah terakhir sobat masukkan kode ini di menu yang sobat inginkan:

<li class='infoInginTahu'><a class='popup-link' href='#popup'>Popup </a></li>

Setelah itu save Template dan selesai. Silahkan sobat coba sendiri dan lihat hasilnya.

Demikian saya akhiri saja tutorial tentang membuat menu pop up yang berbentuk dialog informasi. Popup ala arlina design ini saya peroleh dari source kode dari web mbak arlina. Jika ada kesalahan dalam tutorial ini saya mohon maaf dan saya juga ingin sobat memberikan kritik dan saran demi perkembangan blog ini selanjutnya.

Cara Membuat Navigasi Horizontal dan Vertikal

Cara Membuat Navigasi Horizontal dan Vertikal - Datang lagi saya dengan sebuah bekal pengalaman yang akan saya bagikan kepada sobat dengan banyaknya pertanyaan-pertanyaan yang saya baca di grup facebook yaitu bagaimana membuat navigasi horizontal maupun vertikal? maka dari itu saya berusaha untuk mendapatkan jawabannya. Mudah-mudahan dengan adanya posting kali ini saya akan dapat sedikit membatu sobat dalam membuat navigasi tersebut.

Saya juga belajar cara ini dari sebuah website yang bernama w3school, tidak dipungkiri pada awalnya juga saya merasa bingung untuk membuat navigasi horizontal maupun vertikal. Kebetulan saya juga masih dalam tahap belajar dalam dunia blogging saya boleh dikatakan masih pemula. Jadi jika ada yang merasa tidak senang dengan posting saya yang terlihat "sok tau" ini saya mohon maaf sebesar-besarnya.

Membuat Navigasi Horizontal

Menu navigasi horizontal termasuk paling banyak dipakai oleh para blogger, karena sangat mudah untuk di akses oleh pengunjung dan juga enak dilihat. Dalam proses pembuatan navigasi ini termasuk mudah, kita hanya melakukannya dengan 2 langkah besar yaitu memasukan kode di head dan body.

berikut adalah langkah-langkah membuat navigasi horizontal:

Langkah-langkah membuat Navigasi Horizontal

1. Masuk ke blogger sobat lalu pilih template > pilih edit HTML > lalu masukan kode CSS di Head sobat, jika bingung cari kode dan simpan sebelum ]]></b:skin> atau kode </style>langsung saja lihat contoh kodenya seperti di bawah ini:

ul{list-style-type:none;margin:0;padding:0;overflow:hidden;border:1px solid #e7e7e7;background-color:#f3f3f3}
li{float:left}
li a{display:block;color:#666;text-align:center;padding:14px 16px;text-decoration:none}
li a:hover:not(.active){background-color:#ddd}
li a.active{color:white;background-color:#4CAF50}

Setelah itu sobat isikan kode dibawah kode <header> lalu tambahkan kode berikut dibawahnya:

<ul>
  <li><a class="active" href="/">Home</a></li>
  <li><a href="#Menu1">Menu1</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Untuk lebih jelasnya sobat bisa lihat demo:

• DEMO

Membuat Navigasi Vertikal

Menu navigasi vertikal termasuk jarang saya lihat dipakai oleh para blogger, karena saya rasa tata letak kurang efisien untuk menu vertikal dan memakan tempat juga sih. Dalam proses pembuatan navigasi ini termasuk mudah sama seperti menu horizontal, kita hanya melakukannya dengan 2 langkah besar yaitu memasukan kode di head dan body.berikut adalah langkah-langkah membuat navigasi vertikal:

Langkah-langkah membuat Navigasi Vertikal

Langkah membuat menu navigasi vertikal hampir sama dengan membuat menu horizontal perbedaannya hanya terdapat di code CSS dan HTML saja mungkin langkah kita persingkat saja dengan melakukan edit HTML di template sama seperti di atas kita menambahkan kode CSS seperti di bawah ini:

body{margin:0}
ul{list-style-type:none;margin:0;padding:0;width:25%;background-color:#f1f1f1;position:fixed;height:100%;overflow:auto}
li a{display:block;color:#000;padding:8px 0 8px 16px;text-decoration:none}
li a.active{background-color:#4CAF50;color:white}
li a:hover:not(.active){background-color:#555;color:white}

Jika sudah selesai selanjutnya sobat memasukkan kode HTML di bawah kode header sepeerti di atas berikut ini adalah kode tersebut:

<li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Untuk lebih jelas sobat bisa lihat demo berikut ini:

• DEMO

Bagaimana sobat? mudah kan? jika ada pertanyaan atau sobat kurang paham jangan malu untuk bertanya di komentar atau melalui email saya. Saya rasa demikian saja untuk posting tentang cara membuat menu navigasi horizontal maupun vertikal. Semoga kedepannya saya akan dibekali banyak pengalaman untuk dibagikan kepada sobat. Terima kasih

Membuat Daftar Isi Sederhana dan Cepat Berdasarkan Label

Membuat Daftar Isi Sederhana dan Cepat Berdasarkan Label - Halo sobat yang Ingin Tahu kali ini saya akan berbagi pengalaman lagi yaitu tentang bagaimana membuat daftar isi pada halaman statis sobat. Berikut ini adalah merupakan contoh gambar daftar isi yang akan saya bagikan. Cara Penerapan kode ini sangatlah mudah, bahkan pemula sekalipun dapat menggunakan cara ini dengan waktu beberapa menit, jadi sebaiknya sobat meluangkan waktu sebentar untuk membacah dongeng yang saya berikan. 

Daftar isi berdasarkan label sangat berguna bagi kita untuk menampilkan semua posting pada satu halaman saja. Sehingga pengunjung di blog kita akan merasa sangat dimudahkan dengan adanya daftar isi ini. Tampilan yang sederhana dan cepat sehingga sangat mudah di akses oleh pengunjung, namun tidak hanya itu saja, Ingin Tahu?

Beberapa Fungsi dan Manfaat Daftar Isi:

• Menampilkan daftar isi berdasarkan label
• Memiliki pemberitahuan tentang artikel terbaru
• Tersusun rapi sehingga pengunjung mudah untuk mencari artikel
• Sederhana dan Cepat
• Menurut saya enak di pandang mata, soalnya saya melihat ada beberapa blog yang menggunakan daftar isi yang mencantumkan banyak variasi sehingga menimbulkan kesan yang tidak enak dipandang mata.

Cara Pemasangan Daftar Isi Berdasarkan label di Blog:

1. Login ke blogger > Pilih Menu Laman > lalu pilih Buat Laman Baru pada halaman edit posting sobat akan menemui tab compose dan HTML kemudian sobat pilih HTML > setelah itu sobat masukan kode yang akan saya berikan di bawah ini:

<div style="background-color:none; max-height:1200px; margin:auto;overflow:auto;padding:3px;text-align:left;width:100%;">
<script src="https://sites.google.com/site/dardauba/script-abudarda/DaftarIsi.js"></script><script src="/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Keterangan: untuk kode yang saya tandai di atas. Sobat bisa edit sesuai dengan kebutuhan sobat, Misalnya ingin merubah background maka edit kode none dan ganti dengan kode warna yang sobat inginkan, dan jika sobat ingin merubah tinggi maksimal dari daftar isi maka rubah 1200px sesuai dengan keinginan sobat.

2. Sobat Publikasikan dan selesai.

Tutorial yang saya bagikan sekarang ini tidak hanya tampilan sederhana, namun memiliki kelebihan juga yaitu daftar isi responsive, maka dari itu sobat tidak perlu khawatir untuk menambahkannya dalam template blog sobat yang sudah responsive tersebut.

Demikian posting saya mengenai cara membuat daftar isi berdasarkan label yang sederhana dan cepat. Semoga bermanfaat untuk sobat, dan jangan lupa memberikan komentar bagi yang merasa kurang paham atau isi dari posting saya ada kesalahan, karena saya sangat berharap komentar sobat demi perkembangan posting berikutnya. Terima Kasih