Loading Keren Untuk Blog



DEMO
Assalamualaikum Wr. Wb Script animasi Loading  menyeleksi semua link internal yang akan diberikan animasi loading, dan tentunya anda dapat memodifikasi lagi Script tersebut sesuai keinginan anda... :)

MEMASANG ANIMASI LOADING KE BLOGGER

  • Masuk ke blogger.com agan tentunya.
  • Lalu click template >> EDIT HTML.


  • Cari kode ]]></b:skin> (untuk memudahkan pencarian CTRL+F) Tambahkan KODE CSS Animasi Loading Blog di bawah ini tepat diatas kode ]]></b:skin>
Kode CSS :

#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 kode </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template anda)

Jquery 1.7.2 :


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

Script loading blog :



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


Sekian dari saya tentang Loading Keren Untuk Blog selamat mengoprek, semoga bermanfaat dan Wassalamualaikum Wr. Wb




Artikel Terkait

39 komentar :

  1. Sip, makasih infonya walaupun bingung :p

    BalasHapus
    Balasan
    1. hihi.. kalo boleh tau bingungnya di mana gan ??

      Hapus
  2. Lanjutkan gan, terus berkarya B) :Q

    BalasHapus
  3. Belum pernah dicoba ni... Spertinya lebih menarik lagi jika dipasang diblog animasi lodingnya...

    BalasHapus
    Balasan
    1. Silahkan di coba gan, ini efeknya ringan kok. :)

      Hapus
  4. wah, sayang gak suka kebanyakan loading.. tp keren gan..

    BalasHapus
  5. Wah Mantap gan ane coba Dulu gan

    BalasHapus
  6. Wah keren sekali, jadi memberatkan tidak tirknya Gan?

    BalasHapus
  7. Top markotop, Gan! Layak untuk dipraktekkan.

    BalasHapus
  8. Keren nih kayaknya ijin coba dulu gan :)

    BalasHapus
  9. keren nih tutorialnya, :D
    tp sayang blog ane uda berat loadingnya, jd takut tambah lemot kalau di pasang loading keren iini, :)

    BalasHapus

Pengikut


notifikasi
close