Wednesday, October 25, 2017

Cara Memasang Animasi Loading Blog Pada Sebuah Blog


Cara Memasang Animasi Loading Blog Pada Sebuah Blog - Selamat siang semuanya. Pada siang hari ini saya akan share sebuah Tutorial Blog mengenai Cara Memasang Animasi Loading Blog Pada Sebuah Blog. Tutorial ini sebenarnya sudah pernah saya post beberapa tahun yang lalu di salah satu blog komunitas kami dulu.

Berhubung blog tersebut sudah tidak ada lagi dan kode-kode penyusun animasi loading blog tersebut masih bisa dipakai maka saya berinisiatif untuk memposting kembali disini karena mungkin masih ada diantara sobat blogger semua yang masih belum mengetahuinya.

Ini saja saya dapat setelah saya membongkar isi hardisk lama saya di rumah. Jadi daripada ikut dibersihkan saya pikir lebih baik dipost ulang dengan harapan bisa bermanfaat untuk kita semua.

Berikut Cara Memasang Animasi Loading Blog Pada Sebuah Blog tersebut.

Copykan kode CSS animasi loading bog di bawah ini di atas kode ]]></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); }}
Lalu copykan script JQuery dibawah ini tepat di atas kode </head>. Ini hanya jika pada template sobat belum ada script JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Terakhir copykan script animasi loading blog di bawah ini tepat di atas kode </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>
Setelah semuanya ditambahkan pada template blog jangan lupa untuk menyimpan hasil editing template tersebut. Sekarang saatnya untuk melihat hasil editing tersebut. Selamat mencoba dan bereksperimen.

 

Artikel Terkait

Blog ini dibuat atas ketertarikan dan minat kami dengan Dunia IT khususnya masalah software, game dan sebagainya. Blog ini juga sebagai media sosial untuk berbagi Info Menarik serta Hiburan lainnya agar lebih bermanfaat.

- Dilarang SPAM

- Dilarang Pasang Link Aktif

- Harus Sopan.
EmoticonEmoticon