√ Cara Memasang Efek Bergerak Pada Semua Link Diblog Secara Otomatis

Cara Memasang Efek Bergerak Pada Semua Link Diblog Secara Otomatis

Posted by New's

Saturday, December 12, 2020

syugulnajeh - Link bergerak ini akan berfungsi disemua halaman web atau blog kamu. Link ini akan bergerak jika disorot menggunakan mouse (di perangkat desktop) atau diklik jika diakses di perangkat mobile.

Cara membuat efek bergerak pada semua link ini sangatlah mudah. Kamu cukup menempelkan beberapa kode dibawah ini ke laman (HTML) blog kamu. Atau kamu juga bisa memasukkan kodenya dibagian tata letak atau Layout.

Ada banyak manfaat yang bisa didapat kalau kamu memasang efek ini. Diantaranya :

Membuat para pengunjung terkesan dengan desain blog kamu.
Meningkatkan skor trafik blog kamu.
Membuat para pengunjung betah lama-lama untuk mebaca artikel yang ada diblog kamu.
Dan masih ada lainnya.

Untuk cara pemasangannya ikuti langkah-langakah dibawah ini.

Cara Memasang Efek Bergerak Pada Semua Link Diblog Dengan Mudah

1. Masuk ke Daskbord blogger kamu.

2. Masuk ke menu Tata letak atau Layout.

3. Tambahkan Widget HTML/Javascript.

4. Paste kode berikut kedalam kolom HTML tadi.

.entry-content img { transition-duration:0.5s; transition-timing-function: ease; transition-delay:0s; -moz-transition-duration:0.5s; -moz-transition-timing-function:ease; -moz-transition-delay:0s; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; -webkit-transition-delay:0s; -o-transition-duration:0.5s; -o-transition-timing-function:ease; -o-transition-delay:0s; } .entry-content img:hover { animation-name: goyang; animation-duration: 0.8s; transform-origin:50% 50%; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: goyang; -moz-animation-duration: 0.8s; -moz-transform-origin:50% 50%; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -webkit-animation-name: goyang; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @keyframes goyang{ 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(2px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } @-moz-keyframes goyang{ 0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } } @-webkit-keyframes goyang{ 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } }

5. Jika sudah klik simpan dan lihat hasilnya!

Itulah tutorial singkat tentang bagaimana cara mempercantik tampilan blog tanpa harus mengurangi kualitas loading atau SEO pada blog kamu.