Cara Membuat Loading Blog Keren



Cara Membuat Loading Blog Keren - Banyak berbagai tips and trick serta tutorial-tutorial yang terdapat diblog. baik berupa widget maupun HTML atau Java Script yang akan digunakan.

Pada Tutorial kali ini saya akan membagikan
Cara Membuat Loading Blog Keren, mungkin efek ini bisa bermanfaat untuk blog anda dan untuk mempercantik tampilan blog anda. caranya cukup mudah kok, silahkan simak cara-caranya dibawah ini.

 Langkah-langkahnya sebagai berikut :

A. Loading Berwarna Merah

1. Login ke akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan »  Klik  Expand Template Widget
3. Tambahkan kode CSS berikut ini 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 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); }}
4. Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
5. Dan langkah yang terakhir, pasang kode berikut 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>

B. Loading Blog Berwarna Biru

Caranya masih sama seperti yang diatas, anda cuma ganti aja dengan script yang ada dibawah ini.

- HTML
<div class="ball"></div>
<div class="ball1"></div>
- CSS
.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
Demo 1 Dengan Animasi Berwarna Merah : 
Demo 2 Dengan Animasi Berwarna Biru : 


Demikian tutorial singkat yang dapat saya sajikan pada kali ini. jangan lupa dishare dengan mengklik tombol dibawah ini, semoga bermanfaat :)

Berlangganan update artikel terbaru via email:

16 Responses to "Cara Membuat Loading Blog Keren"

  1. waaah keren nih... coba dipasang ah... kira2 bikin lemot gak yah mas... terima kasih....

    ReplyDelete
  2. wah kayaknya keren nih buat menghias blog, tapi loading blognya jadi berat gak ya ?

    ReplyDelete
  3. mantap ni buat nambah keren blog ane :D

    ReplyDelete
  4. Keren gan tutorialnya, tp perlu dipertimbangkan lagi.. Takutnya blog jadi berat dan loadingnya lama..

    ReplyDelete
  5. Keren sih, mau coba tapi takut load blog nambah makin berat.. :(

    ReplyDelete
  6. info menarik nie gan boleh di coba nie

    ReplyDelete
  7. makasih ilmunya gan... tp bikin lemot ga nch

    ReplyDelete
  8. jadi Berat Ga Mas kalau di pasang loading blog

    ReplyDelete
  9. izin pasang iya , tanks telah berbagi

    ReplyDelete
  10. mantap gan artikelnya,, sangat membantu buat say yg baru belajar ngeblog.

    ReplyDelete
  11. Mantap bang, boleh di coba nih, oiya ngomong2 berat engga ya

    ReplyDelete
  12. keren banget gan. izin praktek yaah

    ReplyDelete
  13. wah keren lumayan buat mempercantik blog saya gan (y) kira kira bikin lemot gk ya ?

    ReplyDelete

PERATURAN BERKOMENTAR :
✔ Relevan
✔ Sopan
✖ Link Aktif
✖ Spam
✖ Diluar Topik / OOT !

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel