Saturday, August 17, 2013

Cara Membuat Link / Gambar Bergerak Bergoyang / Nudging di Blog

Pada kesempatan kali ini saya akan memposting bagaimana Cara Membuat Link / Gambar Bergerak Bergoyang / Nudging, trik ini tidak hanya bisa di terapkan pada blog, tetapi bisa juga di terapkan pada website.

Membuat Link / Gambar Bergerak Bergoyang / Nudging di Blog


Apakah mmebuat berat loading blog ? jawabannya tidak, karena nudge ini kita sematkan pada CSS, sehingga tidak akan memperberat loading blog anda
Membuat Link / Gambar Bergerak Bergoyang / Nudging di Blog

Trik nudge ini bisa di gunakan pada link, gambar maupun widget, Gimana ? tertarik kan buat menerapkannya ?  Langsung aj cekidot

1. Sign pada akun Blogger kalian

2. Lalu pilih blog yang kalian akan terapkan trik nudge ini

3. Piih Template lalu Edit HTML 

4. Copas kode di bawah ini tepat di atas  ]]></b:skin>

/*--- Nudging Effect trikaja.blogspot.com---*/
.nudge {
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.nudge:hover {
margin-left: 25px;
padding-left: 5px;


5. Simpan template blog nya

Untuk menerapkannya pada link dan gambar anda cukup menambahkan class='nudge'

untuk Link, Contoh : Link Nudge
<a class="nudge" href="http://trikaja.blogspot.com/">Link Nudge</a>

Untuk Gambar, Contoh :

<img border="0" class="nudge" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOzCMTLOdRPEPLUyKjiOvAuvty1umwVVWtLL5W4Z8DvbeBz-8NwZSsE92spZyOYfvYJHT-Fe2Qk-32GT0tcYsntiUaRT6qKjjmsWLQysWrIaLzKdyr-n7imi4isxlHMkdl2gBbL9h-jUG/s1600/link.jpg" />


Semoga Berhasil ya sobaaaat

Artikel Terkait

Cara Membuat Link / Gambar Bergerak Bergoyang / Nudging di Blog
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email