Cara mengganti loading screen pada blog

HASANONTA - Kali ini saya akan membagikan tutorial Cara Membuat Efek Loading Pada Blog dengan langkah sederhana namun dengan hasil yang sangat menakjubkan. Dengan menambah efek loading ini takkan memberatkan loading pada blog namun akan mempercantik tampilan blog. Cara membuat efek ini tentunya sangat mudah, hanya dengan menambahkan kode CSS dan JQuery, kita telah dapat memasang efek ini pada blog sobat. Untuk itu mari simak langkah-langkahnya berikut ini.


Memasang JQuery pada Blog.

Hal pertama yang harus dilakukan adalah menambahkan framework JQuery di blog. JQuery adalah sebuah Framework Javascript. buka dashbor blog anda klik TEMA -> edit HTML. lalu cari </head> dan letakkan script diwabah ini diatasnya.  :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

lalu cari dihalaman yang sama "</style>" dan letakkan script ini diatasnya :

/*Page Loader*/
 #page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jZwzGqN1dVhFoasRqSxK8AMrTjTN63I9mbqUlDOKKV1ViTunxoYCg0g7r4s9ynaPzIIHzeR3ZhM-BU87JlJzkp5tm86iDLrC1m1lkFAsVUYZS224SO76wRxF8IQ6pCbxFFeA4IeuvcuO/s128-no/loading.GIF&#39;) no-repeat 50% 50%;padding:1em 1.2em;display:none}

 kemudian cari lagi dihalaman yang sama "</body>" dan letakkan script ini diatasnya :

<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>

lalu simpan dan lihat blog anda.... :D
Sekarang bagaimana cara mengganti loadingnya???  anda cukup mengganti url gif anda di link yang saya merahkan diatas. lalu save.

Beberapa animasi ajax page loader

Berikut ini adalah beberapa animasi page loader yang disediakan oleh http://preloaders.net/ yang bisa anda pilih untuk menjadi animasi loader di blog anda.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVD16zp_Da5HzJO9HdiWGkjaN6GV4qzkYAVnAj6iFgwByDeo3GnsH4RD1BwXGemcZAFK6bp2txoUSpRsdkORdu1D_tQqTZk1kaeUPJ11eIoJZorvjeWZMYhcc190PdnOEHvDPhzl5lifE/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg35hm_UCqAX3QTmfquIvd995IlH64JOOcfbURVJCkx5jSxA4q1FG3uEUeym6OEo9VqvM43o-dejgaRw5Fdnzqz25oT-DXORytzm0B60-b3y7M_fLT6eI3NOwPz6sEDiRrbHuxO48h5xTA/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQpDEzPo8xF8qDjzyF5v3_vy2yHccyCOC502vd1LDXPdx60xvnV4r4-Gj2PR9YmXOcdWNIVwPvq6bOjQaHaIwVw6Uxa0XTARn13bv7IO3_Pxpy-f7uy0CfTyWedABXduvtshx95aZ_qQ/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKgztd6SyguU_QFWLIiNQP7HOnk7_Fh_3dqhijMJ2UWye8NtlHUuunzIkX4uWvY_b0hBfyv1FLTs3AnrUPmjpHKJHBLA2lQq1Hwk8Yxk07TsmoaYJPkuqX6hOEl7zukLVNhB4QY461F8/s128-no/Loading4.GIF

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

http://1.bp.blogspot.com/-sGFHLSRy2OI/U7nQTn34h8I/AAAAAAAAEDU/0PUXPSEACPc/s128-no/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55ZaistSiugPVxsbD_LAJTLe78enK-49UhcjzYUjGBvJugYPWcte95RdKPw3J-sFVbc-BGm-WuzSfsgMvMQGJMtBz_XCip_8GJGdGRhGFBjdb6ooWxNW7GmTZZiqkk3Y4_48WEwhDOoM/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiwIDcwaCBcj6kMjTZrqM7Sy3P0-of5PiwfGK0htAfEdY47pCOhltOMcOcQut3IEAnyVG5uepRqji7bn_ykPcT4cNhi78F0fXgvrrx5_TpXvFYz1PtDwT5GcfdOHKVzq5latAxZIQS5m0/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-HiAk1qJzCYCD7DwV5VCqqFe5QuM0G84zUo8_y12vnGIlzN5zPY3c09mXnO0Stw9BlgrmUTBh116jrm2JorUqdkweysY5MNneZffMsrl_weBynzNV-ndM3K_lrM1yLOBLwPN4gwIc_d8/s128-no/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5IPd75woDQ7dxpf1ikWfhnePWC06yvCSF8Mf-KgfpYJLoHcvJWsT0vm7c_NlGlyTedmlLbUwpTucA3hjGwyubKs77nSJu_gWzqq57QON74-Id1fDx3q-02E3Kebr6uY8L4USfHJEfQcc/w128-h40-no/Loading10.GIF

- See more at: http://mbaguszulmi.blogspot.co.id/2014/07/cara-mudah-membuat-efek-loading-pada-blog.html#sthash.cfe6iHlC.dpuf