Cara Membuat Efek Loading di Blog - 19 Animasi Loading Gif

Cara Membuat Efek Loading di Blog - 19 Animasi Loading Gif

Bagaimana cara memberi efek loading di blog? ...

Nah, jika sobat ingin membuat efek loading di blog sebelum halaman dimuat, maka mungkin tutorial yang saya tuliskan di sini dapat membantu sobat untuk memberikan efek animasi loading tersebut.

Dan sebenarnya ini tidak sulit, walaupun demikian sobat harus teliti, karena kita akan menambahkan beberapa kode berupa html, css, dan jQuery ke dalam template yang sedang digunakan.

Di sini saya juga akan menyertakan beberapa tampilan efek loading yang bisa sobat pilih sesuai selera, yang mana kode tersebut berupa css, sedangkan untuk kode html dan jQuery sama saja.

Sudah siap untuk mulai menambahkan efek loading ? ...

Oke, mari kita lanjut

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

Cara Membuat Efek Loading
seperti biasa, langkah pertama yang harus sobat lakukan adalah masuk ke dasbor blogger dahulu.

Setelah itu buka halaman Template kemudian klik Edit HTML

Karena efek loading yang akan kita buat ini memerluakn bantuan jQuery, maka dari itu langkah pertama yang harus kita pasang adalah script jQuery Library yaitu :

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js' type='text/javascript'/>
Pasang kode kode jQuery tersebut sebelum kode </head>

Catatan :
Jika template yang sobat gunakan sudah menggunakan script jQuery Library, maka sobat tidak perlu lagi memasang kode tersebut.
Selanjutnya kita akan memasang kode html yang nantinya akan menampilkan animasi efek loading sebelum halaman blog kita dimuat, dan kode tersebut adalah :

<div id='efek-loading-keren'/>
Pasang kode HTML tersebut tepat setelah kode <body>

Setelah itu kita akan membuat efek loading ini berjalan sebelum halaman dimuat menggunakan sedikit script jQuery berikut

Pasang kode itu sebelum kode </body>

Langkah terakhir yang harus dilakukan adalah memberi style untuk tampilan efek loading menggunakan kode css, dan untuk itu silakan pilih css dengan tampilan yang sobat inginkan. Dan silakan pasang kode css sebelum kode </head>

19 Eefek Loading Gif Untuk Blog

Efek Loading 1

loading

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMhSmpCSgrYhzxf7St4XzhuS09iV3zRyMMX0XhqORCDx5-b4fFZL05JPG-eClZYpOI0M-vlqwqHTPnIL7MJmTVZnPcvk4jj7FeNcKYdlSJB02UoPPDKEbq48zrxup2u8syIYsXUQI3GrZD/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

loading1

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP9Am1E37L4jMnLQu3xczuBBs__uny9M9lgHpOBRciL6Ig1ze5q1ZCS7jO23XESU_GcLQfaIzII-BmP2gv3R0B-tVd3H7I-Lruh8IOaGAJaahyIe6rvAlQWctHyYPibJzObv6jVwp1CR3Z/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

loading2

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWfyWIQcuu1Rdi65bkovRsAo9eGqnSqJau-YyRjCGmV2yaNR9Buypu77F6XTLaawXx-6TLfFuf88ZoDGQ2JjY3TNv3uHbI-Kg69jm1GZjJXFq7aQcMGtar1iDhqbbSTSpn0lDwEbMUjTA/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

loading3

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8HIlA9ShVyWcYdbZ57DSjA-1lVrrmbBYTbLZj4W_QnR1hjJzBgqA1tiZU7CWO0C2e5_AxCkp0bYiAdHdPywQOupnLyqVuTM6erfyCzEgXPff2ORtaNIIp2Rb0wbAvnmuxxywyxu4nJFw/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

loading4

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgItDjJJSHH3eDVIQ_aEHV7xj6fnywaRDnRpTHCF_0NnADafTQlUS5udutkor4ztr-xHXFOglRcsQ8EqQhY06QjHwjceoFDONzkOrAxOm_eeKHj0rpjG6G4h1U89wvHeHUHpmRU8z6nhacu/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

loading5

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtngi3_r5vGTEzLZOhNATjGIz3d21_6tiMd9-06ULuE1UUaBFqj3kT9wAPngAY6E55mvtGNvKqAOY03kC2GKRc-mkGsXEBoS7LcYc4MYHSnx7H8zOvuHzozVIV_KV75jz50jIf1XpCAIT/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

loading6

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigSQyPP6ezJtdxVBXsUVRgskIo4cYafy-0_CicO8PDEfAB923E1_yYRiUF6WiIClODZAvURBdYZyZjxk2BmWqqxpS3rioHs1-KPIQZsxOI6vrZXQLysBytmdM5NKp0SE94H9ae-7NBTTav/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

loading7

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhttFmyDMq5Mf2IIpMKjVsyRtb23tqvjb42UUdkl0eSMa7QBJ0ffqlfROzCNF2yN7Qh-xsrb_DHq8SYV3itzBqRyA7VuGYER3a8d4hiDwJD3LBtngfp8CQPhmIawzATu0eATwVpMwpPcV/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

loading8

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg652VkTM_hNKdPVXIDGPt-hiKUXyGMi_v4BxVq4FAYJ6GfHDSJDbbOoKv67d_QZcbogIKq3kttI66Pt589ZYvHJDLxJ3eGBizQXbWJgHN-pPjPTX3Lq_P_xix7UymWeZ6-TjurS-UqC0so/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

loading9

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaLXikrQqPtFL7Wdwtm4GVN2JpFAkc4yyZI4u8ydkYXEf-jqnDR0hSxdUqdZEdciqp5fMaxBeB5ZH2UJ1pgSRvyml0S5rCuSIdI8ivwDyFFMG_fCRj7_oGz2WPNzm3cMrMCh8gPminDviH/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

Loading10

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLDmDitNawDq_UqaNRDB3HDobXJPCzOobc1_6TP5Jy2M7QgJAaaFjcpUc7WXJygz6XykWlvGoBNV34W2KQ_s1Bgot232wUlf_gn1aNdPPMmmHAkQwyzMP3B8Xb0qm1prnaUEf1XpvsiSg/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

Loading11

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK0ptKkKbgIWHeMzvGJD9ouqv588utCzS3_ZwvzbaohRV1hVUMgEsDhzef6zHstZMI4eLWLvNoPCPzL_nhodRImO-RU_LLdRpVdMLermLkm3Jd_votUJPtqIL3g3TUpP-jIRwraow8F8kB/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

Loading12

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAbr5hA2Ge9pwn4vlTrwA1BNCtUmaKnLRvBWNXKUQ25z84ZbZRcsa8suo2wf2P5cp6M3fCLskn1ko_fxo9vT-Zl1R3M2ufrskOZmKDP9rZd2hW-CJXpPfQzaSCfeFIXZ79qHplgCyACV-3/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

Loading13

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB5RAc9PCTEdwkYxq8yy5Ltji1wjpYMd2GyZXYDU-pSqeHvl7B3zYRN70_HgOiKgQ5M_xonPTNybZXlv7x0PLUXN033PES3PsOUUgkp0sCUeCUTVqgcsGQ8qMO6bj2YE7y31knZ9pa3I8R/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

Loading14

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGJLH1onTxC4ccg2y4uexQdtUMWeDu0eXUobn8fvweHJLpIkSH8vfzo2SsXC7l7kV8dGbiKQ83__sw0l_u-3R6TrKaiIK-oHS4gOp_c_eICeX7m2HMQKRGWnBInAVuBZAv4hFYChrw0ls/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

Loading15

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJWYb7IpH61UK66wJv-rtpWbEmBgVLP50ymttw9Zd-NKtu7ilUodEyjC3wZ3r3wngjD-ca3wICFuuTBwBZRm98ag2CrKdHwp8f7Dz-7ZLb_gR_4PnT3NEC2NAnIzULiIDAfm9mLBC4AFy/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

loading16

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2zwXUbMmVz8CjFNU7ST0ZbeWGUjRZzPp0GlF5q0McLw3ZGqLYNFnDiLYIu4-MhtqW7YzRfcgPhvP-sR5wqf9StNVJ_uwRzS0a4kwWH3S_lXq-cqRRXhzoifEIcMsXsxFBSrQcI-sr0V-n/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

Loading17

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2LuvqWg7rHWZERg0lXGgbX7GfHAXhNu6p79H8zUJWNESjZ2lc1hXbieSIl86_lsrm4QHrrX_YRiMqb9KCJKoUEyLRVQuUQys5U3m6YsR5jAiSs4n5VZIa59UQvQE7kZXLrNE5O8bhvAzs/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

Loading18

<style type="text/css">
#efek-loading-keren {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioBc9l0hIZgVzN4ldjuRQnWxFFyRBrU8jv4ki0LCYNomoPUEnXPO02IwtIYcsR7r9BqNdNRVXKxAi6I3ObfrZvxm6bG2e7x7n-nKDBJW2sd-U4AAjZSC6uArlOt3MJ_yIHprD5V75My4MV/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 efek loading di atas mengandung gambar animasi loading dalam format .gif, jadi jika sobat memiliki gambar efek loading sendiri silakan upload sendiri, kemudian sisipkan pada kode 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>

Komentar

Posting Komentar

Postingan populer dari blog ini

Widget Animasi Bergerak Untuk blog

Gambar
Lagi nyari widget animasi bergerak untuk blog ? Kebetulan sekali pada tulisan kali ini saya ingin berbagi beberapa widget animasi bergerak untuk blog yang keren - keren. Widget animasi bergerak ini adalah widget yang menggunakan gambar animasi bergerak yang dapat kita pasang sebagai widget blog. Untuk memasang widget animasi bergerak ini mudah banget kok, sama saja caranya seperti memasang widget lainnya. Cara Memasang Widget Animasi Bergerak Di Blogger Sebelum saya menuliskan beberapa kode widget animasi bergerak untuk blog ini, saya rasa tidak ada salahnya juga jika saya tuliskan bagaimana cara memasang widget ini. Adapun langkah - langkah yang harus dilakukan untuk memasang widget animasi bergerak di blogger adalah sebagai berikut : Masuk ke dasbor blogger Buka halaman Tata Letak Klik Tambahkan Gadget Pilih gadget HTML/JavaScript Masukkan kode widget animasi bergerak pada bagian Konten Klik Simpan dan selesai. Nah itulah langkah - langkah yang harus dilakukan untu
Terus membaca

Script Efek Teks Pelangi Membuat Tulisan Warna Warni Di Blog

Gambar
Mau tahu bagaimana cara membuat tulisan warna warni ? Oke sobat, pada kesempatan kali ini saya akan menuliskan bagaimana cara membuat tulisan warna warni di blog menggunakan script efek teks pelangi . Script efek teks pelangi ini akan membantu kita dalam membuat tulisan warana warni di blog dengan tulisan yang bisa kita tentukan sendiri. Script efek teks pelangi sederhana ini dapat kita jadikan sebagai hiasan blog, seperti membuat tulisan selamat datang, dan lain sebagainya. Mungkin sebelum kita mulai tutorial cara membuat tulisan warna warni di blog menggunakan script efek teks pelangi ini sobat ingin melihat bagaimana demo tulisan warna warni yang dihasilkan oleh script efek teks pelangi ini, untuk itu silakan lihat demo berikut Nah, begitulah nantinya hasil tulisan warna warni dari script efek teks pelangi ini nantinya, lanjut ... Cara Membuat Tulisan Warna Warni Di Blog Menggunakan Script Efek Teks Pelangi Ok, mari kita mulai tutorial cara membuat tulisan warna warni
Terus membaca