Tutorial Belajar Blog | Tips Blog | Informasi Tentang Blog - Membuat Animasi Loading Page Di Blog, Merupakn Tutorial edit blog tidak beda jauh dari tips sebelum nya Langkah Membuat Animasi Loading Blog Lebih Menarik , Untuk membedakan coba sendiri ataupun liat dari gambar yang sudah ada maaf tidak demo untuk tutorial ini
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4LnLxMis6RNtfdDsGCS3ZGYr9PQKvCJQryd1X5RKqPyzkYDgvy4PSGqDu1zepZyEEHU9TFV01vg1UxTvPE2bnacOcxUV-iSlEEYAqnZl87dY1Z5XDY5yucL5XZDUJvMgs97PlNPa3Misx/s320/loading.png)
Script animasi loading page ini saya dapat dari http://www.gayadesign.com yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog kalian, masuk pada Design - Edir HTML dan cari kode ]]></b:skin> dan letakan kode dibawah ini diatas ]]></b:skin>
kemudian cari kode </head> dan letakan kode dibawah ini diatasnya
selanjutnya cari kode </body> dan letakankode dibawah ini diatasnya
Save template kalian dan coba buka blog kalian untuk mengetestnya
Semoga bermanfaat,
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4LnLxMis6RNtfdDsGCS3ZGYr9PQKvCJQryd1X5RKqPyzkYDgvy4PSGqDu1zepZyEEHU9TFV01vg1UxTvPE2bnacOcxUV-iSlEEYAqnZl87dY1Z5XDY5yucL5XZDUJvMgs97PlNPa3Misx/s320/loading.png)
Script animasi loading page ini saya dapat dari http://www.gayadesign.com yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog kalian, masuk pada Design - Edir HTML dan cari kode ]]></b:skin> dan letakan kode dibawah ini diatas ]]></b:skin>
/* ---------------
jquery animation loading page
---------------------------------- */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
jquery animation loading page
---------------------------------- */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
kemudian cari kode </head> dan letakan kode dibawah ini diatasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://oktridarmadi.googlecode.com/files/loadpage.js' type='text/javascript'/>
<script src='http://oktridarmadi.googlecode.com/files/loadpage.js' type='text/javascript'/>
untuk kode yang diberi warna merah, jika kode tersebut sudah ada dalam template kalian, kalian tidak perlu menambahkan kode tersebut (cukup 1 saja)
selanjutnya cari kode </body> dan letakankode dibawah ini diatasnya
<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
Save template kalian dan coba buka blog kalian untuk mengetestnya
Semoga bermanfaat,
Posting Komentar
Kami harap semua pengunjung meninggalkan jejaknya dengan berkomentar. sebagai tanda bahwa mendukung para Blogger Sobatya Corp Untuk berkembang.
Diharapkan Berkomentar dengan Bahasa yang baik.