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
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 :
Catatan :
Setelah itu kita akan menciptakan imbas loading ini berjalan sebelum halaman dimuat memakai sedikit script jQuery berikut
Pasang instruksi itu sebelum instruksi
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
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
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'/> </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'/> <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> <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> 
![Kumpulan Aktivitas Jam Postingan Blog Yang Sempurna Lewat Jejaring Sosial Media [Lengkap]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hReq8EoxpcRGa-n0vCmop_tJCjHHB3WS4DwCn8vJayzS86HrEEwfnlt72TnrFVJjKHfPgW8k-garCI2wtYj9SbH5rdE_IFZHMRaDk94870RsEy85jgDEOqAkCL4VNgt3RtUMOYUbcEg/w45-h45-p-k-no-nu/jadwal-blogger.png "Kumpulan Aktivitas Jam Postingan Blog Yang Sempurna Lewat Jejaring Sosial Media [Lengkap]")
