Cara Membuat Efek Loading Pada Blog Edisi Terbaru

Pada artikel sebelumnya saya sudah menjelaskan tentang Cara Pasang Efek Energy Saving Mode Di Blog dan tips kali ini tentang Cara Membuat Efek Loading pada blog sebenarnya tidak jauh beda dengan efek Energy Saving Mode perbedaannya hanya kalau efek Energy Saving Mode pada saat kondisi standby dimana seluruh prosess dihentikan sementara sedangkan Efek Loading ini pada saat anda menuju kelahaman selanjutnya. Seperti kita ketahui bersama bawah pengertian dari loading itu sendiri adalah suatu proses memuat dan mengumpulkan bagian-bagian yang terpisah suatu file atau class dalam satu tempo untuk mendukung atau support kinerja dari system secara keseluruhan. Dan Tips kali saya akan mencoba memberikan cara membuat efek loading terutama pada blog yang banyak menggunakan gambar. Perhatikan gambar di bawah ini, efek loading ini bekerja pada saat anda menuju kehalaman selanjutnya suatu blog dan akan muncul efek loading yang keren, tidak seperti loading default bawaan template lainnya. Untuk hasilnya anda bisa lihat disini

Efek loading halaman ini menggunakan CSS3 dan Jquery yang diadaptasi dari DTE :] serta Allessio Atzeni. Script animasi Loading dari DTE :] ini menyeleksi semua link internal yang akan diberikan animasi loading. Cara pemasangan bisa anda lihat di bawah ini

1. Masuk ke blog anda

2. Kemudian pilih Template

3. Untuk berjaga-jaga jangan sampai terjadi kesalahan, Download Full Template anda terlebih dahulu

4. Selanjutnya pilih EDIT HTML

5. Kemudian centang Expand Widget Templates

6. Cari code ]]>

gunakan CTRL+F atau F3 untuk memudahkan pencarian

7. Letakkan code di bawah ini, tepat di atas code ]]>

#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); }}

8. Perhatikan code di bawah ini, Bilah pada template anda sudah terdapat code berwarnah merah seperti di bawah versi berapa saja maka tidak perlu di tambahkan lagi dan kalau belum ada, letakkan code di bawah ini, tepat di atas code //<![CDATA[

9. Kemudian cari code dan letakkan code di bawah ini, tepat di atas code

10. Terkahir Save Template

Itulah sedikit tutorial tentang cara membuat efek loading pada blog, smoga template anda akan lebih cantik dengan menggunakan efek seperti di atas.