Cara Menciptakan Efek Loading Keren Di Dalam Blog
Memasang Efek Loading Didalam Blog Saat Halaman Dimuat
Ada banyak cara yang dlakukan untuk mempercantik tampilan blog, salah satunya dengan cara memasang imbas preloading atau sering disebut imbas loading.
Efek loading akan bekerja pada dikala halaman blog dimuat. Dan memberi kesan seakan-akan blog yang kita saluran loadingnya sangat lama. Efek loading yang telah kita pasang didalam blog akan hilang sesudah halaman tersebut termuat secara keseluruhan.
Memasang imbas loading dihalaman blog tidak akan kuat terhadap kecepatan loading blog kita, hal tersebut dikarenakan imbas yang dipakai murni memakai CSS dan SVG tanpa menyisipkan gambar.
Ada beberapa pilihan imbas loading yang akan kored id bagikan kali ini, dengan masing-masing aba-aba css dan HTML nya. Makara kalian dapat menentukan sesuai harapan kalian. Oke pribadi saja,
Baca Juga :
Hal pertama yang harus kalian lakukan sebelum memasang imbas loading yang akan saya bagikan kali ini. Ada baiknya kalian melihat dulu versi JQuery didalam template blog yang kalian gunakan biar aba-aba berjalan dengan baik.
Jika Versi JQuery di dalam template kalian sama dengan JQuery Versi dibawah ini, kalian tidak usah menggantinya. Jika berbeda silahkan ganti dengan JQuery Library Versi 1.7.1 dibawah ini
Langkah selanjutnya ialah,
1. Masih di Dashboard Blogger
2. Pilih Tema -> Edit HTML
3. Cari aba-aba </body> atau <!--</body>--></body> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan aba-aba dibawah ini sebelum aba-aba </body> atau <!--</body>--></body>
5. Langkah selanjutnya yaitu menambahkan aba-aba HTML dibawah ini sempurna dibawah aba-aba <body>
6. Kemudian tambahkan aba-aba CSS ini sebelum aba-aba </head> atau </head><!--<head/>-->
7. Lalu, Simpan Tema dan lihat hasilnya.
Untuk pilihan imbas loading lainya, kalian dapat menentukan sendiri imbas loading mana yang kalian suka. Saya sudah sediakan bebrapa pilihan imbas loading keren dibawah
Cara pemasangannya kurang lebih sama dengan langkah diatas, kalian tinggal mengganti HTML dan CSS untuk mengganti atau memakai imbas loading lainya. Tanpa harus menambahkan kembali aba-aba JQuery nya.
Baca Juga :
Kode HTML
Kode CSS
Efek PreLoading Spring Line
Kode HTML
Kode CSS
Efek PreLoading Spinner Ball
Kode HTML
Kode CSS
Efek PreLoading Google Chrome
Kode HTML
Kode CSS
Efek PreLoading Circular
Kode HTML
Kode CSS
Efek PreLoading Moving Dot
Kode HTML
Kode CSS
Jika kalian merasa kurang suka dengan efek-efek loading yang saya bagikan diatas. Silahkan kunjungi sendiri situs penyedia loadingnya di icons8.com/cssload
Demikian Cara Membuat Efek Loading Keren di Dalam Blog. Semoga dapat diterapkan didalam blog kalian Dan terimakasih atas kunjungannya.
Sumber Kode : Arlina Design
Sumber https://www.kored.id/
Ada banyak cara yang dlakukan untuk mempercantik tampilan blog, salah satunya dengan cara memasang imbas preloading atau sering disebut imbas loading.
Efek loading akan bekerja pada dikala halaman blog dimuat. Dan memberi kesan seakan-akan blog yang kita saluran loadingnya sangat lama. Efek loading yang telah kita pasang didalam blog akan hilang sesudah halaman tersebut termuat secara keseluruhan.
Memasang imbas loading dihalaman blog tidak akan kuat terhadap kecepatan loading blog kita, hal tersebut dikarenakan imbas yang dipakai murni memakai CSS dan SVG tanpa menyisipkan gambar.
Ada beberapa pilihan imbas loading yang akan kored id bagikan kali ini, dengan masing-masing aba-aba css dan HTML nya. Makara kalian dapat menentukan sesuai harapan kalian. Oke pribadi saja,
Baca Juga :
- Aplikasi Perekam Layar Android Terbaik 2019. Tanpa Watermark
- Cara Membuat Notifikasi Cookies Pada Blog Dengan Cookie Consent
Hal pertama yang harus kalian lakukan sebelum memasang imbas loading yang akan saya bagikan kali ini. Ada baiknya kalian melihat dulu versi JQuery didalam template blog yang kalian gunakan biar aba-aba berjalan dengan baik.
Jika Versi JQuery di dalam template kalian sama dengan JQuery Versi dibawah ini, kalian tidak usah menggantinya. Jika berbeda silahkan ganti dengan JQuery Library Versi 1.7.1 dibawah ini
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Langkah selanjutnya ialah,
1. Masih di Dashboard Blogger
2. Pilih Tema -> Edit HTML
3. Cari aba-aba </body> atau <!--</body>--></body> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan aba-aba dibawah ini sebelum aba-aba </body> atau <!--</body>--></body>
<script type='text/javascript'> //<![CDATA[ // Preloader $(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})}); //]]> </script>5. Langkah selanjutnya yaitu menambahkan aba-aba HTML dibawah ini sempurna dibawah aba-aba <body>
<div id='preloader'> <svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'> <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/> </svg> </div>6. Kemudian tambahkan aba-aba CSS ini sebelum aba-aba </head> atau </head><!--<head/>-->
<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:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite} @keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}} .path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite} @keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}} @keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}} </style>7. Lalu, Simpan Tema dan lihat hasilnya.
Untuk pilihan imbas loading lainya, kalian dapat menentukan sendiri imbas loading mana yang kalian suka. Saya sudah sediakan bebrapa pilihan imbas loading keren dibawah
Cara pemasangannya kurang lebih sama dengan langkah diatas, kalian tinggal mengganti HTML dan CSS untuk mengganti atau memakai imbas loading lainya. Tanpa harus menambahkan kembali aba-aba JQuery nya.
Baca Juga :
- Cara Memasang Web Push Notifikasi di Blogger
- Cara Praktis Membuat Effect Double Click To Select Dengan Tag Selection 'kbd
Kode HTML
<div id='preloader'> <div class='spinner'> <ul class='loading reversed'> <li></li> <li></li> <li></li> </ul> </div> </div>Kode CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite} .loading.reversed li:nth-child(1n){animation-delay:0s} .loading.reversed li:nth-child(2n){animation-delay:0.2s} .loading.reversed li:nth-child(3n){animation-delay:0.4s} .loading li{height:0;position:absolute;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b8ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite} .loading li:nth-child(1n){left:-20px;animation-delay:0s} .loading li:nth-child(2n){left:0;animation-delay:0.2s} .loading li:nth-child(3n){left:20px;animation-delay:0.4s} @keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b8ccd}} </style>Efek PreLoading Spring Line
Kode HTML
<div id='preloader'> <div id='container' class='spinner'> <div id='loader'></div> </div> </div>Kode CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 17px);left:calc(50% - 35px)} #loader{width:70px;height:70px;border-style:solid;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)} @keyframes rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}} </style>Efek PreLoading Spinner Ball
Kode HTML
<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>Kode CSS
<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:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)} [class^="ball-"]{position:absolute;display:block;left:30px;width:12px;height:12px;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)} </style>Efek PreLoading Google Chrome
Kode HTML
<div id='preloader'> <div class='spinner'> <div class='loader tri'></div> <div class='loader tri2'></div> <div class='loader tri3'></div> <div class='loader tri4'></div> <div class='loader circ'></div> <div class='loader circ2'></div> </div> </div>Kode CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#ecf0f1;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px} .tri{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b4ff;width:0;z-index:2} .tri2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde15;width:0;z-index:1} .tri3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da158;border-bottom:0 solid transparent;width:0;z-index:1} .tri4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea343f;border-bottom:0 solid transparent;width:0;z-index:2} .circ{border:30px solid rgba(255,255,255,0.1)} .circ2{border:25px solid #ffffff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);margin-top:30px;z-index:90} @-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}} </style>Efek PreLoading Circular
Kode HTML
<div id='preloader'> <div id='loader'> <span class='spinner'></span> </div> </div>Kode CSS
<style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{position:absolute;top:50%;left:50%;margin:-20px -50px;height:30px;width:30px;margin:auto;border:5px solid rgba(60,60,180,0.45);border-top:5px solid rgb(60,60,180);border-radius:50%;animation:rotate 1s infinite linear} @keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} </style>Efek PreLoading Moving Dot
Kode HTML
<div id='preloader'> <div class='spinner'> <div class='loader'> <div class='moving-dot'></div> <div class='moving-dot'></div> <div class='moving-dot'></div> <div class='moving-dot'></div> <div class='moving-dot'></div> <div class='moving-dot'></div> </div> </div> </div>Kode CSS
<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:0;left:0;right:0;bottom:0;margin:auto;text-align:center} .loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto} .moving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white} .moving-dot:first-child{background-color:#8cc759;animation-delay:0.5s} .moving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s} .moving-dot:nth-child(3){background-color:#ef5d74;animation-delay:0.3s} .moving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s} .moving-dot:nth-child(5){background-color:#60beeb;animation-delay:0.1s} .moving-dot:nth-child(6){background-color:#fbef5a;animation-delay:0s} @keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}} </style>Jika kalian merasa kurang suka dengan efek-efek loading yang saya bagikan diatas. Silahkan kunjungi sendiri situs penyedia loadingnya di icons8.com/cssload
Demikian Cara Membuat Efek Loading Keren di Dalam Blog. Semoga dapat diterapkan didalam blog kalian Dan terimakasih atas kunjungannya.
Sumber Kode : Arlina Design
Sumber https://www.kored.id/
