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

Cara membuat preloader menggunakan efek animasi CSS diblogger

Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar teknologi dan dunia blogging untuk anda yakni dalam membahas bagaimana caranya membuat sebuah preloader diblog menggunakan efek animasi CSS di blogger

Info: Okay Baikah tanpa berlama lama lagi admin bakalan memberikan informasi untuk anda, jika terlalu banyak basa basi nanti sakit hati terus bilang mantap mantap lagi, bilang aja sakit hati 😂 artikelnya kepanjangan bet(padahal lengkap), dan belum tahu bahwa ngeblog itu harus pakai basa basi dulu hehehe biar blognya lebih mendidik dan bukan berisi bacotan doang bener

Jangan salah paham bukan mantap mantap seperti difilm yak hehehe 😁, entar di-block lagi Ama googlenya, sakit hati boleh tapi jangan lampiaskan ke mantap mantap yak kecuali udah muhrim

Preloading

Okay lanjut Preloader atau Preloading diblog merupakan suatu tampilan yang sengaja ditampilkan oleh pengelola blog untuk mempercantik tampilan blog serta membuat blog semakin menarik tentunya, dan dengan menggunakan Preloader pengunjung tidak akan mudah bosan iya kan

Fungsi Preloader

Sebelumnya juga admin sudah membahas mengenai loading page menggunakan efek animasi CSS diblogger sama halnya dengan Preloader atau Preloading ini, fungsi yang sebenarnya adalah untuk membuat suatu tampilan lainnya pada blog dan sebelum blog tersebut memuat data secara keseluruhan maka Preloader atau Preloading ini bakalan ditampilkan

Cara Pembuatan

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

Kode CSS

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

.rahloader-overlay{width:100%;height:100%;background:#fefefe;position:fixed;bottom:0px;left:0px;right:0px;top:0px;z-index: 9999;}
.rahloader{height:50px;left:50%;margin: -25px 0 0 -76px;position: absolute;top: 50%;width: 150px;}
.rahloader .bar{background-color:#f80000;font-size: 0;height: 8px;border-radius:3px;opacity:0;width:25px;-webkit-animation-duration: 2s;-webkit-animation-fill-mode: both;-webkit-animation-iteration-count: infinite;-webkit-animation-name: subtleIn;-webkit-animation-timing-function: ease-in-out;display: inline-block;}
.rahloader .bar:nth-child(1) {-webkit-animation-delay: 0s;}
.rahloader .bar:nth-child(2) {background-color: #f80000;-webkit-animation-delay: .3s;}
.rahloader.bar:nth-child(3) {background-color: #f80000;-webkit-animation-delay: .6s;}
.rahloader .bar:nth-child(4){background-color: #f80000;-webkit-animation-delay: .9s;}
.rahloader .bar:nth-child(5) {background-color: #f80000;-webkit-animation-delay: 1.2s;}
@-webkit-keyframes subtleIn {0% {opacity: 0;-webkit-transform:translateY(300%);transform: translateY(300%);}30% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}}

Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS diatas

Kode HTML

Nah langkah selanjutnya adalah kamu bisa menyalin lagi nih kode HTML dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>

<div class='rahloader-overlay'>
<div class='rahlicensi' id='mscontent'/>
<div class='rahloader'>
<div class='bar'/>
<div class='bar'/>
<div class='bar'/>
<div class='bar'/>
<div class='bar'/>
</div>
</div>

Info: Fungsi dari kode HTML diatas adalah untuk menampilkan preloadingnya

Kode Javascript

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

<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(".rahloader").fadeOut("slow");jQuery("#rahloader-overlay").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: #161617!important').html('Created with <i style="color:red;-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 menyetabilkan performa dari Preloader nya

Contoh Tampilan

Sedangkan untuk contoh tampilannya kamu bisa melihatnya dengan merefresh halaman blog ini agar kamu mengetahuinya

Perhatian: Preloader ini sangat stabil Apabila kamu menerapkannya didalam template blog kamu langsung oke, mohon maaf Apabila pada saat kamu merefresh halaman ini preloader nya tidak bisa berfungsi secara baik 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.