Cara Membuat Animasi Loading Pada Blog 2013

Mungkin sobat blogger sudah pernah dengar,bahkan sudah pernah memasang atau memang sudah pernah posting tentang sebuah animasi pada sebuah...


Cara Membuat Animasi Loading Pada Blog 2013Mungkin sobat blogger sudah pernah dengar,bahkan sudah pernah memasang atau memang sudah pernah posting tentang sebuah animasi pada sebuah blog,yaitu animasi loading yang jika kita membuka artikel satu ke yang lainnya,animasi itu baru akan berfungsi.Seperti yang kita tahu bahwa animasi ini Berbeda dengan Save Mode atau screen saver pada blog yang memang hanya sebuah aksesoris saja,sedangkan untuk animasi loading benar-benar bekerja sesuai lama atau cepatnya loading pada sebuah blog tersebut,Sekedar informasi bahwa animasi loading ini saya gunakan punya Hack4rt karena warna animasi nya bisa di rubah-rubah warnanya sesuai sengan selera kita masing-masing,dan untuk kode yang lainnya saya gunakan milik om-dayz.Nah untuk cara pembuatannya sendiri adalah dengan cara edit template blog sobat dengan cara :
  • Pertama Login ke akun blog sobat.
  • Klik rancangan --> Edit HTML --> Centang kotak expand template widget (jangan lupa backup template dahulu)
  • Kemudian Tambahkan KODE CSS Animasi Loading Blog di bawah ini tepat diatas ]]></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 Tambahkan JQuery ini diatas </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template sobat)

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

  • Langkah terakhir, pasang Script dibawah ini diatas tag </body>


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

Penyesuaian Warna untuk CSS

Tambahan dari saya, untuk yang ingin menyesuaikan warna loading nya dengan warna lain, karena saya memakai kode #00a3ff pada loading halaman. Jika ingin mengganti warna nya, lihat kode CSS loading halaman yang paling atas tadi dan ganti kode warna yang ditulis dengan warna birumuda dengan kode warna yang diinginkan,misalnya warna merah,hijau,kuning dan lain-lain.Untuk cari kode warnanya silahkan klik DISINI.

Oke,,,mungkin itu saja dari saya tentang cara membuat animasi loading pada blog 3013,semoga apa yang sudah saya berikan ini bisa bermanfaat untuk kita semua.

COMMENTS

BLOGGER: 14
Loading...

Ads 970x90

Nama

allianz,1,andro textile,1,android,6,asmara,1,asuransi,1,award,3,berita,45,bisnis,4,cap kaki tiga,1,commonwealth,2,daftar isi,5,decoder,1,download,15,efek blog,5,elektronik,2,entertainment,3,facebook,18,family,3,flora dan fauna,7,gadet,1,galuh,8,google,17,google adsense,2,google plus,24,hiburan,28,HostingPangeran,1,hotel murah,1,ICAN Education,1,iddetik.com,1,iklan,1,jadwal timnas,1,jasa,1,keindahan alam,2,keluarga,1,kesehatan,1,klasemen,6,komputer,2,kontes,22,kuliner,3,lain-lain,52,Margahayuland 42 tahun membangun,1,maruyungsari,9,olahraga,35,otomotif,9,paket wisata,1,pengalaman,2,persib,2,profil,2,puisi,2,religi,25,review produk,2,sambut brazil,2,seluler,2,software,1,superwash,1,tutorial dan trik blog,74,twitter,4,video,3,widget,1,wisata,5,youtube,11,
ltr
item
BLOG MASHARI: Cara Membuat Animasi Loading Pada Blog 2013
Cara Membuat Animasi Loading Pada Blog 2013
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7YjPuwWQrxb_3nvJS6b6l_m4cS1vJWOyu2ys7Uw8XggQQ1kLpCe-901m7hW3pLMtBvw-Uc-zTlK0xWg5UljB7lRCd9FEt8OUmaerBS0JxZNNGywRDPF5FwUt___hbK0b_mncncJbYLU/s1600/loading1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7YjPuwWQrxb_3nvJS6b6l_m4cS1vJWOyu2ys7Uw8XggQQ1kLpCe-901m7hW3pLMtBvw-Uc-zTlK0xWg5UljB7lRCd9FEt8OUmaerBS0JxZNNGywRDPF5FwUt___hbK0b_mncncJbYLU/s72-c/loading1.png
BLOG MASHARI
https://harysukasuka.blogspot.com/2013/03/cara-membuat-animasi-loading-pada-blog.html
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/2013/03/cara-membuat-animasi-loading-pada-blog.html
true
1510860441598238899
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy