Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Membuat Animasi Loading Blog dengan CSS

Membuat Animasi Loading Blog dengan CSS - Assalamualaikum sobat :D Hari ini saya akan membahas bagaimana cara Membuat Animasi Loading Blog dengan CSS. Sebelumnya apakah sobat tau bagaimana Animasi Loading Blog ? Lihat animasi berikut :D


Blog Artikel Kecil ini juga telah saya pasangi animasi blog keren ini :D
Ingin Membuat Animasi Loading Blog dengan CSS seperti milik saya ? Check it out :D

1. Login Blogger.com
2. Masuk Template > Edit HTML > Centang Expand Template Widget
3. Masukkan kode CSS berikut dibawah 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); }}
4. Jika template sobat belum terpasangi script berikut, cari kode </head> dan masukkan kode script berikut
    diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> 
5. Kemudian pasang kode berikut dibawah kode </body>
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>

<script src='http://cicak-script.googlecode.com/files/animasiBlog.js' type='text/javascript'/>
6. Simpan dan lihat hasilnya :D

Bagaimana sobat ? keren bukan ? hehe
oke, sekian dulu tutorial dari saya :D
Wassalam ^^

Keyword -  Membuat Animasi Loading Blog dengan CSS

24 comments for "Membuat Animasi Loading Blog dengan CSS"

  1. Replies
    1. pengaruh loadingnya, mungkin nambah 2 detik doang :D

      Delete
  2. Keren juga nih sob Animasi Loading Blog dengan CSS nya..
    Nanti saya coba deh..
    Thanks ya..

    ReplyDelete
    Replies
    1. silahkan dicoba sob :D
      gak bakalan nyesel deh, kalo pasang animasi ini :D

      Delete
    2. oh ya sob ada yang belum di google kode ga scriptnya.kalau bisa request deh.tapi yang masih asli.

      Delete
    3. ada kok :D
      tapi cuman beberapa doang.
      yang sisanya abis saya uprak uprak semua :D

      Delete
    4. minta yah,kirim ke sini yah,zig.n.zoor@gmail.com.atau minta alamat pembuat awalnya sob.

      Delete
    5. oke sob :D
      cek email yak :D

      Delete
  3. mantap gan infonya

    =========================
    --> Komik Hentai <--

    Yang suka Komik HENTAI.. download aja langsung kesini.. UPDATE HARIAN

    http://small-manga.blogspot.com

    ReplyDelete
  4. mantap... o ia all.. jgn lupa mampir ok...

    ReplyDelete
  5. demonya mana gan.oh ya kunjungan gan.

    ReplyDelete
    Replies
    1. makasih atas sarannya sob :D
      udah ane tampilin tuh demonya :D

      silahkan dicoba yak :D

      Delete
    2. nah ini yang saya cari sob,thks ya sudah berbagi,entar saya pasang.

      Delete
    3. oke sobat :D
      silahkan pasang :D

      Delete
  6. ntar tak coba ahh keluar animasi pas apa sob...

    ReplyDelete
    Replies
    1. kalo lagi mencet tombol navigasi, biasanya keluar tuh animasi. :D

      mungkin blog ini banyak script" yang udah saya compress, jadi efek loading agak gak muncul :D

      Delete
    2. kotak follownya mana sob.

      Delete
    3. nah, itu dia, saya masih gak tau cara nambah kotak follow,

      kemarin mau googling lupa lupa mulu :D
      saya coba pasang dah :D

      Delete
  7. waw keren animasi loadingnya.
    mantap gan mksh tlah brbagi ilmu. :)

    ReplyDelete