Saturday, May 18, 2013

Cara Memasang Animasi Loading Pada Blog

Cara Memasang Animasi Loading Pada Blog
Cara Memasang Animasi Loading Pada Blog | Setelah kemarin Revans Blog share Game House Full Version, pada kesempatan kali ini Revans Blog akan mencoba share kembali tutorial blog menarik, yaitu Cara Membuat Animasi Loading Pada Blog yang bisa langsung Sobat lihat pada Blog ini. Sebelumnya tutorial ini pernah Revans share beberapa waktu yang lalu di RUKI ZONE. Nah, bagi Sobat Revans yang berminat untuk memasang animasi pada loading blognya, silahkan membaca postingan ini sampai selesai.


Berikut cara memasang animasi loading blog tersebut.
  1. Login ke akun blog sobat masing-masing.
  2. Lalu masuk ke menu "Tata Letak". Jangan lupa untuk menceklis "Expand..."
  3. Setelah itu copykan kode CSS animasi loading bog di bawah ini di atas kode ]]></b:skin>.
  4. Lalu copykan script JQuery dibawah ini tepat di atas kode </head>. Ini hanya jika pada template sobat belum ada script JQuery.
  5. Dan terakhir copykan script animasi loading blog di bawah ini tepat di atas kode </body>.
Kode CSS animasi loading blog.

#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); }}
Kode script JQuery animasi loading blog.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Kode script animasi 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>
Demikianlah Cara Memasang Animasi Loading Blog kali ini. Untuk penyesuaian warna silahkan sobat kreasikan sendiri ya. Selamat berkreasi dan semoga bisa bermanfaat.

Artikel Terkait

4 komentar

bisa di coba nih gan ..
thanks ya ats info nya
lanjutkan karya mu gan

Silahkan Sobat., Semoga bermanfaat., :)

kunjungan pertama.. :D salam gan..

terima kasih banyak atas kunjungannya gan., Di tunggu kunjungan berikutnya., :D

- Dilarang SPAM

- Dilarang Pasang Link Aktif

- Harus Sopan.
EmoticonEmoticon