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

Subscribe to receive free email updates:

20 Responses to "Cara Membuat Loading Blog Keren Dengan Css"

  1. iihhh.. lucu juga ya.. tpi blogku yang satunya udah berat, tambah gituan makin kenceng beratnya .

    ReplyDelete
  2. klo loadingnya dengan garis" gimana sob,saya dulu pernah liat di blognya orang pas lg BW,
    thanks

    ReplyDelete
    Replies
    1. garis garis yang gimana sob? contohnya?

      Delete
  3. gk bikin merayap nih sob?,,,,selamat siang sobat

    ReplyDelete
  4. terimakasih untuk infonya gan, mantappp..

    ReplyDelete
  5. wahh animasinya ijo,

    blog ini bgd, wkwk..

    ReplyDelete
  6. wah kayaknya lumayan kren sob

    mantap manatp

    ReplyDelete