Tutorial Belajar Blogger - Membuat Animasi Loading Blogspot Cara Membuat Animasi Loading Blog - Download Ebook

Tutorial Belajar Blogger - Membuat Animasi Loading Blogspot - Tutorial Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat, disini saya repost dari tutorial dari om- dayz menggunakan script animasi loading dari DTE :] yang kemudian di padukan dengan CSS3 Loading Animation dari Alessio Atzeni.
Script animasi Loading DTE :] menyeleksi semua link internal yang akan diberikan animasi loading, dan tentunya anda dapat memodifikasi lagi Script tersebut sesuai keinginan anda.

CSS3 LOADING ANIMATION LOOP

MEMASANG ANIMASI LOADING KE BLOGSPOT

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 anda)

<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>

Materi lebih lengkap silahkan download

***********************************

Tombol Download. Prosedur khusus untuk pengguna facebook. Karena harus klik LIKE4 tombol ini >> untuk memulai. Link Hanya Untuk Kalangan Sendiri.

.

Berikut adalah tombol no.1 sampai 6 silahkan anda klik, Pada tab baru silahkan anda pencet Download/Play. Dan ikuti alurnya.

Tombol 1 Untuk memulai:

Tombol 2 Untuk memulai:

Tombol 3 Untuk memulai:

Tombol 4 Untuk memulai:

Tombol 5 Untuk memulai:

Tombol 6 Untuk memulai:

Sekian informasi yang bisa Cool August sampaikan semoga bermanfaat. Sebelum mengakhri postingan kali ini, saya ada pantun nih buat pembaca setia.

Hati gembira bersama teman
Bersuka ria di atas awan
Jikalau ada kesempatan
Pasti bertemu dihari kemudian

Terima Kasih atas kunjungannya ya kawan ^_^