Home » » CARA PASANG ANIMASI LOADING KEREN

CARA PASANG ANIMASI LOADING KEREN

Untuk Kalii ini baim akan share dengan sobat tentang : Cara Pasang ANimasi Loading Keren   nah sobat sekarang nih. baim punya satu animasi yang keren untuk blog sobat. silahkan cek sobat kalo sobat mau silahkan lanjutkn tapi jika sobat tidak suka silahkan cari artikel yang lain di blog kami masih banyak kok artikel terbaru Dan Ter - Update hehehe.. ..
Haduuhh,, Punya Teteh Perhatian nya minta ampun. Cuma Posting aja di beliin Makanan. Jadi tambah semangat deh posting nya hehehe... ialahh.. makan dulu ahh nanti lanjutkan >>

Lanjut sobat, KAlo pada postingan kemaren baim sudah share dengan sobat tentang : Cara Pasang Related Artikel Terkait Di Bawah Postingan Blog Nah sobat sudah belum pasang artikel terkait di bawah postingan sobat , kalo belum silahkan baca dan pasang Java/Scrip nya di blog sobat hehe.. Kalo sobat mau pasang Silahkan Mangga ATuh nu Kasep Klik di  : [  sini  ]

Nah sekarang Kita Lanjutkan>>
  • Seperti biasa sob. silahkan Masuk ke Blogger
  • Lalu sobat Pilih Template
  • Lalu sobat Pilih Edit HTML jangan lupa Centang Pada Expand nya
  • kalo sudah silahkan Sobat Cari COde Berikut Di Template : ]]></b:skin> 
  • kalo sudah silahkan sobat Copy/Paste Code Berikut Tepat di atas nya COde : ]]></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 #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); }}
  • Kemudian SObat cari Code Sepeeerti ini :  </head>
  • kalo sudah ketemu silahkan sobat Copy/Paste code berikut tepat di Atas code : </head>

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

  • Langkah Terakhir sobat nih. 
  • SObat crai code seperti code berikut : </body>
  • Nah kalo sudah ketemu silahkan sobat copy/paste code berikut tepat di atas 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^=&#39;&quot;+siteURL+&quot;&#39;], 
a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], 
a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama 
jika link internal diset dengan target=&#39;_blank&#39;

    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();

    });
});

</script>

  • Selesaii.. Silahkan Save Template sobat. Lalu lihat Hasil nya.
  • semoga berhasil sobat.. selamat berkreasi. salam blogger.!



0 comments:

Post a Comment

 
Lihat : Tentang Blog | Jgn asal copas | Pisi Misi
Copyright ©2012-2015. SHIQUERS.COM - All Rights Reserved
Created By Baim Ahmad
Kebijakan Pripacy Policy