بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Animasi loading blog adalah animasi yang tampil ketika blog mulai dibuka. Sehingga jeda antara klik URL halaman blog dengan halaman depan blog diselingi animasi loading ini.
Sehingga untuk membuat para pengunjung supaya tidak bosan menunggu blog tampil bisa diberikan animasi loading blog seperti ini. Ada beberapa macam animasi loading yang bisa ditampilkan. Tapi kali ini saya akan memberikan cara membuat animasi loading blog berbentuk buah hati berwarna merah muda
Baca Juga : Animasi Loading Awal Blog Ketika Tampil
Buah hati dalam arti harfiahnya bisa dikatakan sang kekasih hati, pujaan hati. Makna yang tersirat cukup dalam. Dan dalam penerapan loading blog menyiratkan bahwa sang admin blog memiliki jiwa penyayang kali ya :D
Dalam animasi loading blog ini kita menggunakan seperti biasanya, bahasa CSS3. Sehingga meminimalkan resiko loading blog yang berat, karena CSS memang terkenal dengan bahasa pemrograman yang ringan tapi juga handal.
Baca Juga : Modifikasi Spoiler Show Hidden dengan CSS dan HTML
Pertama blog ini muncul saya juga menggunakan animasi loading blog dengan menggunakan animasi berupa kucing bergoyang. Lucu sih kelihatannya. Tapi sekarang sudah saya copot saja kode yang menempel di template. Sehingga ketika orang masuk ke blog ini sudah tidak disuguhi lagi animasi loading blog.
Untuk kalian yang ingin menggunakannya bisa gunakan animasi ini. Tapi maaf saya tidak memberikan tutorial lanjutannya, silakan kalian edit sendiri ya untuk pemasangannya. :D
Animasi Loading Blog Bentuk Buah Hati
1. Langsung ke Tema
2. Klik Sesuaikan : Edit HTML
3. Setelah itu pasti masuk ke template.
4. Pencet CTRL+F bebarengan dengan mengisikan kode ]]></b:skin>
5. Tempelkan kode dibawah ini persis diatas dari kode ]]></b:skin> itu
*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;}
.loader{height:350px;width:350px;position:absolute;margin:auto;left:0;right:0;top:0;bottom:0;}
.loader div:nth-child(1){background-color:#dd1c4b;height:200px;width:125px;position:absolute;margin:auto;top:0;bottom:0;left:40px;right:0;transform:rotate(45deg);border-radius:100px 100px 10px 10px;transform-origin:50% 69%;animation:flip1 4s linear infinite;}
@keyframes flip1{25%{transform:rotate(45deg) rotateX(180deg);}50%{transform:rotate(45deg) rotateX(180deg);}75%{transform:rotate(45deg);}}
.loader div:nth-child(2){height:200px;width:125px;background-color:#dd1c4b;position:absolute;top:151px;left:132px;transform:rotate(135deg);transform-origin:50% 31%;border-radius:10px 10px 100px 100px;animation:flip2 4s 1s linear infinite;}
@keyframes flip2{25%{transform:rotate(135deg) rotateX(180deg);}50%{transform:rotate(135deg) rotateX(180deg);}75%{transform:rotate(135deg);}}Seperti biasa property Rotate dan Keyframe digunakan disini. Rotate untuk perputaran sedangkan keyframe untuk menampilkan efek animasinya.
Lanjut
6. Masuk ke Tata Letak pilih Tambah HTML/Javascript kemudian taruh kode dibawah di konten kosong disitu
<div class="loader">
<div></div>
<div></div>
</div>7. Terakhir, save dan publikasikan blog kalian pasti sudah jadi itu loading blog.
Memang menurut beberapa blogger, efek animasi ini menjadi pro kontra. Ada yang mengatakan bahwa dengan animasi ini maka blog menjadi lebih unik. Tapi disisi lain, malah membuat ribet dengan aneka animasi pada awal blog tampil seperti ini. Maka pilihan ada pada diri kalian sendiri, mau menggunakan atau tidak, Up to you. Kalau saya hanya memberikan tutorialnya saja. Sekian dulu ya besok kita sambung lagi. Thanks ya yang sudah mampir ke sini di artikel Animasi Loading Blog Bentuk Buah Hati. Hidup itu adalah pilihan dan pilihan itu ada pada diri kalian. Kita yang berencana, dan Tuhanlah yang menentukan. So, don't surrender
See the Pen Ikon Loading Page Berbentuk Hati Murni CSS by Alifacode (@Alifacode) on CodePen.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Animasi Loading Blog Bentuk Buah Hati . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
