Follow me on Twitter
Add me on Facebook
» » » » Membuat Animasi Loading Blog

Membuat Animasi Loading Blog

Diposting oleh Misba_al Label: Pada Jam 05.32
Membuat Animasi Loading BlogMembuat Animasi Loading Blog, Membuat Animasi Loading Blogspot - Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat, disini saya menggunakan script animasi loading dari DTE :] kemudian saya 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>
Untuk demo Animasi Loading Blog, saya tidak menyertakannya, anda bisa melihat langsung di blog ini, selamat mengoprek :)
Anda sedang membaca artikel tentang Membuat Animasi Loading Blog dan anda bisa menemukan artikel ini dengan url http://m-chanel.blogspot.com/2012/12/membuat-animasi-loading-blog.html. Jika anda ingin menyebarluaskan artikel ini mohon cantumkan link sumbernya! Terima kasih.

7 komentar:

  1. Misba_al28 Desember 2012 pukul 11.46

    Test :)

    BalasHapus
  2. Test Blogger2 Januari 2013 pukul 02.13

    bermanfaat :)

    BalasHapus
  3. Misba_al2 Januari 2013 pukul 04.10

    b-(

    BalasHapus
  4. Unknown4 April 2013 pukul 15.21

    Kalau ber-animasi sudah pasti lah memperlama loading blog. Yang saya penasaran, kalau pakai animasi loading blog, ngaruh gak ya ke SEO blog? :)

    BalasHapus
    Balasan
    1. Misba_al5 April 2013 pukul 01.33

      nah itu yang saya pertanyakan ke orang" sob ;-(

      Hapus

Catatan: (memasukan item pada komentar)
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di bawah komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Back to Top