Cara Membuat Animasi Loading Blog


Membuat Animasi Loading Blog
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>
Untuk demo Animasi Loading Blog, saya tidak menyertakannya, anda bisa melihat langsung di blog ini, selamat mengoprek :))

sumber  : http://om-dayz.blogspot.com

14   komentar

ini berat tidak sob..
menurut saya si tidak berat coba az cek sndiri blog ini menggunakan animasi loading blog
Delete
Reply Delete
uda gw coa kok gak muncul ya gan??

minta sarannya :)
mungkin ada salah x gan, silahkan di coba lagi
Delete
Reply Delete
Anonim mengatakan... 11 Maret 2013 pukul 03.02
bang saya nanya membuat kotak komentar blog kaya di blog ini gmna yahh kasih tipsnya
Silahkan Kunjungin http://tutorialbelajarblogger.blogspot.com/2013/03/cara-membuat-kotak-komentar-blog.html
Delete
Reply Delete
@abrian mungkin ada yang salah x gan

@aguz oke bisa di liat pada postingan selanjutnya
Reply Delete
mantap dah.. Saya Suka Artikel Anda
Reply Delete
terima kasih sudah berkomentar...
Reply Delete
nggak bisa.
cuma di blog tertentu aja yg bisa

contoh blog saya
Reply Delete
gan nyari ']]>' gak ada
mhon ptnjuknya
maklum masih newbie
maaf ngreptin
trimasih
Reply Delete
Terima Kasih YA gan Keren Postingan Nya KwkwkWKkwkkwkwkwwwkwkwk


mompong



my blog:banyakcarauntukkomputer.blogspot.com
Reply Delete
Thx mas bermanfaat

Mampir donk gan di :

dickyinfo.blogspot.com
Reply Delete
gan kok lodingnya cepet cara agak lamain gimana
Reply Delete

Posting Komentar

Cancel Reply