Posted by : Unknown

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 }

Welcome to My Blog

Labels

Followers

Tentang Penulis

Security

Blog Archive

seocyberblog.blogspot.com. Powered by Blogger.

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