bergabung di grup telegram kami

membuat preloader dengan javascript murni di blogger

cara membuat preloader dengan javascript murni di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat preloader / preloading dengan javascript murni di blogger.

widget ini di reguest oleh Agus melalui komentar di salah satu artikel di blog ini, buat kalian yang mau reguest tutorial maupun widget silakan bisa komentar ke salah satu artikel saya maupun halaman forum dan email, jika bagus atau menarik akan saya buatkan di masa mendatang. dan perlu di ingat saya tidak terima reguestan dari kalian yang mengcopas artikel saya dan membagikan source code saya tanpa izin!

reguest oleh Agus
reguest oleh Agus

kebanyakan tutorial serupa yang beredar di internet menggunakan jquery, memang tidak ada salahnya menggunakan jquery, namun jika blog kalian yang awalnya tidak menggunakan jquery sangat di sayangkan saja jika hanya ingin memasang efek preloader / preloading harus memasang js jquery.

kebanyakan orang menggunakan jquery biasanya dengan alasan lebih mudah di gunakan dan penulisan kode lebih pendek / singkat, sedangkan javascript murni memerlukan penulisan kode yang lebih panjang, namun jika hanya ingin membuat efek preloader / preloading tidaklah memerlukan banyak kode sehingga kita bisa menggunakan javascript murni akan lebih baik.

untuk efek loadingnya saya menggunakan icon svg, di sini saya juga menyediakan 4 icon svg untuk kalian pilih jika di rasa style iconnya tidak sesuai selera kalian.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Preloader / Preloading Dengan Javascript Murni Di Blogger

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

/* preloader by wendy code */
.wc-pre-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9999999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-animation: fade 3s forwards;-moz-animation: fade 3s forwards;-o-animation: fade 3s forwards;animation: fade 3s forwards;}
.wc-pre-wrap .wc-pre-start{position:relative;top:50%;left:50%;padding:30px;display:flex;background:transparent;flex-direction:column;align-items:center;transform: translate(-50% , -50%) scale(0.97);transition:all 0.3s ease}
.wc-pre-wrap .wc-pre-start svg{width:100px;height:100px;margin:auto;display:inline-block}
@-webkit-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-o-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}

lanjut meletakkan html ini tepat di bawah kode <body> atau cari serupa <body karena biasanya terdapat class dan id di dalam tag body.

<div class='wc-pre-wrap'>
<div class='wc-pre-start'>
<svg enable-background='new 0 0 0 0' id='L9' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'> <path d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50' fill='#fff'> <animateTransform attributeName='transform' attributeType='XML' dur='0.6s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/></path></svg>
</div>  
</div>

berikut saya sediakan 4 icon yang dapat di gunakan, silakan ganti svg icon yang saya tandai di atas

<svg version='1.1' id='L4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <circle fill='#fff' stroke='none' cx='6' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.1'/> </circle> <circle fill='#fff' stroke='none' cx='26' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.2'/> </circle> <circle fill='#fff' stroke='none' cx='46' cy='50' r='6'> <animate attributeName='opacity' dur='0.6s' values='0;1;0' repeatCount='indefinite' to='360 25 25' begin='0.3'/></circle></svg>
<svg version='1.1' id='L5' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <circle fill='#fff' stroke='none' cx='6' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 15 ; 0 -15; 0 15' repeatCount='indefinite' to='360 25 25' begin='0.1'/> </circle> <circle fill='#fff' stroke='none' cx='30' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 10 ; 0 -10; 0 10' repeatCount='indefinite' to='360 25 25' begin='0.2'/> </circle> <circle fill='#fff' stroke='none' cx='54' cy='50' r='6'> <animateTransform attributeName='transform' dur='0.6s' type='translate' values='0 5 ; 0 -5; 0 5' repeatCount='indefinite' to='360 25 25' begin='0.3'/></circle></svg>
<svg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'> <rect x='20' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> <rect x='30' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.2s' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> <rect x='40' y='50' width='4' height='10' fill='#fff'> <animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 20; 0 0' begin='0.4s' dur='0.6s' repeatCount='indefinite' to='360 25 25' /> </rect> </svg>
<svg enable-background='new 0 0 0 0' id='L9' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'> <path d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50' fill='#fff'> <animateTransform attributeName='transform' attributeType='XML' dur='0.6s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/></path></svg>

dan terakhir salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah jangan lupa untuk klik simpan.

<script>
//<![CDATA[
//preloader by wendy code
document.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
document.querySelector('.wc-pre-wrap').style.display ='none';
}, 3000);
});
//]]> 
</script>

ok jadi sekian cara membuat preloader dengan javascript murni di blogger yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :
tutorial blogger

16 komentar



image quote pre code
  1. https://drive.google.com/file/d/1lNDLalJlnfCz4Sru1YiEWz78YVmwDm3S/view?usp=drivesdk

    How to create this notification bro
    1. use the correct image format like jpg or png and use the tool above the comments if you want to post an image
  2. makasih mas request nya udah di respon
    1. Siap mas sama2 ya
  3. Mas request lagi dong, buat cookies dengan javascript murni. Bisa ga
    1. Blogger tidak perlu menggunakan cookies costom karena memang sudah ada bawaan blogger, jika ingin melihatnya bisa menambahkan ?gl=fr di akhir url

      Ini contohnya, jangan buat lagi yang ada jadi double tertimpa gitu muncuk barengan cookies nya
      https://blog.choipanwendy.com?gl=fr
  4. any website for svg icon which you use
  5. Ngaruh ke speed blog ga mas?
    1. Tidak berasa mas, nnti coba aja hbs pasang cek speednya
    2. Ok
    3. Kalo mau tampil di post doang gimana mas?
    4. Htmlnya kasi tag conditional mas
      <b:if cond='data:view.isPost'> </b:if>
  6. Mas pas dipasang blog nya malah tidak bisa dipencet
    1. pastikan mengikuti tutorialnya dengan benar ya mas, jika masih ada masalah bisa kirimkan url blognya biar saya cek
  7. Thnks work kang Wendy
    1. sama2 mas
© 2020 - Wendy Code

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english