Pamula merupakan tema personal yang saya desain dengan beberapa referensi, Tema ini dibuat clean dan elegant untuk membuat lebeih fresh serta memaksimalkan fitur dari fungsi blogger agar dapat meminimalisir penggunaan javascript atau json blogger. Tema ini memiliki kecepatan super cepat seperti tema-tema yang saya share sebelumnya, tapi pada tema yang saya buat sekarang terus menggunakan fungsi javascript dan tidak ada jQuery di dalamnya. Kemungkinan kalian tidak akan paham karena terbiasa dengan jQuery. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Kecepatan loading ini sudah saya test sendiri menggunak
Jika kalian melihat kebawah pada bagian Credit Link blog ini akan terdapat Icon Love yang menggunakan Font Awesome tentu Icon tersebut ditambahkan Animasi Scale supaya terlihat seperti membesar dan mengecil. Untuk membuat Animation Love tersebut sangat mudah sekali dan tidak sepusing yang kamu pikirkan.
Saya sendiri awalnya tertarik untuk membuat Animation Love ini karena memang bagus sekali dan kita bisa mengungkapkan bahwa Template yang ada di blog kita yang dibuat sendiri maupun redesign sendiri bisa menggunakan Icon Love ini sebagai Symbol bahwa kita membuat sepenuh hati.
Apa saja yang diperlukan untuk membuat Icon Love dan Animationnya ? Bahan yang kamu perlukan adalah :
- Text Editor
- Font Awesome
Bahan nya hanya 2 saja karena ini menggunakan CSS dan Font Awesome agar dapat berjalan sesuai yang kita mau.
Membuat Animation Love di CSS
Pertama buka Text Editor
Kedua buat kode htmlnya
<!DOCTYPE html>
<html>
<head>
<title>Love This</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/fontawesome.min.css">
<style type="text/css">
</style>
</head>
<body>
</body>
</html><div id="aishiteru">
<i class="fa fa-heart"></i>
</div>body
{
margin: 0;
padding: 0;
background: rgba(115,102,187,0.5);}
#aishiteru
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#aishiteru i
{
font-size: 100px;
color: #f06262;
animation: love 2s infinite ease;
}
@keyframes love
{
from{transform: scale(1);}10%{transform: scale(1.2);}
}Untuk melihat hasilnya seperti apa kalian bisa klik Tombol dibawah ini
Sedikit penjelasan pada kode diatas supaya kalian paham.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/fontawesome.min.css">Fungsi dari Font Awesome ini untuk memanggil Icon/Font yang bernama Heart supayan berubah menjadi Hati/Love.
<div id="aishiteru">
<i class="fa fa-heart"></i>
</div>Fungsi dari aishiteru memberikan class pada div supaya bisa dibuat dengan css
Fungsi dari fa fa-heart ini adalah untuk memanggil Icon dari Font Awesome tersebut
#aishiteru
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#aishiteru i
{
font-size: 100px;
color: #f06262;
animation: love 2s infinite ease;
}
@keyframes love
{
from{transform: scale(1);}10%{transform: scale(1.2);}
}Fungsi dari #aishiteru untuk membuat posisi agar berada di tengah
Fungsi dari #aishiteru i memberikan warna , size dan animasi pada icon
Fungsi dari @keyframes dan ini yang penting untuk membuat animasi tersebut berjalan.
Semoga apa yang aku bagikan ini bermanfaat bagi kalian yah 😊
Comments
Post a Comment
To insert a code use <i rel="pre">code_here</i>To insert a quote use <b rel="quote">your_qoute</b>To insert a picture use <i rel="image">url_image_here</i>To insert a video use <i rel="video">video</i>Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan. Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim.