Sponsor

Navigation

Membuat Efek Animasi Loading Pada Blog


Membuat Efek Animasi Loading Blog - kita sebagai pengguna blog tentunya ingin blog yang kita miliki terlihat bagus sehingga membuat pengunjung blog kita terasa betah berlama - lama berada di blog yang kita miliki, Efek Loading Blog ini merupakan salah satu desain yang menurut saya dapat menjadi solusi sekaligus mempercantik tampilan blog sobat. Efek animasi ini akan muncul setiap kali halaman blog sobat dibuka. bisa dibilang ini efek preloading untuk blog sobat.

Baca Juga : Membuat Efek Loading Jam Pada Blog
                    Membuat Efek Loading Lingkaran

Membuat Efek Animasi Preloading Blog di Blogger.

sobat bisa mengikuti langkah-langkah dibawah ini:
  1. Masuk ke akun Blogger
  2. Pilih Template > Edit HTML
  3. Tambahkan Jquery Di bawah ini atas kode </head>
  4. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

    NB : Jika Di Blog Sobat Sudah tertanam Jquery Sebaiknya lw\ewatkan saja langkah ini, di karenakan di blog hanya boleh ada satu jquery :D 
     4. Cari kode </body> dan paste kode berikut tepat diatasnya, lalu simpan template
 <style>
#Hot-News01-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="Hot-News01-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#Hot-News01-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script> 

Selesai. sekarang simpan template sobat dan lihat kembali blog sobat, Efek Animasi Pada Blog sobat sudah berhasil di pasang. semoga bermanfaat ya. trimakasih
Share

Muhammad fikriansyah

Post A Comment:

24 comments:

  1. keren ya,, keliatannya lebih profesional blognya

    ReplyDelete
  2. Bermanfaat sekali, bisa di pasang ni di blog ane

    ReplyDelete
  3. Bisa ane coba nanti. Thanks tutornya

    ReplyDelete
  4. bikin lambat gak loading nya pake efek animasi blog :-?

    ReplyDelete
  5. wah simple juga ternyata min, makasiih tips nya :)

    ReplyDelete
  6. kalo blog ane pake script itu jadi lemot gak ya?

    ReplyDelete
  7. Pake efek begituan memang bagus gan, tapi utk fungsional blog bisa jadi sedikit menurun karena akan jadi lambat loadingnya, saya pernah coba dulu sih

    ReplyDelete
    Replies
    1. hehe tapi syukur saya terapkan di blog saya gak begitu terasa berat gan :D

      Delete
  8. wah loadingnya sedrhana, tapi keren..

    ReplyDelete

Pembaca yang baik selalu meninggalkan jejaknya,
Silahkan berkomentar dengan bahasa yang sopan ^_^
[ - ] Dilarang berkomentar menggunakan Live Link !!!
[ - ] Dilarang promosi disini !
[ - ] Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten !!!
[ - ] Dilarang menulis kata - kata kotor,sara,dan hal - hal yang berbau p*rn*
[ - ] Dilarang Bertanya jika tidak sesuai dengan postingan

===== SEKIAN DARI ADMIN TERIMA KASIH ^_^ =====