Membuat Efek Loading Pada Blog Warna Merah

temen saya ada yang tanya "wah blog kamu laodingnya gile keren sob. boleh ga saya minta scriptnya?" saya jawab aja di mbah google saya dikasih sob, jalan-jalan aja ke mbah sana :) tapi dia bilang kebanyakan di mbah google gue pusing jadinya, ayolah sob!" ya sudah nanti postingkan di blog saya oke, pantengin terus deh bolg saya oke sob.

nah karena itulah ilmu dan informasi jangan di pendem-pendem karena ga bakal berkah nah sekarang saya akan memberikan script beserta caranya. oya ini efek loading warna merah dan nanti selanjutnya saya akan postingkan yang warna birunya. jangan tanya penampakannya sudah banyak ko yang gunakan efek loading ini. langsung saja ke tkp :)

CSS3 Loading Animation Loop

Cara Memasangnya :

1. Buka Dashboard > Template > Edit HTML
2. Cari kode ]]></b:skin>. [Cara cepat CTRL+F : Untuk mencari] dan tambahkan script berikut diatas kode ]]></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); }}

Inget!! Sebelum di save di pratinjau template dahulu untuk tidak mengurasi resiko gagal dan rusak kedepannya. jika di pratinjau sudah lanacar maka tinggal save saja. gampang bukan semoga kalian suka dengan artikel ini :)