Cara Membuat Loading Blog Keren Dengan Css

Jika saya pernah share tentang Cara membuat efek loading blog keren, maka saya sekarang akan mencoba share tentang cara membuat loading blog keren dengan css :) apakah sudah penasaran sobat dan tidak sabar? sabar dulu deh sob hehe mau makan dulu saya hihii..

Oke Ke TKP.

Seperti biasanya deh sob.

1. Login akun sobat

2. Menuju Template

3. Edit HTML

4. Centang expand template widget

5. Cari kode ]]></b:skin>

Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

#loadhalamanhermanbagus {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;}
.loadballhermanbagus {background-color: transparent;border: 5px solid #53cc1e;
border-right: 5px solid transparent;border-left: 5px solid transparent;
border-radius: 50px;box-shadow: 0 0 35px #53cc1e;
width: 50px;height: 50px;margin: 0 auto;-moz-animation: spinPulse 1s infinite ease-in-out;-webkit-animation: spinPulse 1s infinite linear;}

.loadball-2hermanbagus {background-color: transparent;border: 5px solid #53cc1e;
border-left: 5px solid transparent;border-right: 5px solid transparent;border-radius: 50px;box-shadow: 0 0 15px #53cc1e;
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 #53cc1e}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 #53cc1e} 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 Cari kode </head> Copy dan paste kode dibawah ini diatas kode </head>

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

Kemudian copy dan paste kode dibawah ini diatas tag </body>

<div id='loadhalamanhermanbagus'><div class='loadballhermanbagus'></div><div class='loadball-2hermanbagus'></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() {$('#loadhalamanhermanbagus').fadeIn(1500).delay(6000).fadeOut(1000);});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'

$('#loadhalamanhermanbagus').click(function() {
$(this).hide();});});
</script>

Dan simpan.

Tambahan kode warna #53cc1e bisa sobat ganti kode warna yang lain yang pas pada blog sobat.

Terinspirasi dari blog sobat http://harysukasuka.blogspot.com, karena saya suka maka saya posting disini daripada lupa :)