Cara Membuat Made With Love Bergerak di Footer Blogger

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger


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 :

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
blender.org
Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
typescriptlang.org
Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
dlvrit.com
Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
darktable.org
Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
nurhishare.web.id
Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

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 :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

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 :

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
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 :

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

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


Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

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 :

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
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 :

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

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

< Script HTML >
<center>
<div class=''>
Made with <span class='love'>💙</span>
</div>
</center>


Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
Enter

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

Sehingga menjadi seperti dibawah :

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger


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

Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

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 :


Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

Untuk script pemanggilan di footernya bisa dilihat di demo dibawah.

3. Demo

Made With Love Icon Diam



Cara Membuat Animasi Made With Love Bergerak di Footer Blogger

Made With Love Icon Bergerak




Cara Membuat Animasi Made With Love Bergerak di Footer Blogger
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!
nimdA Menulis adalah bekerja untuk keabadian.

3 Komentar untuk "Cara Membuat Made With Love Bergerak di Footer Blogger"

  1. Mantap nih blognya, pake VioMagz jg.

    BalasHapus
  2. Sangat bermanfaat gan, udah saya coba di blog saya dan berhasil  Terimakasih gan, semangat berkarya, salam blogger...

    BalasHapus
Terimakasih telah memberikan komentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel