KrishnaVandanu

efek animasi loading halaman dengan css3 pada blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="post-header"> </div> <div dir="ltr" style="text-align: left;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK2sUzXSs9jp19KrTDNCOGdHgn5iEHPz-JfQdZD-fIXL2reEWunshTmkY29Qwo-sDDNLwUWykTB8v6JSyjEJLeuPG858h9CTYNjTL19CGklGdXoeI8VtLM146Os-cpppgQfQH4NCWGLLA/s1600/animasi+loading+halaman+blogger.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK2sUzXSs9jp19KrTDNCOGdHgn5iEHPz-JfQdZD-fIXL2reEWunshTmkY29Qwo-sDDNLwUWykTB8v6JSyjEJLeuPG858h9CTYNjTL19CGklGdXoeI8VtLM146Os-cpppgQfQH4NCWGLLA/s400/animasi+loading+halaman+blogger.png" width="400" /></a></div> <div style="text-align: center;"> </div>  efek loading ini hanya dibuat dengan <a class="zem_slink" href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" rel="wikipedia" title="Cascading Style Sheets">CSS</a>, untuk menambahkan efek menarik ini di blog anda, silahkan ikuti langkah-langkah berikut: 1. Untuk menampilkan efek load diatas pada halaman Anda, letakkan kode berikut sebelum tag <code>]]></b:skin></code> dalam template blog anda <pre><code class="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); }}</code></pre> 2. Masukkan kode di bawah ini sebelum kode tag <code></body></code> <pre><code class="xml"><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></code></pre> demikian semoga berguna dan bisa membuat blog anda lebih menarik....</div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=18d007e9-435b-4d21-a6a4-0b9c8507938e" style="border: none; float: right;" /></div> </div>

efek animasi loading halaman dengan css3 pada blogger

efek loading ini hanya dibuat dengan CSS, untuk menambahkan efek menarik ini di blog anda, silahkan ikuti langkah-langkah berikut:1. Untuk menampilkan efek load diatas pada halaman Anda, letakkan kod…

03 Nov 2013