Cara Menciptakan Pengaruh Loading Di Blog

Bagaimana cara memberi imbas loading di blog? ...

Nah, jikalau teman ingin menciptakan imbas loading di blog sebelum halaman dimuat, maka mungkin tutorial yang saya tuliskan di sini sanggup membantu teman untuk menunjukkan imbas animasi loading tersebut.

Dan bahu-membahu ini tidak sulit, walaupun demikian teman harus teliti, sebab kita akan menambahkan beberapa instruksi berupa html, css, dan jQuery ke dalam template yang sedang digunakan.

Di sini saya juga akan menyertakan beberapa tampilan imbas loading yang sanggup teman pilih sesuai selera, yang mana instruksi tersebut berupa css, sedangkan untuk instruksi html dan jQuery sama saja.

Sudah siap untuk mulai menambahkan imbas loading ? ...

Oke, mari kita lanjut

Cara Memberi Efek Loading Di Blog Menggunakan HTML, CSS, dan jQuery

seperti biasa, langkah pertama yang harus teman lakukan yakni masuk ke dasbor blogger dahulu.

Setelah itu buka halaman Template lalu klik Edit HTML

Karena imbas loading yang akan kita buat ini memerluakn pinjaman jQuery, maka dari itu langkah pertama yang harus kita pasang yakni script jQuery Library yaitu :

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

Pasang instruksi kode jQuery tersebut sebelum instruksi </head>

Catatan :

Jika template yang teman gunakan sudah memakai script jQuery Library, maka teman tidak perlu lagi memasang instruksi tersebut.

Selanjutnya kita akan memasang instruksi html yang nantinya akan menampilkan animasi imbas loading sebelum halaman blog kita dimuat, dan instruksi tersebut yakni :

 <div id='efek-loading-keren'/>

Pasang instruksi HTML tersebut sempurna sesudah instruksi <body>

Setelah itu kita akan menciptakan imbas loading ini berjalan sebelum halaman dimuat memakai sedikit script jQuery berikut

Pasang instruksi itu sebelum instruksi </body>

Langkah terakhir yang harus dilakukan yakni memberi style untuk tampilan imbas loading memakai instruksi css, dan untuk itu silakan pilih css dengan tampilan yang teman inginkan. Dan silakan pasang instruksi css sebelum instruksi </head>

19 Eefek Loading Gif Untuk Blog

Efek Loading 1

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieSwDpHujjX7-a7YuICmhVbPALXxjSQiCciyYjhY_K_Ne6UotSSu8FnzMMlX1GF6ijRzv0NPiCT7o6b4LmLJatxp4LebvSbcXB2oIGMzA40S4mlMQefSMhWavd7qJwQ_Z4k2yWLK4TFFzg/s1600/loading.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 2

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO9CgXp2KxaGM6UaS2lmQYZHhLGBVAdqzXnT-I8Udn62jpvHLIGCjXai5PibV8sLw9Y0TmiLL-Msag6nEwR0H_pBj94JybStZmAkgSEPoVtj1JjWx7lHysHXk-1MjHND9XKolxlDX3Fh9n/s1600/loading1.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 3

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6lFi5RWZirp2iV46IklCAr9MDOxDjz4kGiTVVbG1HJjOrEnPhhldjqnLhgiTsQQG0ITI5fyjN1wpIC5nKC84PS8b4OWO2xbkwDBNx-rpF-aeRDZWjEegVXjlpJG2T4uZiFHpXMxBypjX/s1600/loading2.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 4

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrz9Njo8r7IxXT7Vx-vueVYdcmMz5LlVIdPK-CiEJRr0WuG76KsPmDYKXUmVdwZW-M7Pl6vdFUqgcpx4vIXiRK08uV7Wi1O-Dc_2obIBuy2kp5SOAyshsj4n72h5KQ1gSsimbPmtsJlZsg/s1600/loading3.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 5

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiOkOR27bvB1velnvQL0A3uAkXjmfnQN6ZOVRAgYwJEY58-Z7TmS7KN2Bylp571tdCVa2NySt_fFJfLMZNChBb6xI6ar0c7jbZRJJPTOYJiNp2DiXOdleN_4874KRX8PJHEjy9TklLq8XL/s1600/loading4.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 6

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh674VLSY50J7whFWRittBbZIUTDGcajrnhgpAPjRn2oKP6Irp4lJLUeeoKkLekfUw0k1cAZBvp6KoXERRNQsCuBFYib6zczdRUCKzH4UnsHPzo01eMAe9qXpv744BADh6jSyD7SP9Ylv1R/s1600/loading5.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 7

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65WmsP38Z7rso1B8wFEmjklhy-3eJYkPbReJ8inl2O0BE7ACC2nRwwkQbGvzjLybDrnxvcSJJLkhXOp7Ah67ioU3uZxlUUGpaGuC8U1GvcmLho988jxnxCXlc1CmRka0wKyU73_s7lRaF/s1600/loading6.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 8

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMWM9KjbqgMJBJKjSUw2vLTcdbp1YJKDRmaVKlPTq44sYRYDFixucWB2SDqcqGj_7Ga4iakyTCHhLdPGckaqwrGqvH-iSGJegW6u0dUFHV-MtRRU_ZecSPcX1BTi0L_TlKpJOGadTuIlcs/s1600/loading7.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 9

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrhBuToti966SK84OiVZt0tgSGz5icBFrzQXzQpoUvbYJN5qLDTXfQOfmVE5jdMQFIB8ti4PSlX8LczrfsP8mM-1ja0X5XLy73su_SsRdksP4tnXBCgfKd7TbQ4NoShCHvUXZmG8RL4UeM/s1600/loading8.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 10

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXmR0DDqtQQpZFkOOvgulMXp4wsp4wh8GHpW5HWUC4y0nlaFwlTvp5dEvf-EItXRsJzB5-DHu35XyG520czYOF2TEEscM2yl1e32lhNImZT194EXfHch_p7gaLppcW3b0ZoGGBIR2Btybp/s1600/loading9.gif) no-repeat center; background-color:rgba(0, 0, 0, 0.32); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 11

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WMTmhN3f4VFO2b0G_pY1syPg6P6dI8qLuIN2rZ4WIlxKUiVlQZNNFslxxjx4YTeSmzw_Ge7dzY2Emd34RwndzIZz5QTq2VhbMAkUShRO6ehYE2HVfpEb6eeBMeBDwbhdjy99yes00s6e/s1600/Loading10.GIF) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 12

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGJkS33GAkwXhZgT5GfxnvGF7pQ2OXod0cGb_hjRSfQ5n4idLJ2GlEks4bXb6n5rDLt_YRQUDHBupHYTROb30kSpF7y-W8CguKwJszZa7zdkDAh6zJEpoEUYImhS0ndRXoR5xRYnZ7K0oW/s1600/Loading11.GIF) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 13

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2OhJrZH0SYKNK760tpDAPz98G4m7vqBUo4gQHPu3hGA8qtUCJdzFd7XzXUiB4jWgKgf-5QLCy-JBO3XMRmZPtnS8SH9_AXsTdTnSjxLLyOlXySJAyPStm7rAIyBetal85UeZcS-oQ91_o/s1600/Loading12.GIF) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 14

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5mlrQUJy4s5ip9rpvdyQMyegapzWH02ARtILxHMeYwHj-5iJKdCZMG9lNMfUZ3Y0O4ZhkK2SjgeXiJSLPYRfW6LipBjg5wWju7nG52dVISGbtqGK09YFar7yVm9w6PA0OKvA-ha6-mGB/s1600/Loading13.GIF) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 15

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcCOCJVdqPeIKK0vDcNaMOZDcTLI-bloIx8a8r1kAyoEOIEWWXg28LE7Mu9N44xkQd6LC-xIqBEp6pDe3R3vNfcascJNt1oH_XdYINNBLK47U_RbcMBhi9Gu4KXiNLwHFGCWsdHtb5DBk/s1600/Loading14.GIF) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 16

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ajcNvBCGdhg-XF3DDl8Ji0dapM07DSdHKAH-DYk2UcvKPisUprlSznNCRXHVGppQLOgrFLd9Jlb4vcWRngSlCTihmrbi4peW4taUT_rEFJL2Cw37BxdfuHXsgLbQsWlM2CvxYYk6e3qj/s1600/Loading15.GIF) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 17

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1e1LMhZJ9hM7_k1vzACDPpOY9M__s0XkO3ZQEZ1mvcIXF1jFHQbUO9IJmGjI_UJBjeqp8gA92oZZU_fkPc18LgNM6tV46BB0Bwrj4fH2xhGuiXoIWPAtacA0u1FmHlWmumI6GIisrsJp/s1600/loading16.gif) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 18

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ04I4qM5oUFj4ebgV7A8co1w3jAT5xc7nsOZrYkwgeauFik0KRZtlSTig3OLjzMfa_k8SzoAs5HSROgcn4gyXlG-RON2waUK62Ymy2pdkXI_mm6oXO2BI2w6hQFhf9xgx3YiemE6DxoO1/s1600/Loading17.GIF) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Efek Loading 19

 <style type="text/css"> #efek-loading-keren { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ3g-UzQ2DsJBEiYgAwu4XgKLO7HBgVUgMoHxlA9eqtjUTr2PwWhD28aecdcnj7XZJibYDbQF4XU-ModZb1LmOPnCeqJx8p-tkieb1Qnhj1EexKOtvLN7HdcsEoAr0-n0G6TikQGkFxB_U/s1600/Loading18.GIF) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>

Semua css imbas loading di atas mengandung gambar animasi loading dalam format .gif, jadi jikalau teman mempunyai gambar imbas loading sendiri silakan upload sendiri, lalu sisipkan pada instruksi css berikut

 <style type="text/css"> #efek-loading-keren { background:url(SISIPKAN URL GAMBAR GIF DI SINI) no-repeat center; background-color:rgba(225, 225, 225, .7); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; </style>