Posted by : Tirta Aji Pradhana

Hai, bagaimana kabar anda hari ini? Disini saya akan meng-share bagaimana cara mengganti “loading” pada blog.

Bagi Anda yang ingin tau bagaimana sih bentuk atau gambaran efek loading blog ini, ataupun Anda ingin menerapkannya ke blog Anda, silahkan simak tutorial dibawah ini:
  • Masuk ke akun Blogger Anda.
  • Pilih Template dan Klik Edit HTML.
  • Lalu cari kode ]]></b:skin> atau </style> (Gunakan CTRL+F untuk memudahkan pencarian)
  • Kemudian Copy kode css dibawah ini, lalu pastekan tepat diatas ]]></b:skin> atau </style>
/* CSS Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://lh4.googleusercontent.com/-lvlkiOAd4UA/U6qOQ4uFtUI/AAAAAAAAD58/wqTdiNc3M0g/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none} 
  •  Setelah itu, cari kode </body> dan pastekan kode css jQuery dibawah ini tepat diatas kode </body> tersebut.
<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> 
  • Simpan Template. Selesai.
Catatan : 
  • Anda bisa mengganti efek animasi loading dengan mengunjungi website-website penyedia animasi loading page seperti yang Saya berikan diatas.
  • Anda juga bisa mengganti efek animasi loading yang Saya sediakan dibawah. 

https://lh4.googleusercontent.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.GIF

https://lh5.googleusercontent.com/-kXvhQBHoB0s/U7nQRhwcIxI/AAAAAAAAEDU/WDhTfSJOii8/s128-no/Loading4.GIF


 https://lh5.googleusercontent.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.GIF

  https://lh5.googleusercontent.com/-sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.GIF

https://lh4.googleusercontent.com/-qqEpMJ9PeoI/U7nQO-rfprI/AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.GIF

 https://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.GIF


 https://lh3.googleusercontent.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.GIF
Cara Menggantinya:
Silahkan Anda ubah url berwarna merah yang terdapat di kotak kode css loading page diatas dengan url loading page yang sesuai dengan selera Anda.

thanks ya yang sudah berkunjung, selamat mencoba dan selamat bertemu lagi di artikel artikel selanjutnya!

{ 8 komentar... read them below or Comment }

  1. mantap gan bisa di coba nih tutorialnya

    ReplyDelete
  2. mantav vro tutorial + animasix keren2 sep dah

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Blognya udah ane follow atas nama SimBalisme no 22 follback simbalisme.blogspot.com thx

    ReplyDelete
  5. Bermanfaat gan coment back gan

    ReplyDelete

Welcome to My Blog

Labels

Followers

Security

Blog Archive

seocyberblog.blogspot.com. Powered by Blogger.

- Copyright © InterneT MyLife -Robotic Notes- Powered by Blogger - Designed by Tirta Aji Pradhana -