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

Membuat loading animasi preloader di blogger

Hello sobat IcloudZer bagaimana dengan kabarmu hari ini, apakah selalu dalam kondisi yang baik, mudah mudahan sobat IcloudZer selalu dalam kondisi yang baik dalam situasi apapun, okay lah kali ini saya akan membahas cara membuat Animasi preloader keren pada blog, sebelum ketahap pemasangan scrip kode pada blog anda, saya akan menjelaskan sedikit apa itu Animasi preloader blog

Info: Seperti biasa jika kamu audah pemasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Loading Animasi

Animasi preloader pada blog sebenarnya apabila di terapkan disebuah situs blog maka ketika anda masuk atau mereload situs blog tersebut anda akan melihat tampilan animasi preloader sebelum server memuat data secara keseluruhan

Info: Dengan kata lain sambil anda menunggu situs blog anda memuat data server anda akan disajikan dengan sebuah animasi preloader yang bermacam macam

Animasi preloader juga bisa diterapkan pada bagian artikel gambar, atau juga pada seluruh tampilan situs blog

Tapi kali ini saya akan memberikan cara membuat Animasi preloader keren pada Blog untuk diseluruh tampilan situs blog, dan animasi preloader ini dibuat dengan menggunakan CSS, maka setiap orang yang mengakses situs blog anda mereka akan melihat Animasi preloader tersebut

Dengan memasang Animasi preloader pada situs blog anda juga bisa membuat perlambatan pada server, yang mengakibatkan orang yang mengakses situs blog anda yang mana sebelum diterapkannya Animasi preloader tersebut server atau tampilan blog anda sudah terlihat namun saat pemasangan nya tampilan yang detail yang seharusnya sudah bisa terlihat tapi tertup oleh Tampilan Preloader tersebut, karena pemasangnya pada seluruh tampilan situs blog

Tapi jika anda tertarik dan ingin mencoba pada situs blog anda, saya akan memberikan cara pemasangannya sebentar lagi

Pasang jQuery

Sebelum kita masuk ke pemasangan Animasi preloader di situs blog, periksa apakah situs blog anda telah terpasang sebuah script jQuery di bawah ini jika belum, pasang dulu Script jQuery dan letakkan di atas kode lt;/head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

Pemasangan Loading Animasi

Jika sudah, baiklah kita langsung ke pemasangan nya

  1. Mulai login ke akun blogger anda
  2. Pergi ke Template dan pilih edit HTML
  3. Letakkan kode CSS di bawah ini tepat di atas kode </head>
  4. <style type='text/css'>
    /* Preloader */
    #iclodicePreloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
    .IcloudiceSpinner{position:absolute;top:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}
    [class^="icloudiceBall-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
    @keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
    .icloudiceBall-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
    .icloudiceBall-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
    .icloudiceBall-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
    .icloudiceBall-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
    .icloudiceBall-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
    .icloudiceBall-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
    .icloudiceBall-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
    .icloudiceBall-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
    @media screen and (max-width:800px){.icloudiceSpinner{left:43%}}
    </style>
  5. Kemudian cari kode <body> dan letakkan script kode di bawah ini tepat di atasnya
  6. <div id='icloudicePreloader'>
    <div class='icloudiceSpinner'>
    <span class='icloudiceBall-1'></span>
    <span class='icloudiceBall-2'></span>
    <span class='icloudiceBall-3'></span>
    <span class='icloudiceBall-4'></span>
    <span class='icloudiceBall-5'></span>
    <span class='icloudiceBall-6'></span>
    <span class='icloudiceBall-7'></span>
    <span class='icloudiceBall-8'></span>
    </div>
    </div>
  7. Terakhir letakkan kode berikut tepat di atas kode </body>
<script type='text/javascript'> 
//<![CDATA[
// Preloader
$(window).load(function(){$(".icloudiceSpinner").fadeOut(),$("#icloudicePreloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Simpan template dan mulai jalankan situs blog anda,dan jika berhasil tampilannya akan seperti pada contoh demo loading animasi yang admin gunakan saat kamu merefresh tampilan ini

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.