Cara Mudah Membuat Efek Loading Yang Keren Pada Blog

loadingkeren
Yo, yo sobat Save As,, ketemu lagi di Artikel Berlabel Tips Trik Blogger ,, yup sobat kali ini blog Save As akan membahas bagaimana Cara Membuat Efek Loading Yang sangat keren di blog :) Jika kalian membuka Blog ini pasti akan muncul efek loading kan saat akan membuka label / postingan lainnya?.. nah itu lah yang disebut dengan Efek Loading.. 

nah Pasti terlihat keren dan indah kan Sobat Save As.. Lalu Sobat Save As Bertanya-tanya dalam hati .. "Hmmm... gimana cara buat kaya gitu ya,..." nah.. ini dia cara-caranya sobat Save As !:

  • Masuk ke Dasbor Blogger
  • Pilih Template
  • Klik Edit HTML
  • Cari Kode ]]></b:skin> ataupun </style> (search dengan CTRL + F agar lebih cepat ketemu :D ) 
  • Taruh Kode CSS dibawah diatas kode ]]></b:skin> atau </style> di template Blog Sobat
Ini Scriptnya:
/* Loading Page */ #page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKsHkfwyfvIw-gCSRfSWitAKod-0yjTFIOiQOatFHyOTC1gH8J9J6j-8w0rx25PRBKi5Ex-tdxtKMvKETHmt4PmwOdNzcVF5AjYw8IboffJJxjnJZtvlp_ZNFS8fOyD6cDVe2TVrXEbwK/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none} Catatan : Sobat bisa mengganti kode berwarna merah dengan URL Gambar Loader lainnya..

  • Setelah ditaruh.. cari lagi kode </body> di template blog sobat (pakai CTRL + F),, setelah itu masukkan Script Jquery Berikut
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>






  • Setelah ditaruh.. Klik Simpan Template,, selesai sob..


  • Bila Sobat ingin gambar Loader lainnya,, pergilah ke prealoders.net

    Atau ambil salah satu punya saya ini :

    http://2.bp.blogspot.com/-kIrasdB82T0/U6eA_bnDmlI/AAAAAAAADzw/UUio00Tw4gM/s1600/Loader2.gif


    http://3.bp.blogspot.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.GIF


    http://1.bp.blogspot.com/-tjFFryWgIcs/U7nQQ0x7JHI/AAAAAAAAEDU/v2BqyuIvCc8/s128-no/Loading3.GIF


    http://1.bp.blogspot.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.GIF


    http://2.bp.blogspot.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.GIF


    http://1.bp.blogspot.com/-sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.GIF


    https://4.bp.blogspot.com/-H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.GIF



    http://www.yamaha-motor.co.id/typo3conf/ext/ndn_download/Resources/Public/Img/loading-animation.gif


    Ya,, sobat Save As.. itulah Cara Mudah Membuat Efek Loading Yang Keren Pada Blog,,, Semoga Bermanfaat bagi sobat-sobat Save As.. TerimaKasih ... 




    Next
    « Prev Post
    Previous
    Next Post »

    17 komentar

    Tambah komentar

    keren sih gan jadinya, tapi pasti pangaruh deh sama loading blog kita

    Wah ini yang ane cari, ijin praktek gan :D

    Wah klo itu tergantung blognya, gan.. buktinya loading blog ane sama2 aja kayak tadi :D

    keren nih bang, tapi bikin blog berat ga? kalo engga bikin berat, pengen pasang :)

    dijamin nggak, kok gan

    nanti loadingnya jadi lama gak gan,,, di tunggu kunbalnya di rofiquye.blogspot.com

    Bagus gan tutorial.a.
    Patut di coba nih.

    Nice . asik banget efeknya.

    Di mobile pengaruh juga gak gan.....?

    Keren gan, menarik pengunjung bangat nih,
    NICE POST dah

    Wah, keren gan. Tapi ane lebih suka load page Jam :-bd

    keren gan tutornya, dicoba ya

    lumayan sih untuk mempercantik, blog tapi takut loadingnya terganggu

    Terimakasih Tutorialnya.. sudah di aplikasikan di Blog... keren mas

    Sama-sama juga mas Dzul

    ooo. untuk yang itu akan saya bikinkan lain waktu ..

    sepertinya berpengaruh ,, gan :D

    Mohon Masukkan Komentar Yang Relevan
    Mohon juga untuk tidak menggunakan kata-kata kasar / kata-kata yang merugikan orang lain..
    TERIMA KASIH :D

    Thanks For Your Comment Here