Cara Membuat Made With Love Bergerak di Footer Blogger

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

Daftar Isi : [Klik]

Cari Icon Lovenya
Cara Pasang Di Footer
Demo

Bagaimana cara menempatkan made with love ❤ di footer blog?
How to add made with love ❤ on footer?
Bagaimana cara membuat made with love di footer menggunakan icon love?
Mungkin saja sobat pernah menemukan kata-kata seperti dibawah ini di footer website :

• Made with Love ♥ in Switzerland
• Made with ❤
• Crafted with Love ♡
• Made with ♡
• Share with Love 💙
• Coded with Love ❤
• Created with Love ♥
• Writing with Love ❤
• Ditulis dengan ❤
• Dibuat dengan 💚
• Dikelola dengan ❤
• With ❤
• Dengan ❤

Dibawah ini adalah sedikit cara bagaimana membuat made with love seperti diatas, ada made with love icon bergerak (icon love berdetak secara terus menerus menggunakan teknik heartbeat css animation), dan made with love icon diam (icon lovenya tidak bergerak).
Cukup menarik karena made with love kesannya lebih berasa personal serta bermakna kesungguhan dari si pemiliknya sehingga dapat memberikan efek trust ke para pembacanya, banyak sekali situs website yang menggunakan made with love di footernya seperti yang pernah penulis temukan :

blender.org

typescriptlang.org

dlvrit.com

darktable.org

nurhishare.web.id

Berikut langkah-langkah membuatnya mulai dari mencari icon love hingga cara pemasangan scriptnya di footer blog :

1. Cari Icon Lovenya

Emojipedia : https://emojipedia.org/
Getemoji : http://getemoji.com/
Heartsymbol.love : http://heartsymbol.love/list
CDN Network :

2. Cara Pasang Di Footer

Made With Love Icon Diam

Masuk ke blogger > masuk ke Tema > pilih Edit HTML > Klik di dalam editor > tekan ctrl+f > ketikan </footer> kemudian Enter, lihat gambar dibawah :

Lalu langsung saja ketikan Made with 💚 tepat diatas </footer>, Jangan lupa berikan bright <br/> diatas Made with 💚 nya, supaya made with lovenya pindah ke sebelah bawah dari nama blog sobat, lihat gambar dibawah :

Setelah selesai klik Simpan tema, lalu cek home page blog sobat.
Jika berhasil maka hasilnya akan seperti gambar dibawah ini :

Made With Love Icon Bergerak

Masuk ke blogger > masuk ke Tema > pilih Edit HTML > Klik di dalam editor > tekan ctrl+f > ketikan </style> kemudian Enter :

Lalu copy dan tempatkan script CSS dibawah ini tepat diatas </style>, lihat gambar dibawah :

< Script CSS >

/*Made With Love CSS3*/
.love {
display: inline-block;
position: relative;
top: .1.0em;
font-size: 0.9em;
color: #e74c3c;
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
-webkit-animation: love .5s infinite linear alternate-reverse;
-moz-animation: love .5s infinite linear alternate-reverse;
animation: love .5s infinite linear alternate-reverse;
}
@-webkit-keyframes love {
to {-webkit-transform: scale(1.4);}
}
@-moz-keyframes love {
to {-moz-transform: scale(1.4);}
}
@keyframes love {
to {transform: scale(1.2);}
}
/*Made With Love CSS3*/

Sehingga menjadi seperti ini :

Jangan lupa klik Simpan tema
Kemudian cari </footer> ganti Made with 💚 dibawah ini menggunakan script HTML :

< Script HTML >

Enter

Sehingga menjadi seperti dibawah :

Jangan lupa, setelah selesai klik Simpan tema, lalu cek home page blog sobat.
Jika berhasil maka akan seperti gambar dibawah ini :

Menggunakan CDN

Sebetulnya menggunakan CDN pun sama saja penempatan script di footer nya, akan tetapi sebelumnya sobat harus mengkopi link Font Awesome CDN diatas, tempatkan CDN tersebut dibawah <head> tepat nya sebelum <b:skin><![CDATA[/* seperti gambar dibawah :

Untuk script pemanggilan di footernya bisa dilihat di demo dibawah.

3. Demo

Made With Love Icon Diam

Made With Love Icon Bergerak

Klik Lihat Demo diatas, untuk melihat demo nya di Codepen, tampilan icon heart di pc dan mobile itu berbeda, jadi tiap browser berbeda-beda dalam merender sebuah icon, misal tampilan icon heart jika di mobile itu berwarna merah, di pc ada yg berwarna ada juga yang tidak berwarna.

Semoga bermanfaat 😊
Selamat mencoba!