Membuat Efek Loading Di Blogger

Langkah 1 : Tambahkan jQuery pada blog sobat. Simpan kode di bawah ini sebelum </head> dan Apabila template sobat sudah memiliki jQuery seperti dibawah ini, lewati saja langkah pertama ini. karena tidak boleh ada script jQuery lebih dari satu.

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

Langkah 2 : Tambahkan CSS. Simpan CSS ini di atas ]]></b:skin>

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix7SJHNTxJLRtruNJWbhE9kCe2QcYYRJdzhE1yNq3KOA2xzpIoDdBKSBA1-kC1cm06PrmhNqlfnOch4x1_wJtg5Ys3rx_U0a4HudToMnbp0y0FE4HIrjPDkVXxVMmnBZp1y823sxJmIyk/s200/load6.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

Langkah 3 : Tambahkan JavaScript. Tambahkan kode JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Kode berwarna biru diatas adalah gambar animasi yang akan ditampilkan waktu loading, sobat dapat menggantinnya dengan gambar sobat atau pilih beberapa gambar animasi efek loading blog dibawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOrV-qA84NUTEYdm3ci0CBMfQI6qWC3z9qjVSw6O34Pdtkn-zsjsdgsfNswJQA7U-bc6iGyqgUpC97rNmV2DLUFC7JnDcBFdVkkB_6PhcPVwC5OhQPjN7bOaCwMb1RvbuQulrEz3E-Nc8/s1600/loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOF0obDlbmBqkD742NVsZDkA22HMir9I3WoSoiBKGB8tu-D_mKaBrOtOlu73AgsxWjj9vbGdkdHbJ_wMS0fG0m7AFmA3wTxlnSv8i7mFIfrJHhjPwlLGkYlbwLShfK8bpU5_yK1t46hzV/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJlbMeOOta0ydvkz_FWu78qSp4lL8XOmE1YOMnufttR4XQJtPXJ74H69VKkYtUXDXcWPd_wzDbOCVyRup-i7nWu9NW2pFyl1Q_o_4cHxGe4c93n9v6FCF1a0p07yHKE771mUeGiJvT7CZO/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRK0QFHuRYsmm5T2ZHrDDGuv7y9hKZDgKE4WTdKGBLSXMMDKTw47u8j-FonXrBMK6Vw3rLOE-NER9njwpk1ISxG3j0F92oAmQ4QDAkxhYDzB0PDxOQ5ekjzZR_pxnZSFUsZ3jRoakjpsy5/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd4ZtR__K8d0ZKDMbLkJO-Gj5mxn8M04k0rhW6RoNlX3hbpbrk0COX_OLPiknecSk-RYQZdWbIpl4ULPeA7OFPUJcR2F6Mem9ekxs0jzWufwfT0UxMMMurCpyQsUkENrBZLRSpBdoCvGtm/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKP8jHhE72TBaF5NlErDXAXypaCfTycxSOXwi6FdazK7g3qTF4KsnDvomHlIYKbiqDrHriivcswfWCzDFzQAQ7XB4Xj7j_bSBu97W7iv0rXkz78q2DBeLWlcSlJ4xxkaZIf0zHh2MILsFz/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtgzjQO1GdVC82QMw0svkQ95AGpdpWADTv1h8WPE-yg8bOzVVSK3ACug-_zoyisJgOeUUqxjQFMq2T5NTnzycW82KFSEwl8sR9othuKeaFaf-tjavLvj3QucyiYqiHn9XFWNVFrXi8ghdw/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ9MNWrpq3cVlPXs937c-plOJSS3cEMgLt84eua3j3IR6fAOffhyphenhyphenNH1Zq5odKmnh8V1Zo7x9suGAb_DEdB75q_Rxj7y1OHK88labPq0eyXUbK93TfdhGoNn-WP_8bKE77qCrfIuFd4thNS/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8u5awjXxK_-sx5XAGOv8y7IJtQjYnY6tP-g2I4d0gtS2HPsPjnHKPBfQtOYcCnQjTWw0EVCBYyCSBMrW7hPBLyF4xV2-opQ7vO870HHybnPwIzLDtugn15YHkvhSj3KS4YCP-L3E9NnOo/s1600/loading9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIaouj08yoospGSU6rZv61Cjr87JSPnyvosRU9qVq8T-ePV345cKFUGo9oIs-WkjVTynShSe37STiGODH5t4gDnmEhrPcnwNx8TngcFeRhAg2VvlxuW40WSMpiUfyGzKPw7a5X_kFNsTai/s1600/loading10.gif

Selain kode diatas ada juga kode loading halaman seperti yang saya gunakan ditemplate sebelumnya. kodenya adalah seperti dibawah ini, dan cara meletakannya adalah sama seperti diatas.

#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 #00a3ff; border-right:5px solid transparent; border-left:5px solid transparent; border-radius:50px; box-shadow:0 0 35px #00a3ff; 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 #00a3ff; border-left:5px solid transparent; border-right:5px solid transparent; border-radius:50px; box-shadow:0 0 15px #00a3ff; 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#00a3ff}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#00a3ff}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)}}

Dan langkah selanjutnya tambahkan kode berikut ini diatas kode </body>

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });
    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();
    });
});
</script>

Sumber: Here