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 :)
Previous
Next Post »

16 komentar

Klik Disini Untuk komentar
3 January 2016 at 13:54 ×

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

Reply
avatar
didik aryana
admin
3 January 2016 at 14:20 ×

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

Reply
avatar
Dafi
admin
3 January 2016 at 14:29 ×

mantap ni buat nambah keren blog ane :D

Reply
avatar
3 January 2016 at 15:14 ×

mantap Di Coba gan...
Mampir yuk!

Reply
avatar
Penyu Tekno
admin
3 January 2016 at 15:20 ×

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

Reply
avatar
Satria
admin
3 January 2016 at 17:19 ×

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

Reply
avatar
Deva Andesta
admin
3 January 2016 at 17:51 ×

info menarik nie gan boleh di coba nie

Reply
avatar
9 January 2016 at 13:43 ×

Bikin berat blog gak gan?

Reply
avatar
mypost
admin
9 January 2016 at 14:12 ×

makasih ilmunya gan... tp bikin lemot ga nch

Reply
avatar
admin Info
admin
9 January 2016 at 14:15 ×

jadi Berat Ga Mas kalau di pasang loading blog

Reply
avatar
9 January 2016 at 17:46 ×

izin pasang iya , tanks telah berbagi

Reply
avatar
11 January 2016 at 17:29 ×

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

Reply
avatar
tri juhari
admin
11 January 2016 at 18:01 ×

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

Reply
avatar
11 January 2016 at 18:21 ×

keren banget gan. izin praktek yaah

Reply
avatar
11 January 2016 at 19:00 ×

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

Reply
avatar

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