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 mengg...
Hai, lama tidak berjumpa lagi dengan kalian Blogger Indonesia. So pada kesempatan kali ini saya akan share Tutorial Membuat Animasi Air Bergelombang agar terlihat menarik pada tema-tema yang sedang kalian pakai. Kalau temanya gitu-gitu aja terus mah ngak bakal seru donk karena penampilan yang dibuat itu aja terus ikutin tutorial yang sudah ada dan dipakai lagi dan lagi jadinya kayak monoton gitu ngak ada IDE lain lagi apa ?
Dengan adanya tutorial ini dapat membuat kalian untuk mendapatkan Ide desain yang bagus dan berbeda tentunya dengan yang lain. Tapi tergantung kitanya sih mau dibuat apa itu tampilan blog.
Cara Membuat Animasi Air Bergelombang
Pertama buka Blog > klik Tema > klik Edit HTML
Kedua tambahkan kode berikut tepat dibawah kode </header>
<section>
<div class='air air1'></div>
<div class='air air2'></div>
<div class='air air3'></div>
<div class='air air4'></div>
</section>
Selanjutnya tambahkan kode css tepat diatas kode </style> or </b:skin>
section{
position: relative;
width: 100%;
height: 100vh;
background: #3586ff; // Change If You Added New Background Color
overflow: hidden;
}
section .air{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhzTDFrlzv2qFV1h1335P9oWKmOBArj5xzLdRSGFkYLH-OphiOMRcI-T-E0oXBK1kVBZStANPx6z6cT01szUCjYmcJ5ywHVzsYXDpsiYlywR3fDu5Dtm0aJZVPrxoyRv7DCEWXR8_c6FU/s1600/wave.png);
background-size: 1000px 100px
}
section .air.air1{
animation: wave 30s linear infinite;
z-index: 1000px;
opacity: 1;
animation-delay: 0s;
bottom: 0;
}
section .air.air2{
animation: wave2 15s linear infinite;
z-index: 999;
opacity: 0.5;
animation-delay: -5s;
bottom: 10px;
}
section .air.air3{
animation: wave 30s linear infinite;
z-index: 998;
opacity: 0.2;
animation-delay: -2s;
bottom: 15px;
}
section .air.air4{
animation: wave2 5s linear infinite;
z-index: 997;
opacity: 0.7;
animation-delay: -5s;
bottom: 20px;
}
@keyframes wave{
0%{
background-position-x: 0px;
}
100%{
background-position-x: 1000px;
}
}
@keyframes wave2{
0%{
background-position-x: 0px;
}
100%{
background-position-x: -1000px;
}
}
Terakhir simpan Tema
Bagi kalian yang ingin melihat tampilannya bisa klik tombol berikut
Semoga artikel ini bermanfaat bagi kalian semua :D
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.