Pada kali ini kami akan memberikan sebuah tutorial bagaimana cara memasang animasi preloader responsive dan keren pada blog anda, namun sebelumnya mengenai apa sih gunanya preloader itu bagi blog anda ?
Preloader merupakan sebuah fitur sederhana dalam meload sebuah halaman guna memberikan waktu jeda terhadap server untuk mersepon data dari sebuah halaman itu.
Tak hanya itu saja guna nya preloader juga banyak digunakan sebagai animasi untuk mempercantik pada blog sobat. nah tak perlu berlama-lama lagi berikut ini cara memasang animasi preloader keren di blogger.
Note : cara ini berkerja apabila template sobat sudah menggunakan JQuery Ajax di template sobat contohnya adalah kode di bawah ini :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
Jika Template blog sobat belum memasang kode tersebut silahkan tambahkan diatas kode </head> atau </head> , jika sudah ada lewati saja tahapan ini.
Step selanjutnya :
1. Masuk Blogger Sobat
2. Tema > Edit Tema
3. Lalu Cari Kode </head> atau </head> dan paste kode dibawah ini tepat diatas kode tersebut :
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
@media screen and (max-width:800px){.spinner{left:43%}}
</style>
4. Kemudian Cari Kode <body> atau <body> lalu pastekan kode dibawah ini tepat dibawah kode tersebut :
<div id='preloader'>
<div class='spinner'>
<span class='ball-1'></span>
<span class='ball-2'></span>
<span class='ball-3'></span>
<span class='ball-4'></span>
<span class='ball-5'></span>
<span class='ball-6'></span>
<span class='ball-7'></span>
<span class='ball-8'></span>
</div>
</div>
5. Lalu Cari lagi Kode </body> atau </body> dan paste kode dibawah ini tepat di atas kode tersebut :
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
6. Simpan template anda.
Dan hasilnya adalah sebagai berikut ini dibawah ini,
Bagaimana cantik bukan ?, terimakasih telah berkunjung pada situs kami semoga dapat memberikan manfaat untuk anda semua lalu jangan lupa jika anda menyukai artikel ini silahkan bagikan ke media sosial kalian guna membangun situs ini agar dapat memberikan informasi lainnya yang lebih menarik. salam lewatinaja.com
Related Posts:
- Rekomendasi Aplikasi Pembuat Brosur Terbaik Aplikasi pembuat brosur terbaik – Tahukah anda bahwa ternyata proses pembuatan brosur di masa kini jauh lebih praktis dibandingkan proses pembuatan brosur beberapa tahun yang lalu. Beberapa tahun yang lalu…
- Cara Memasang Lazy Load Iklan Otomatis Adsense Di Blogger Memasang Lazy Load Adsense – Pada kesempatan kali ini saya akan membagikan sebuah script untuk mempercepat loading blog kalian menggunakan lazy load adsense khususnya untuk iklan otomatis, menggunakan script ini…
- Cara Membuat Gradient Color Bergerak Di Header Blog Pada kesempatan kali ini saya akan membagikan tentang cara membuat gradient color di header blog sobat, pada umumnya warna gradiasi pada header blog memanglah sangat menarik bagi sebagian pengunjung. tentu…
- Cara Memasang Script Anti Copy-Paste Pada Template Blogger Memasang Script Anti Copy Paste pada template untuk mencegah plagiarisme, Sebelumnya saya sudah pernah membahas mengenai cara melindungi konten dengan sumber link otomatis menggunakan javascript, namun rasanya itu belum cukup…
- Cara Mencari Filter Instagram Terbaru dan Terlengkap Cara mencari filter Instagram terbaru dan terlengkap – Ada banyak sekali alasan mengapa masyarakat Indonesia suka bermain atau Berselancar Di aplikasi Instagram. Salah satunya adalah dikarenakan banyak sekali filter-filter menarik…
- 3 Cara Cek ICCID Kartu 3 Cara Cek ICCID Kartu 3 – Ada yang pernah mendengar istilah ini sebelumnya? Sebagian besar mungkin pada belum pernah ya. Jadi, ICCID ini adalah sebuah nomor yang terdiri dari 13…
- Cara Memasang Script Adblock Killer Pada Blog Seperti yang kita ketahui bahwasannya para pengguna gadget baik itu laptop maupun handphone pintar sudah banyak sekali yang menggunakan ekstensi maupun browser untuk memblokir iklan yang ada pada blog kita.hal…
- Cara Mengatasi Kode MMI Tidak Valid Cara Mengatasi Kode MMI Tidak Valid – Ketika sedang melakukan pengecekan terhadap sisa jumlah pulsa dan juga kuota, mungkin anda pernah menemukan kasus. Untuk kasus yang paling populer adalah ‘kode…
- 4 Peluang Usaha Yang Sangat Menjanjikan Di Tahun 2021 Selamat tahun baru 2021, berbincang mengenai tahun baru pastinya sobat menginginkan perubahan atau pencapaian yang baru pada tahun sebelumnya contohnya saja ingin menjadi seorang pengusaha agar sukses pada tahun ini.Menjadi…
- Rekomendasi Aplikasi Menggambar Terbaik Rekomendasi Aplikasi Menggambar Terbaik – Beberapa tahun lalu, mungkin hampir semua orang menggambarnya di atas kertas. Ia nggak sih? Nah kabar baiknya, sekarang udah beda. Karena ponsel ponsel canggih, sudah…
- √ Cara Membuat Iklan Popunder Seperti Pop Ads Di Blog Cara Membuat Iklan Popunder di Blog, Pada artikel kali ini saya akan memberikan sebuah script untuk membuat popunder iklan yang akan membuka browser baru lalu menuju link yang ada di…
- Rekomendasi Aplikasi Pengubah Suara Terbaik Rekomendasi Aplikasi Pengubah Suara Terbaik – Pengen ngonten, tapi nggak percaya diri dengan suara sendiri? Tenang, karena sudah bisa diatasi dengan menggunakan aplikasi pengubah suara terbaik loh. Di mana, keberadaan…
- Cara Membuat Sitemap Statis Di Halaman Blog Cara membuat sitemap halaman dengan tampilan seperti blog arlinadzgn dengan mudah, namun sebelumnya saya sudah membahas mengenai cara membuat sitemap dengan tampilan yang responsive di blogger,Mengingatkan kembali bahwa sitemaps ini…
- Cara Menghilangkan Scroll Bar Di Blog Menggunakan CSS Cara Menghilangkan Scroll Bar Pada prinsipnya scroll bar merupakan alat bantu dalam menggeser tampilan secara horizontal atau vertikal di blog namun nyatanya hal itu sudah hampir jarang digunakan lagi dengan…
- 4 Aplikasi Android Untuk Mengedit Foto Layaknya Anime Aplikasi android untuk edit foto seperti anime – pada kesempatan kali ini saya akan membagikan sebuah tips untuk aplikasi android yang dapat merubah foto menjadi layak nya anime, seperti yang…
- Cara Menghilangkan Link ?m=1 dan ?m=0 Pada Blog Menghilangkan Link Berakhiran ?m=1 dan ?m=0 di URL pada blog – Sebelum itu mari kita bahas mengenai akhiran kode tersebut terlebih dahulu, Kode akhiran tersebut merupakan kode yang mendeskripsikan pengguna…
- √ Cara Jitu Melewati Internet Positif Di PC Atau Android Berbincang mengenai Internet Positif merupakan suatu kebijakan pemerintah indonesia dalam menangani situs-situs yang dianggap dalam kategori, pornografi, spam, phising maupun hal lainnya yang dianggap berbahaya oleh kominfo, secara otomatis situs-situs…
- Rekomendasi Aplikasi Efek Kamera Bokeh Terbaik Rekomendasi Aplikasi Efek Kamera Bokeh Terbaik – Beberapa tahun terakhir, efek kamera bokeh menjadi trend yang cukup ramai menjadi perbincangan di berbagai kalangan. Ia kan? Dan kabar baiknya, saat ini…
- Cara Meningkatkan Penghasilan Adsense Untuk Blog Cara Meningkatkan Penghasilan Google Adsense Untuk Blog – Menghasilkan uang dari sebuah blog memang sudah tak asing lagi bagi para blogger di internet, di era dahulu menjadi seorang blogger hanyalah…
- Panduan Instalasi Aplikasi Dapodik Versi 2021.C Panduan Instalasi Aplikasi Data Pokok Pendidikan (Dapodik) Versi 2021.C – Direktorat Jenderal Pendidikan Anak Usia Dini, Pendidikan Dasar dan Pendidikan Menengah Kementerian Pendidikan dan Kebudayaan bertugas menyelenggarakan perumusan dan pelaksanaan…
- Cara Membuat Blog Safelink Klik 2x Dengan Mudah Banyak dari kita yang ingin membuat blogger safelink sendiri guna untuk mendapatkan sebuah profit dari iklan adsense, apalagi jika sebelumnya kita mempunyai sebuah blog dengan niche download dan para pengunjung…
- Kode Redeem Game Free Fire Terbaru Tahun 2021 Kode Redeem Game Free Fire (FF) Tahun 2021 – Sebagai salah satu game battle royale terlaris selain PUBG ini selaku penerbit game ini yaitu Garena sangat gencar sekali membagikan kode…
- Template Blog Untuk Streaming Film Dan Download Video Gratis Pada postingan kali ini saya akan membagikan sebuah template blog streaming premium dengan tampilan yang super ringan dan tentunya SEO Friendly serta gratis untuk sobat kalian semua yang ingin membuat…
- Cara Melihat ICCID Kartu 3, Mudah Banget Cara Melihat ICCID Kartu 3 – Untuk yang menggunakan kartu tri yang prabayar, anda bisa melakukan dua model atau metode untuk verifikasi keamanan. Yang pertama adalah dengan menggunakan sms, dan…
- Cara Membuat Tabel Responsive di Blog Cara Membuat Tabel Responsive di Blog – Bagi seorang blogger, mengetahui bagaimana cara membuat tabel responsive merupakan salah satu hal yang sangat penting untuk dikuasai. Terlebih lagi bagi anda yang…
- Rekomendasi Situs Baca Komik Legal Terbaik Rekomendasi situs Baca Komik Legal Terbaik – Untuk saat ini, tampaknya masih banyak yang suka baca komik ya. Dan ini merupakan sesuatu yang sangat wajar. Karena membaca komik akan membuat…
- Cara Membuat Kotak Parse HTML Pada Halaman Blog Membuat Kotak Parse Sederhana Pada Halaman Di Blogger – Pada kesempatan kali ini mimin akan membagikan sebuah script sederhana yang jika di lewatkan maka mubazir rasanya, tools ini sebenarnya sangat…
Lewatinaja.com Kumpulan Informasi Menarik Terbaru
