Cara Menambahkan Efek Jiggle Pada Blog

Cara Menambahkan Efek Jiggle Pada Blog
How To Add Jiggle Effects On The Blog
Jiggle Effects adalah sebuah efek yang dapat membuat tulisan, tombol, link, dan sebagainya bergoncang. Efek Goncangan ini biasanya dibuat untuk menarik perhatian visitor pada tulisan, tombol, atau link yang diberikan efek. Untuk previewnya bisa Anda lihat pada result di akhir post.

Baca juga: Membuat Tombol Slide Demo dan Download Keren

Cara Menambahkan Efek Jiggle
1. Copy CSS berikut pada blog sobat. Letakkan sebelum atau di atas kode ]]></b:skin> atau </style>.
.anim {
  animation: jiggle 2s ease-in infinite;
}

@keyframes jiggle {
  48%, 62% {
    transform: scale(1.0, 1.0)
  }
  50% {
    transform: scale(1.1, 0.9)
  }
  56% {
    transform: scale(0.9, 1.1) translate(0, -5px)
  }
  59% {
    transform: scale(1.0, 1.0) translate(0, -3px)
  }
}

2. Gunakan efek jiggle dengan menambahkan atribut "anim" pada kode class. Contohnya seperti kode tombol berikut.
<a class='tombol anim' href='#'>Jiggle</a>

3. Selamat Mencoba


Saya rasa cukup sekian artikel Cara Menambahkan Efek Jiggle Pada Blog. Semoga bisa bermanfaat bagi Anda yang menggunakannya. Sebelum mencoba, ada baiknya untuk meninggalkan komentar Anda terlebih dahulu. Terima Kasih telah membaca artikel di Opick Weblog.
Bila ingin copas silahkan lapor & cantumkan link berikut.
Source : https://wajahilmu.blogspot.com/2015/06/how-to-add-jiggle-effects-on-blog.html

Share this :

Previous
Next Post »

25 komentar

Tuliskan komentar
Unknown
author
26 Jun 2015, 08:49:00 delete

ini templatenya mbak arlina yang gan, keren

Balas
avatar
26 Jun 2015, 08:52:00 delete

Setuju juga dengan pendapat agan, dengan efek jiggle bisa menarik perhatikan pengunjung.

Balas
avatar
26 Jun 2015, 08:56:00 delete

bener gan, lumayan lah kalo di pasang pada link penting biar pengunjung tertarik buat ngeklik.. n yang terpenting gak mempengaruhi loading blog

Balas
avatar
Onyet
author
26 Jun 2015, 11:16:00 delete

wah keren tombol nya, Tombol Result nya juga keren.

Balas
avatar
Unknown
author
26 Jun 2015, 12:44:00 delete

Setia saya berkunjung ke blog ini, akhirnya ada artikel yang menambah ilmu + dapat mempercantik Blog..
Tombol Result yang ada roketnya ituh make Font Awesome ngk mas?

Balas
avatar
26 Jun 2015, 12:48:00 delete

hehe makasih kunjungannya gan
iya gan, itu pake font awesome

Balas
avatar
26 Jun 2015, 12:59:00 delete

itu tombol result standar kok gan, biar ringan hehe

Balas
avatar
Unknown
author
26 Jun 2015, 13:37:00 delete

mantap gan :D
gw suka nih sama templatenya :)

Balas
avatar
26 Jun 2015, 13:38:00 delete

thanks gan, template inspirasi dari blog mba arlina

Balas
avatar
Bro Yusran
author
26 Jun 2015, 14:01:00 delete

Artikel ini sangat membantu sy..

Terima Kasih

Balas
avatar
HEROKID
author
27 Jun 2015, 15:41:00 delete

keren sih gan. tp bikin loading lama gak ya kira kira?
oh iya izin upload di blog saya gan :D tenang .. ada sumbernya kok

Balas
avatar
27 Jun 2015, 15:45:00 delete

gak mempengaruhi loading blog gan, soalnya css nya dikit bnget.. silahkan gan :)

Balas
avatar
HEROKID
author
27 Jun 2015, 16:00:00 delete

bang mau tanya lagi , itu yang kode HTML di taruh dimana? gagal paham ane

Balas
avatar
27 Jun 2015, 16:24:00 delete

HTML di atas itu cuma contoh gan. cara pakainya tambahkan kode anim di bagian class hingga jadinya seperti contoh di atas

Balas
avatar
dian
author
28 Jun 2015, 04:28:00 delete

oh iya gan cara bikin tombol download yg tombolnya seperti tombol share diblog agan caranya gmn ya???

Balas
avatar
28 Jun 2015, 05:04:00 delete

maksudnya ada icon dan tooltip nya gitu?

Balas
avatar
BS
author
30 Jun 2015, 15:03:00 delete

waww keren gan makasih infonya bermanfaat banget buat blog ane

Balas
avatar
Ucuperszz
author
6 Jul 2015, 16:07:00 delete

Thanks gann Buat tutorial nya... ane jadi dapet banyak pengetahuan tentang blog.

Balas
avatar
18 Jul 2015, 06:24:00 delete

keren gan, wajib dicoba nih :D

Balas
avatar
18 Jul 2015, 06:34:00 delete

Izin nyicip gan. terimakasih informasinya.

Balas
avatar
18 Jul 2015, 06:41:00 delete

mantab gan izin nerapin nih thanks gan tutornya sangat lengkap

Balas
avatar
Unknown
author
18 Jul 2015, 11:35:00 delete

Tutorialnya lengkap gan, tetapi saya agak bingung apakah ini membuat loading blog serta SEO rusak karena ini gan?

Balas
avatar
dian
author
13 Sept 2015, 11:02:00 delete

req , cara pasang font awesome

Balas
avatar
13 Sept 2015, 14:47:00 delete

ok, ntar ane update sist :)

Balas
avatar

✖ Komentar dengan isi Link Aktif, Promosi, atau mengandung unsur Sara akan dihapus.
✔ Bila ingin riquest, bertanya, atau sekedar say hi aja, silahkan ke halaman OOT
✔ Untuk menyisipkan kode, silahkan parse lalu copy dan paste hasil parse ke kolom komentar.

EmoticonEmoticon OOT