For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat preloader keren diblogger menggunakan efek animasi

Hello sobat IcloudZer jumpa lagi berasa admin, sekarang masih suasana tahun baru semoga tahun ini menjadi tahun yang penuh berkah bagi orang orang yang mengharapkannya, baiklah kali ini admin akan membahas bagaimana sih caranya membuat Preloader pakai animasi diblogger

Info: Jika kamu sudah penasaran, yuk langsung aja kita bahas bersama sama okok, okay maksudnya

Preloader

Preloader sangat berguna sekali apabila diterapkan didalam blog yang kamu kelola, soalnnya dengan menggunakan Preloader didalam blog akan membuat tampilan blog semakin kece, dan membuat blog lebih tampak berkesan

Responsif

Jika kamu menggunakan Preloader didalam blog kamu, maka tidak membuat blog kamu itu menjadi lambat, soalnya Preloader yang sedang sayabbahas ini sangat responsif pada kecepatan dan juga sangat responsif pada tampilan baik mobile dan juga desktop

Sangat disarankan: Agar kamunya membaca artikel ini hingga selesai oke

Cara pembuatan

Baiklah sekarang admin bakalan memberikan informasi mengenai bagaiamana caranya membuat Preloader keren diblogger pakai efek animasi CSS bergerak

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bisa menempelkannya diatas kode ]]></b:skin>

/* Preloader by Icloudice */
#rahPreloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.rahCnt{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.rahLicensi{position:absolute;top:5px;right:5px; font-weight:bold}
.rahLoader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.rahMoving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.rahMoving-dot:first-child{background-color:#8cc769;animation-delay:0.5s}
.rahMoving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.rahMoving-dot:nth-child(3){background-color:#e8ad11;animation-delay:0.3s}
.rahMoving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.rahMoving-dot:nth-child(5){background-color:#f80000;animation-delay:0.1s}
@keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}

Info: Atau kamunya juga bisa menggunakan tag kode <style>

Kode HTML

Langkah selanjutnya adalah kamu bisa menyalin kode HTML dibawah ini kemudian kamu bisa menempelkannya diatas kode </body>

<div id='rahPreloader'>
<div class='rahCnt'>
<span class='rahLicensi' id='mscontent'/>
  <div class='rahLoader'>
    <div class='rahMoving-dot'></div>
    <div class='rahMoving-dot'></div>
    <div class='rahMoving-dot'></div>
    <div class='rahMoving-dot'></div>
    <div class='rahMoving-dot'></div>
  </div>
</div>
</div>

Info: Untuk fungsi kode HTML diatas adalah untuk menampilkan kode CSS tersebut

Kode Javascript

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode javascript dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript">
  </script>
<script type="text/javascript">
   /*<![CDATA[*/
$(window).bind("load", function () {jQuery(".rahCnt").fadeOut("slow");jQuery("#rahPreloader").delay(0).fadeOut();});$(document).ready(function(){$('#mscontent').attr('style','display: inline-block !important;visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 12px!important; color: #fefefe!important').html('Created with <i style="color:#f80000;-webkit-animation: icloudiceRing 5s 0s ease-in-out infinite; -webkit-transform-origin: 50% 4px; -moz-animation: icloudiceRing 6s 0s ease-in-out infinite; -moz-transform-origin: 50% 4px; animation: icloudiceRing 6s 0s ease-in-out infinite; transform-origin: 50% 4px;" class="fa fa-heart"></i> by <a href="https://icloudice.com" style="visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 12px!important; color: #161617!important;font-weight: 500!important;">Icloudice</a>');setInterval(function(){if(!$('#mscontent:visible').length)window.location.href='https://icloudice.com'},3000)}); /*]]>*/</script>

Info: Fungsi dari kode javascript diatas adalah untuk membuat kestabilan pada Preloader nya

Contoh Tampilan

Baiklah admin akan memberikan contoh demo dari Preloader nya, jika kamu ingin melihatnya kamu bisa merefresh halaman ini okay

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.