Menambahkan Widget Neon Preloader di Blogger (Loading RGB Keren)

Wedget neon preloader atau loading rgb di blogger

Blogger merupakan platform yang sangat fleksibel karena memungkinkan pengguna untuk melakukan berbagai kustomisasi tampilan sesuai kebutuhan. Salah satu fitur yang cukup populer adalah penambahan efek loading atau preloader, termasuk dengan gaya neon RGB yang terlihat modern dan menarik.

Dengan adanya efek neon preloader ini, blog akan menampilkan animasi loading saat halaman sedang diproses sebelum konten utama muncul. Hal ini tidak hanya memberikan kesan visual yang lebih profesional, tetapi juga membuat pengalaman pengunjung terasa lebih interaktif dan tidak membosankan saat menunggu halaman terbuka.

Pada artikel ini, kita akan membahas cara membuat dan menambahkan widget neon preloader di Blogger dengan metode yang ringan, aman digunakan, serta tetap memperhatikan aspek SEO agar tidak mengganggu performa maupun kecepatan loading blog.

Apa Itu Neon Preloader?

Neon preloader adalah animasi loading yang muncul sebelum halaman blog selesai dimuat. Biasanya berbentuk efek cahaya neon atau RGB yang bergerak.

Fungsi utama dari widget neon preloader di Blogger adalah memberikan pengalaman visual yang lebih baik kepada pengunjung saat halaman sedang dimuat. Efek ini membantu menciptakan kesan bahwa blog sedang memproses konten dengan lebih interaktif dan tidak kosong saat loading.

Fungsinya:

• Memberikan efek loading yang lebih menarik dan modern
• Meningkatkan tampilan blog agar terlihat lebih profesional
• Meningkatkan kenyamanan dan pengalaman pengguna saat mengakses halaman

Kelebihan Menggunakan Preloader

Selain berfungsi sebagai animasi loading, penggunaan preloader juga memiliki beberapa kelebihan yang dapat meningkatkan kualitas tampilan blog secara keseluruhan.

• Tampilan blog menjadi lebih modern dan tidak terlihat kaku
• Memberikan kesan website yang lebih profesional dan terawat
• Menyamarkan proses loading agar pengunjung tidak melihat halaman kosong
• Dapat dikustomisasi sesuai tema, warna, dan identitas blog

Cara Memasang Widget Neon Preloader di Blogger

• 1. Masuk ke Dashboard Blogger

  Login ke akun Blogger kamu, lalu pilih blog yang ingin kamu edit atau pasang widget neon preloader.

• 2. Masuk ke Menu Theme

  Pilih menu Theme kemudian klik Edit HTML untuk membuka kode template blog kamu.

• 3. Cari Tag Body

  Gunakan fitur pencarian dengan menekan CTRL + F lalu ketik:

  <body>

  Setelah ketemu, kamu akan menambahkan kode widget tepat di bawah tag tersebut.

4. Tambahkan Kode Preloader

  <!--[ HTML and Javascript: Neon Lighting ]-->
<div class='rahLght'/>
<script>/*<![CDATA[*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 1=i;9 j(){8 a=[\'Q:0%\\m\',\'R\',\'S-T\',\'U\\V\',\'n{0%{W\',\'X\',\'Y-Z\',\'10:0;l\',\'t:\\B\\B;11\',\'12:0;13\',\'w:o%\\m\',\'14:0%\\2\',\'15{16\',\'17\',\'.h\',\'7}\\2@-18\',\'C,\\2.r\',\'\\2#19,\\2\',\':1a{1b\',\'w:1c\',\';1d:1e;\',\'1f:D;f\',\'s\\1g\',\'n:1h\',\'1i\',\'E.1j\',\'1k\',\'1l{0\',\'1m:1n;1o\',\'1p\',\'1q\',\'50%}}\',\'r\\1r\',\'1s\',\'1t-1u\',\'1v/1w\',\'%}50%{1x\',\'32);1y\',\'1z\',\'-1A:\',\'#1B,#4\',\'1C\',\'1D:1E\',\'1F:o%\',\';1G:.\',\'1H,\\2#1I\',\'1J\',\'\\2.h:\',\'1K\',\'1L:1M\',\',\\2#1N,\',\'1O\',\'l::C,\',\'1P-1Q\',\'1R-1S\',\'1T%;-1U\',\'1V:1W\',\';1X\',\'1Y:l\',\'%{1Z\',\'20-21\',\'E::22\',\'%}o%{23\',\'0%\\m%}}@k\',\'(D)}\\2.r\',\'0%{24\',\'25\',\'w\\F\\26\',\'y:27;28\',\'29,\\2#2a\',\'n\\F\\2b\',\'2c\',\'2d\',\'2e\',\'2f\',\'n:0%\\m%}5\',\'2g\',\'\\2.h.\',\'2h-2i:\',\'r{2j\',\'l\\2k\\2l}\',\'2m\',\'2n\',\'t-2o\',\'2p\',\'2q:o%\',\'e;2r\',\'t:0;2s\',\'g,\\2#2t\',\'G\',\'2u:0;2v\',\'2w\',\'2x(-2y\',\'2z:2A;\',\'2B,\\2#31\',\'2C\',\'2D\\2E\',\'2F\',\'H::2G\',\'\\m%}o%{\',\'2H-2I\',\'2J\',\'H\',\'2K\',\'I\',\'2L\',\':2M;z-2N\',\'.h::\'];j=9(){p a};p j()}9 i(d,e){8 f=j();p i=9(a,b){a=a-(-2O+2P+-2Q*-2R);8 c=f[a];p c},i(d,e)}(9(a,b){8 c=i,q=a();2S(!![]){2T{8 d=3(c(2U))/(-2V*-x+2W*2X+-2Y)+-3(c(2Z))/(30*-33+34+35*36)*(3(c(37))/(-38*6+39+3a*J))+3(c(3b))/(3c*K+6*-3d+L*-3e)*(3(c(3f))/(-6*-3g+3h+J*-3i))+3(c(3j))/(-3k+3l+-3m)*(-3(c(3n))/(-3o+-3p+6*3q))+3(c(3r))/(3s*6+x*-3t+-3u)+3(c(3v))/(-x*3w+-3x*6+-3y*-3z)*(-3(c(3A))/(-3B*-3C+3D+6*-3E))+3(c(3F))/(6*-3G+-L*3H+-6*-3I);3J(d===b)3K;3L q[\'M\'](q[\'N\']())}3M(3N){q[\'M\'](q[\'N\']())}}}(j,3O*3P+3Q*6+3R));8 h=u[1(3S)+1(3T)](1(3U));h[1(O)][1(3V)](1(P)),u[1(3W)+1(3X)](1(3Y)+1(3Z),9(){8 d=1,A={\'I\':d(P),\'G\':9(a,b,c){p a(b,c)}};A[d(K)](40,9(){8 a=d;h[a(O)][a(41)](A[a(42)])},-43+44+45)});46 v=u[1(47)+1(48)](1(49));v[1(4a)]=1(4b),v[1(4c)+\'t\']=1(4d)+1(4e)+1(4f)+1(4g)+1(4h)+1(4i)+1(4j)+1(4k)+1(4l)+1(4m)+1(4n)+1(4o)+1(4p)+1(4q)+1(4r)+1(4s)+1(4t)+1(4u)+1(4v)+1(4w)+1(4x)+1(4y)+1(4z)+1(4A)+1(4B)+1(4C)+1(4D)+1(4E)+1(4F)+1(4G)+1(4H)+1(4I)+1(4J)+1(4K)+1(4L)+1(4M)+1(4N)+1(4O)+1(4P)+1(4Q)+1(4R)+1(4S)+1(4T)+1(4U)+1(4V)+1(4W)+1(4X)+1(4Y)+1(4Z)+1(51)+1(52)+1(53)+1(54)+1(55)+1(56)+1(57)+1(58)+1(59)+1(5a)+1(5b)+1(5c)+1(5d)+1(5e)+1(5f)+1(5g)+1(5h)+1(5i)+1(5j)+1(5k)+1(5l)+1(5m)+1(5n)+1(5o)+1(5p)+1(5q)+1(5r),u[1(5s)][1(5t)+\'d\'](v);',62,340,'|_0x37fdc8|x20|parseInt|||0x1||var|function||||||||rahLght|_0x1a92|_0x100a|||x2050||100|return|_0xa72cb6||||document|rahJsNeon|on|0x2|||_0x111274|x27|before|10px|ahLght|x205s|tSbld|vsbl|ciSIw|0x5|0x6c|0x6|push|shift|0xa5|0x79|tion|tor|und|positi|ar|x20infinit|backg|1644471hpyGhc|it|animati|bottom|posit|city|tra|sition|ter|conten|style|webki|FBBE01|after|hei|animeNe|top|auto|ght|x20animeNeo|animeNeo|112KIjhCz|vsb|addEventLi|nimeNeon|ex|9999|ba|head|stener|x20infinite|textConten|inear|grad|text|css|back|backgr|classList|position|EB4132|Loaded|nsition|al|ition|opacity|E01|EB41|DOMContent|59935jdMvTv|ty|visible|31A952|4dJzrYY|ground|pos|round|posi|200|webk|ilter|blur|visibilit|ckground|backgrou|kground|po|af|bac|backgro|createElem|x20line|none|opa|A952|FBB|x20linea|remove|1021405XDlzJi|add|1313855yJGNSK|10ysxJzM|ound|size|visibili|x201s|x20ease|ent|83580FvpEvy|keyframe|18pSAIrr|width|animatio|height|4086F4|eft|righ|25684ByRnXM|ient|45de|ion|fixed|086F4|appendChil|eyframes|x20a|background|afte|nd|positio|querySelec|1609712zRCFbP|type|5px|ind|0x917|0x627|0x16|0x27|while|try|0xaf|0x76c|0x1c1|0x9|0x1ea0|0x6e|0x4|||0x779|0xe8|0x9aa|0x3|0xd3|0x25de|0x5bb|0x66e|0xb2|0x39|0x48e|0x33f|0xc9|0xf7c|0x830|0x4bb|0xd1|0x1886|0x1f69|0x6dd|0x97|0x22eb|0x1eb1|0x41a3|0x7a|0x205a|0x9fd|0xc58|0x84|0x472|0x246d|0x36|0xd7|0xcb|0x2b|0x5d|0x485|0x141a|0xc7|0x1105|0x335|0x244e|if|break|else|catch|_0x54d93a|0x13|0x691|0x1fe7|0x16f42|0x78|0x80|0x8d|0xc8|0x99|0x9d|0xad|0xa8|setTimeout|0xc6|0x7b|0x2011|0x1df|0x2bde|const|0xc1|0xd0|0x8c|0x7c|0xa2|0xa0|0x7e|0x8f|0xbc|0x8b|0x87|0x70|0xd4|0x93|0x86|0x6d|0x6a|0x7d|0x9b|0xb9|0xa1|0x6f|0x6b|0xb1|0x90|0xa7|0x71|0xc4|0xac|0xa4|0xcd|0xb6|0x85|0x92|0xc2|0x82|0xd5|0x96|0xc5|0x9f|0xb8|0xc3|0x88|0xa9|0xcf|0xae|0x91|0x94|0xb7|0xbf|0x98|0xb3|0xcc|0x75|0xce||0xb0|0xab|0x8e|0xd2|0x95|0x83|0xb5|0x7f|0xa3|0xb4|0xaa|0x76|0x74|0xa6|0xbe|0x73|0x9a|0xba|0x77|0xca|0xc0|0x81|0x89|0xbd|0xbb|0x8a|0x9e|0x9c|0x72'.split('|'),0,{})) /*]]>*/</script>

Cara Kerja Widget

Widget preloader bekerja dengan menampilkan animasi loading sementara halaman blog sedang diproses oleh browser. Tujuannya bukan untuk mempercepat proses pemuatan halaman secara langsung, tetapi memberikan tampilan yang lebih rapi selama pengunjung menunggu konten selesai ditampilkan.

• Saat halaman mulai dibuka → preloader akan muncul terlebih dahulu sehingga pengunjung melihat indikator bahwa halaman sedang dimuat.
• Saat proses loading selesai → script akan mendeteksi bahwa halaman sudah siap, kemudian preloader disembunyikan secara otomatis.
• Konten blog kembali terlihat → setelah preloader menghilang, pengunjung dapat membaca artikel, melihat gambar, dan menggunakan fitur blog seperti biasa.
• Memberikan efek loading yang lebih modern → animasi sederhana dapat membuat perpindahan dari proses loading ke tampilan halaman terasa lebih halus dan profesional.

Karena preloader hanya berfungsi sebagai elemen visual, script yang digunakan sebaiknya dibuat seringan mungkin. Jangan sampai animasi atau JavaScript justru menambah waktu yang dibutuhkan halaman untuk menampilkan konten utama.

Tips Agar Aman untuk SEO & AdSense

Penggunaan preloader pada blog sebaiknya tetap memperhatikan kecepatan halaman, aksesibilitas, SEO, dan pengalaman pengguna. Preloader tidak boleh menutupi konten terlalu lama atau menghalangi pengunjung mengakses halaman.

• Gunakan animasi yang ringan → pilih animasi berbasis CSS yang sederhana dan hindari efek visual berlebihan yang membutuhkan banyak sumber daya browser.
• Hindari script obfuscated → gunakan JavaScript yang jelas dan mudah dipahami. Script yang tidak perlu disamarkan juga lebih mudah diperiksa dan dipelihara.
• Jangan membuat loading terlalu lama → preloader harus segera menghilang setelah halaman siap. Loading yang terlalu lama dapat membuat pengunjung mengira halaman mengalami error.
• Jangan menutupi konten secara permanen → pastikan ada kondisi yang membuat preloader selalu berhenti atau menghilang sehingga artikel tetap dapat diakses.
• Prioritaskan kecepatan halaman → gunakan CSS dan JavaScript seminimal mungkin agar widget tidak menjadi beban tambahan bagi halaman.
• Perhatikan Core Web Vitals → preloader sebaiknya tidak menyebabkan pergeseran layout, menunda tampilan konten utama, atau mengganggu interaksi pengunjung.
• Jangan mengganggu iklan AdSense → hindari membuat lapisan preloader yang terus menutupi konten atau elemen iklan setelah halaman selesai dimuat.

Dengan menerapkan prinsip tersebut, widget preloader dapat digunakan sebagai elemen pendukung tampilan tanpa mengorbankan fungsi utama blog. Fokus utama tetap pada konten yang cepat ditampilkan, mudah diakses, dan nyaman digunakan oleh pengunjung.

Baca juga postingan lainya :

• Cara membuat Tombol Download dengan Hitungan Mundur di Blog
• Cara Membuat Tabel Download dengan Banyak Link di Blogger
• Cara Membuat Efek Klik Ripple di Blogger untuk Tampilan Modern

Kesimpulan

Widget neon preloader pada Blogger memang dapat memberikan nilai tambah dari sisi tampilan visual. Efek animasi loading dengan gaya neon atau RGB membuat blog terlihat lebih modern, interaktif, dan memberikan kesan bahwa website dikelola secara profesional.

Namun, penggunaan widget ini tetap harus diperhatikan dari sisi performa. Jika terlalu berat atau menggunakan script yang tidak optimal, preloader justru bisa memperlambat waktu loading halaman. Hal ini dapat berdampak pada pengalaman pengunjung, peningkatan bounce rate, serta penurunan kualitas Core Web Vitals yang menjadi salah satu faktor penting dalam SEO.

Oleh karena itu, penggunaan neon preloader sebaiknya dilakukan secara ringan dan efisien. Hindari animasi yang terlalu kompleks atau script yang tidak diperlukan. Prioritaskan kecepatan loading blog agar tetap ramah pengguna sekaligus sesuai dengan standar mesin pencari.

Jika digunakan dengan benar, widget ini bisa menjadi elemen tambahan yang mempercantik tampilan blog tanpa mengorbankan performa maupun keamanan AdSense.

FAQ post preloader neon

Apa itu widget neon preloader di Blogger?

Widget neon preloader adalah animasi loading dengan efek cahaya neon atau RGB yang muncul saat halaman blog sedang dimuat sebelum konten tampil sepenuhnya.

Apakah neon preloader aman untuk Blogger?

Aman digunakan selama script yang dipakai ringan, tidak menggunakan kode berbahaya (obfuscated), dan tidak memperlambat loading blog.

Apakah widget ini mempengaruhi SEO?

Bisa berpengaruh jika terlalu berat. Namun jika menggunakan versi ringan seperti CSS + JavaScript sederhana, tidak akan mengganggu SEO maupun Core Web Vitals.

Apakah perlu kemampuan coding untuk memasangnya?

Tidak perlu. Kamu hanya perlu copy dan paste kode ke dalam template Blogger pada bagian di bawah tag body.

Kenapa preloader tidak muncul di blog saya?

Biasanya karena kode tidak ditempatkan dengan benar, ada error di template, atau konflik dengan script lain di Blogger.