Tutorial Cara Membuat Animasi Loading Blog Menarik

Kalian Bloggger? Coba salah satu tutorial ini,Pengunjung rata-rata ingin mengunjungi blog yang artikelnya NO COPAS,Serta blog yang menarik seperti Animasi loading blog ini.Animasi Loading Blog ini berfungsi di blog sobat , dimana saja , kapanpun saja.Setiap pengunjung mengunjungi suatu posting/artikel,maka animasi ini pun berfungsi,.Oke simak caranya berikut ini :

• Baca Basmallah :D
• Login Akun/Id Blogger sobat.
• Dashboard -> Template -> Edit HTML
• Cari Code ]]></b:skin>,Lalu copy-pastekan code dibawah ini tepat diatas code ]]></b:skin> 

 <style type="text/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 #00a3ff;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 35px #00a3ff;
    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 #00a3ff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 15px #00a3ff;
    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#00a3ff;
    }
    
    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#00a3ff;
    }
    
    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);
    };
    }
    </style>

• Lalu Cari CODE </body> dan copy-pastekan code dibawah ini tepat diatas code </body>

 div id='loadhalaman'>
    <div class='loadball'/>
    <div class='loadball-2'/>
    </div>
    <script type='text/javascript'>
    $(function () {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#039;&quot; + siteURL + &quot;&#039;], a[href^=&#039;/&#039;], a[href^=&#039;./&#039;], a[href^=&#039;../&#039;]&quot;);
    $internalLinks.click(function () {
    $(&#039;#loadhalaman&#039;).fadeIn(1500).delay(6000).fadeOut(1000);
    });
    $(&#039;#loadhalaman&#039;).click(function () {
    $(this).hide();
    });
    });
    </script>
</body>

•  Terakhir,Jika sudah selesai langkah diatas,Copy-Pastekan Code JQuery Berikut :

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

NOTE : JIKA DI TEMPLATE SOBAT SUDAH TERPASANG JQUERRY SEBELUMNYA,TIDAK PERLU DIPASANG LAGI.DAN LEWATI LANGKAH TERKAHIR.

Sumber : http://the-anarchyta.blogspot.com/2013/11/membuat-animasi-loading-di-blog.html

• Tweet
• Share
• Share
• Share
• Share