Loading

By Ndo Andre At Friday, March 08, 2024

Cara Membuat Efek Loading V4 Dengan Mudah di Blogger

By Ndo Andre At Friday, March 08, 2024

Membuat Efek Loading V4 di Blog. Hai sobat, Pada kesempatan ini admin akan berbagi lagi tutorial blog tentang cara memasang efek loading blog yang uni dan menarik ini.

Dengan melakukan penyesuaian pada tampilan website bisa menambah daya tarik website terhadap pengunjung, waktu pemuatan halaman dapat menampilkan efek animasi yang menarik.

Menggabungkan file sehingga ukurannya menjadi lebih kecil adalah metode efisien, karena menghasilkan kode dan pemuatan halaman blog lebih cepat dari pada kode yang panjang.

Cara membuat Effect Junggling Loading Animation Blogger

Efek loading blog

Efek Loading Blog V4: Juggling Animation

Efek loading ini sangat mudah dibuat, dan bahkan pemula pun dapat dengan mudah memasang efek ini di blog mereka. Sebelumnya juga admin telah berbagi efek loading blog sederhana V3 di Blogger.

Kecepatan loading suatu halaman blog bisa menurun jika penggunaan widget blog yang terlalu banyak alias erlebihan. Kamu dapat meningkatkan kecepatan loading halaman blog atau web kamu secara efektif dengan mengelola widget secara efisien.

Salah satu cara untuk mencapai hal ini adalah dengan mengurangi jumlah widget yang ada di halaman blog. Apabila ada widget yang dirasa tidak diperlukan, dapat dihilangkan. Apakah Anda tertarik menggunakannya? Berikut tutorialnya.

Cara memasang Efek Junggling Loading Animation di Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Pada kotak yang tersedia, masukan kode di bawah ini:

<script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script> <style> #load-page-seocips { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; } $circle-size:10vmin; * { box-sizing:border-box; position:relative; } .circle{animation:spin 3s linear infinite both; background:#bada55; border-radius:100vmax; /* margin:calc(50vh - 5vmin) calc(50vw - 1vmin); */ /* Half the longest viewport width minus half the width/height of the circle. */ margin:60vh calc(50vw - 1vmin); height:10vmin; position:absolute; width:10vmin} .circle + .circle { animation:spin 3s linear 1s infinite both; background:#10aded; } .circle + .circle + .circle { animation:spin 3s linear 2s infinite both; background:#a991e5; } @keyframes spin { 0% { transform:rotate(360deg) translate(0vmax,-10vmax); } 50% { transform:rotate(180deg) translate(0vmax,0vmax); } 100% { transform:rotate(0deg) translate(0vmax,-10vmax); } } </style> <div id="load-page-seocips"> <div class="loader"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div>

4. Save.

Sekarang kamu dapat mengeceknya dengan cara berpidah halaman ke halaman yang lain di blog yang kamu pasangi widget ini.

Contoh Video Tutorial

Video di atas hanya contoh cara pemasangnya, tidak sama dengan efek loading blog yang admin bagikan saat ini.

Ndo Andre at Friday, March 08, 2024

By Ndo Andre At Wednesday, September 06, 2023

Cara memasang Efek Loading Blog V3 di Blogger

By Ndo Andre At Wednesday, September 06, 2023

Membuat Efek Loading blog V3. Pada kesempatan ini admin akan berbagi tentang cara membuat efek loading blog yang cukup unik dan lain dari biasanya. Setelah postingan kemarin, kini kita memahami pentingnya meningkatkan kecepatan memuat situs web atau blog, agar dapat diterapkan secara efisien.

Setiap unsur atau bagian dari suatu website atau blog saling berhubungan, oleh karena itu pelaksanaan pemuatan blog dan website hendaknya dilakukan dengan memperhatikan komponen-komponen yang ada. Optimasi diperlukan untuk mencegah ukuran file yang besar berdampak negatif pada kecepatan memuat halaman blog.

Dengan melakukan penyesuaian pada ukuran dan kualitas file, waktu pemuatan halaman dapat dikurangi. Menggabungkan file yang lebih kecil adalah metode yang lebih efisien, karena menghasilkan kode yang lebih bersih dan pemuatan halaman blog lebih cepat. Menerapkan pendekatan ini dapat secara efektif meningkatkan kinerja situs web.

Efek loading blog

Efek Loading Blog V3

Kecepatan loading suatu halaman blog bisa menurun akibat penggunaan widget blog yang berlebihan. Selain itu, jumlah widget blog yang berlebihan juga dapat menghambat kinerja website secara keseluruhan.

Meningkatkan kecepatan memuat blog atau situs web dapat dilakukan secara efektif dengan mengelola widget secara efisien. Salah satu cara untuk mencapai hal ini adalah dengan mengurangi jumlah widget yang ada di halaman blog. Apabila ada widget yang dirasa tidak diperlukan, dapat dihilangkan.

Efek loading ini sangat mudah dibuat, dan bahkan pemula pun dapat dengan mudah memasang efek ini di blog mereka. Apakah Anda tertarik menggunakannya? Berikut tutorialnya.

Cara membuat Efek Loading Blog V3 di Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<link href="https://raw.githack.com/Brando07/sepeser.com/main/loadingv3-santa.css" rel="stylesheet" type="text/css"></link> <script src="https://raw.githack.com/Brando07/sepeser.com/main/loading-www.sepeser.com.js"></script> <div id="loadingHalaman"> </div>

4. Save.

Video Tutorial

Video di atas hanya contoh cara pemasangnya, bukan merupakan tampilan efek loading yang admin bagikan saat ini. Untuk tampilannya kamu bisa melihat demonya dilink di bawah ini.

Penutup

Sebelumnya admin juga pernah membagikan efek loading lainnya di blog, seperti efek loading ringan V2. Mereka juga telah memberikan instruksi untuk membuat versi baru menu efek dropdown dan efek animasi SpongeBob yang berjalan di Blogger.

👉 LIVE DEMO 👈

Sekian tutorial membuat efek loading versi 3 ini di blog, untuk efek blog yang lainnya kamu dapat menelusuri postingan-postingan di blog ini. Terima kasih.

Ndo Andre at Wednesday, September 06, 2023

By Gio Bastian At Saturday, September 02, 2023

Cara membuat Efek Loading Blog sederhana V1 di Blogger

By Gio Bastian At Saturday, September 02, 2023

Ada banyak cara untuk membuat tampilan blog atau websitemu terlihat menarik contohnya adalah dengan membuat efek loading blog sederhana ini. Memang secara umum kecepatan loading atau page speed merujuk pada seberapa cepat konten di suatu website dapat dimuat ketika diakses oleh browser yang digunakan user, loading speed menunjukkan berapa lama waktu yang diperlukan pengunjung untuk membuka sebuah halaman di blog kamu.

Perlu kamu perhatikan juga bahwa lama atau cepatnya loading blog atau website kadang kala berdampak pada banyaknya jumlah pengunjung. Lama waktu loading juga bisa dikurangi dengan mengurangi widget yang terpasang pada blog, atau menambahkan efek loading sebagai penarik perhatian pengunjung. Perlu juga diketahui bahwa loading suatu halaman blog dapat mempengaruhi persepsi pengunjung terhadap blog kamu.

Animasi Loading Blog

Efek Loading Blog Sederhana V1

Jika ada V1 tentu saja ada versi lainnya lagi, kamu dapat mencarinya di blog ini. Animasi efek loading blog ini akan muncul saat halaman blog kamu diload oleh browser atau juga akan muncul saat kamu berpindah halaman dari link satu ke link yang lain di blog kamu. Efek ini sering di pasang saat tidak terlalu memperdulikan kecepatan tapi lebih suka terkesan ke tampilan. Ok berikut cara membuatnya di Blogger.

Disini saya membagikan dua cara, yang pertama adalah memasangnya langsung kedalam template blog, dan yang kedua adalah menambahkannya sebagai widget blog. Oh yah sebelumnya juga admin pernah berbagi cara membuat template kosong juga tentang membuat menu navigasi dropd down dan cara membuat pricing table di Blogger. Ok sobat berikut cara membuatnya:

Cara Membuat Efek Animasi Loading Blog di Blogger

Cara yang pertama yaitu memasukannya ke dalam template Blog:

1. Di Blog Blogger 😀
2. Pilih menu Tema ➔ Edit HTML

Edit HTML Template

3. Di templatemu sebelumnya sudah ada kode external jQuery library, atau bisa gunakan jQuery di bawah ini (kode warna merah kalau sudah ada walau beda versi tidak perlu memasangnya lagi) dan letakan diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <link href="https://cdn.rawgit.com/Brando07/seocips/Html/loading1.css" rel="stylesheet" type="text/css">

4. Selanjutnya letakan kode di bawah ini di atas </body> :

<script src="https://cdn.rawgit.com/Brando07/seocips/newbe/loading1.js"></script>

5. Letakan kode HTML di bawah ini dibawah <body> :

<div id="loadingHalaman"></div>

6. Save tema dan lihat hasilnya.

Cara ke dua menambahkannya sebagai widget

1. Di Blog kamu 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

4. Masukan kode dibawah ini:

<link href="https://cdn.rawgit.com/Brando07/seocips/Html/loading1.css" rel="stylesheet" type="text/css"></link> <script src="https://cdn.rawgit.com/Brando07/seocips/newbe/loading1.js"></script> <div id="loadingHalaman"> </div>

5. Save.

Video

Kalau belum paham cara memasangnya bisa kamu simak video di bawah ini:

👉 LIHAT DEMO 👈

Selain ini masih banyak efek yang bisa digunakan untuk membuat tampilan blog lebih menarik, seperti memasang efek salju, efek gambar, efek daun berjatuhan, efek burung burung terbang dan saat ini adalah efek loading blog sederhana.

Sekian cara membuat efek animasi loading blog di Blogger, kamu bisa mencoba animasi-animasi loading blog lain yang admin bagikan nantinya. Terimakasih.

Gio Bastian at Saturday, September 02, 2023

By Ndo Andre At Tuesday, August 29, 2023

Cara Membuat Efek Loading Blog Ringan V2 di Blogger

By Ndo Andre At Tuesday, August 29, 2023

Widget Efek Loading Blog Sederhana V2. Apakah sobat pernah menemukan blog yang menggunakan efek loading? ingin mencoba menggunakannya juga? Ok sobat, pada kesempatan ini sepeser.com akan berbagi cara membuat efek loading blog sederhana V2 setelah kemarin telah membagikan V1-nya.

Dalam menelusuri halaman blog di dunia maya, kecepatan blog salah satu menjadi hal utama yang perlu diperhatikan. Pengunjung membutuhkan halaman yang bisa diload cepat untuk mendapatkan informasi secepatnya. Semakin lama halaman blog atau website dimuat adapun jika waktu loading lama tanpa efek yang menarik biasanya membuat user kerap bosan dan meninggalkan halaman blog atau situs web tersebut.

Perlu kamu perhatikan bahwa lama atau cepatnya loading blog atau website berdampak pada pengunjung blog. Apabila waktu loading halaman blog atau website terlalu lama, maka mereka akan menilai kamu tidak serius dalam menjalankan blog kamu. Untuk itu, kamu bisa menambah efek loading blog agar proses akses informasi bagi user tidak membosankan tapi justru kelihatan menarik.

Efek loading v2

Efek Loading Blog Sederhana V2

Sebelumnya admin telah berbagi animasi loading blog sederhana V1 nah kesempatan ini juga admin akan berbagi animasi loading blog juga, animasi ini sederhana karna ringan saja, dibuat dengan css dan js yang singkat saja jadi ringan untuk blog.

Admin juga telah berbagi cara membuat animasi efek salju dan daun berjatuhan di blog, dan juga tentang cara membuat efek hover gambar berputar di blog. Ok lanjut, animasi loading ini selain akan muncul setelah pengunjung datang mampir ke blog kamu, juga muncul saat pengunjung berpindah halaman dari halaman yang satu ke halaman yang lain. Berikut cara membuatnya:

Cara Membuat Efek Loading Blog Sederhana V2 di Blogger

1. Di Blog kamu 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<link href="https://raw.githack.com/Brando07/sepeser.com/main/loadingv2.css" rel="stylesheet" type="text/css"></link> <script src="https://raw.githack.com/Brando07/sepeser.com/main/loading-www.sepeser.com.js"></script> <div id="loadingHalaman"> </div>

4. Save.

Video Tutorial + Demo

Kamu dapat mempercepat loading blog dengan mengurangi jumlah widget yang digunakan. Terlalu banyak widget dalam blog bisa mengurangi kecepatan loading halaman blog atau website kamu. Setiap kali suatu halaman dimuat, maka proses pemuatan akan menjadi semakin lama jika widget yang kamu pasang terlalu banyak.

Sekian tutorial membuat efek loading versi lainnya lagi disini, semoga bermanfaat.

Ndo Andre at Tuesday, August 29, 2023