Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat dan menampilkan nldblog preloader muncul saat di klik atau lebih istilah lainnya menampilkan animasi preloader yang mirip webiste Nld blog saat di klik
Info: Oke sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Preloader
Pada postingan sebelumnya admin suda membahas bagaimana caranya membuat nldblog preloader di blogger atau lebih tepatnya preloader yang mirip seperti nldb blog, mungkin kamu bisa mempelajarinya lebih lanjut mengenai apa itu Nld Blog preloader
Nldblog preloader
Tampilan dari animasi preloader tersebut adalah tampilan nldblog preloader yang muncul saat di klik dan bukan saat halaman artikel di refresh, dan bagi kamu yang tidak mengetahui mengenai nldblog preloader? bahwa kata nld blog preloader berasal dari preloader yang di gunakan oleh website Nld blog asal negara vietnam
Muncul saat di klik
Nah nantinya tampilan animasi preloader tersebut hanya muncul saat di klik saja atau dalam artian lain pengunjung website anda harus mengklik sebuah tombol yang sudah di kombinasikan dengan script preloder nya agar tampilan nld blog preloader tersebut bisa muncul
Contoh Tampilan
Jika kamu penasaran dengan contoh tampilan dari nldblog preloader yang muncul saat di klik tersebut, silahkan periksa menggunakan tombol di bawah ini ya
Periksa
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak ☺️
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana caranya membuat nldblog preloader di sertai Animasi di blogger, silahkan baca dan ikuti setiap arahan yang bakal admin jabarkan di bawah ini
Kode CSS
Langkah pertama seperti biasanya silahkan salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>
.rahPrload35:before{font-weight:800;position:absolute;right:6px;top:9px;font-size:12px;color:rgba(255,255,255,.8);width:auto;text-align:center;align-items:center;justify-content:center;padding:5px;background-color:#323232;border-radius:5px;}.rahPrload35:before{content:'Created with $mileY';}
.rahPrload35{direction:ltr;align-items:center;justify-content:center;display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#fefefe;overflow:hidden;z-index:1000;transition:all .8s ease;visibility:visible;opacity:1}
.rahPrload35.rah{display:flex}
.rahPrload35.mat{visibility:hidden;opacity:0}
.rahPrload35 .lgcrcrle{display:flex;align-items:center;justify-content:center;position:relative;width:76px;height:76px;background:#e0ac33;border-radius:200px;-webkit-animation:preload-shadow 1s infinite;-moz-animation:preload-shadow 1s infinite;-ms-animation:preload-shadow 1s infinite;animation:preload-shadow 1s infinite}
.rahPrload35 .lgcrcrle svg{width:40px;height:40px}@-webkit-keyframes preload-shadow {
0%{box-shadow:0 0 0 0 rgb(224,172,51,0.3);-webkit-transition:box-shadow .3s ease-in-out}
100%{box-shadow:0 0 0 30px transparent;-webkit-transform:translate3d(0,0,0);-webkit-transition:box-shadow .4s ease-in-out}}@-moz-keyframes preload-shadow {
0%{box-shadow:0 0 0 0 rgb(224,172,51,0.3);-moz-transition:box-shadow .3s ease-in-out}
100%{box-shadow:0 0 0 30px transparent;-moz-transform:translate3d(0,0,0);-moz-transition:box-shadow .4s ease-in-out}}@keyframes preload-shadow {
0%{box-shadow:0 0 0 0 rgb(224,172,51,0.3);-webkit-transition:box-shadow .3s ease-in-out;-moz-transition:box-shadow .3s ease-in-out;transition:box-shadow .3s ease-in-out}
100%{box-shadow:0 0 0 30px transparent;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:box-shadow .4s ease-in-out;-moz-transition:box-shadow .4s ease-in-out;transition:box-shadow .4s ease-in-out}}
Info: Atau sobat bisa menggunakan kode <style> untuk meletakkan kode CSS di atas
Kode HTML/javascript
Langkah selanjutnya kamu bisa menyalin lagi kode html di bawah ini kemudian kamu bisa meletakkan nya di bawah kode <body>
<div class='rahPrload35' id='rahPrload35'>
<div class='lgcrcrle'>
<svg viewBox='0 0 57.7 57.55' xmlns='http://www.w3.org/2000/svg'>
<path d='M43.35,14.24a4.38,4.38,0,1,0,0-6.19A4.38,4.38,0,0,0,43.35,14.24Z' fill='#000000'></path>
<path d='M27.05,24.36,7.93,43.47a4.38,4.38,0,0,0,6.19,6.19l8.08-8.08a1.71,1.71,0,0,1,2.23,2.58l-5.91,5.92a4.37,4.37,0,0,0,6.18,6.19L41.19,39.78a1.7,1.7,0,0,1,2.41,2.41l-1,1a4.38,4.38,0,1,0,6.19,6.19l6.91-6.91a4.38,4.38,0,0,0-6.19-6.19l-1,1a1.7,1.7,0,1,1-2.41-2.4L56.41,24.56a4.37,4.37,0,0,0-6.18-6.19l-20.9,20.9a1.73,1.73,0,0,1-2.43,0A1.7,1.7,0,0,1,26.74,37L40,23.74a4.37,4.37,0,1,0-6.19-6.18l-2.51,2.51a1.7,1.7,0,0,1-2.06-.26,1.72,1.72,0,0,1,0-2.42l9.92-9.92A4.38,4.38,0,0,0,33,1.28L16.51,17.77a1.7,1.7,0,0,1-2.41-2.41l4.63-4.63a4.37,4.37,0,0,0-6.19-6.18L2,15.07A4.37,4.37,0,0,0,8.2,21.26l1-1a1.7,1.7,0,1,1,2.4,2.41L1.28,33a4.38,4.38,0,0,0,6.19,6.19l16.9-16.9a1.73,1.73,0,0,1,2.42,0A1.7,1.7,0,0,1,27.05,24.36Z' fill='#ffffff'></path>
</svg>
</div>
</div>
<script>/*<![CDATA[*/
var _0xc335=["\x23\x72\x61\x68\x50\x72\x6C\x6F\x61\x64\x33\x35","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72\x61\x68","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x63\x6C\x69\x63\x6B","\x72\x65\x6D\x6F\x76\x65","\x76\x69\x62\x72\x61\x74\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72"];function rahPrload35(){var rahPrload35=document[_0xc335[1]](_0xc335[0]);rahPrload35[_0xc335[4]][_0xc335[3]](_0xc335[2]);document[_0xc335[8]](_0xc335[5],function(){setTimeout(function(){rahPrload35[_0xc335[4]][_0xc335[6]](_0xc335[2])},2000);if(_0xc335[7] in navigator){navigator[_0xc335[7]]([50])}})}
/*]]>*/</script>
Info: Kode HTML dan Javascript di atas jangan di edit entar tampilan preloader nya tidak berfungsi
Cara penggunaan
Untuk memfungsikan preloader nldblog preloader tersebut silahkan gunakan fungsi onclick='rahPrload35()' pada setiap tombol yang di inginkan untuk menampilkan preloader secara manual, jika bingung bagaimana menerapkannya pada tombol, silahkan periksa pada contoh kode berikut ini
<div class='tombol' onclick='rahPrload35'>
<!-- svg -->
</div>
Info: Tambahkan sendiri kode onclick='rahPrload35()' pada setiap tombol yang anda inginkan semisal SVG dan lain sebaginya, semoga bermanfaat
