Xivanki Share !!: Cara Membuat Animasi Loading Blog

Cara Membuat Animasi Loading Blog - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Animasi Loading Blog !! Semoga tulisan dengan kategori Tips Blogging dan internet !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Animasi Loading Blog ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Cara Membuat Animasi Loading Blog - Animasi loading blog ini bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat. Kalau loading blog sobat lagi cepat, mungkin tidak masalah bagi pengunjung, tapi kalau lagi lambat, pengunjung pasti akan bosan melihat tampilan putih dan beberapa gambar yang belum sempurna terload, alhasil pengunjung bisa kabur ke blog yang lain. Dengan menggunakan efek ini, pengunjung blog sobat akan sedikit terhibur ketika menunggu loading blog sobat, karena loading blog sobat memiliki efek animasi yang cukup unik.

Bagaimana cara membuatnya ? Ikuti langkah-langkah berikut :

Tambahkan KODE CSS Animasi Loading Blog ini diatas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Kemudian Tambahkan JQuery ini diatas </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template sobat )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Langkah terakhir, pasang Script dibawah ini diatas tag </body>
 

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.click(function() {
        $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>

Script by : hompimpaalaihumgambreng.blogspot.com