The 6 Best WordPress Themes for Blogging in 2022

Hello Everyone, In This Tutorial I Will Share How To Add Preloader Effect in Blogger. Preloader is an animation effect that appears before the content of the blog is loaded and displayed. This preloader effect is perfect for those of you who prioritize blog quality and design.

The script used to create this preloader animation effect uses pure CSS and a little jQuery script that will be placed in the blog template.

No need to worry about loading speed or performance of your blog after installing this preloader animation effect. Because the animation effect I give is very light and only use SVG for the design.

How Does Work This Preloader ?

The way this preloader animation works is a transition effect that will appear on the blog page before the content and the blog page is fully loaded. This preloader animation effect or this transition will reappear and disappear after the page is fully or fully loaded.

How To Add Preloader Effect in Blogger :

Step 1 : First Go To Blogger.Com.

Step 2 : Then Login Your Blogger Account.

Step 3 : Then Click on Theme Menu.

Step 4 : After Click on Edit Html.

Step 5 : Then Copy The Given Css Code and Put it Above The ]]></b:skin>.

/* This Preloader Design By Www.SmartTechMukesh.Com */
.preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999;}
.smarttechmukesh-logo{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);}
.preloader .smarttechmukesh-logo1 img{padding:0 10px;border-radius:4px;letter-spacing:normal;top:-0px;margin-right:0px;align-items:center;}
.preloader .smarttechmukesh-logo1 h1::first-letter,.preloader .smarttechmukesh-logo1 h2::first-letter{background:#6200ee;color:#fff;padding:0 10px;border-radius:4px;letter-spacing:normal;top:-0px;margin-right:3px;}
.preloader .smarttechmukesh-logo1 h1,img{font-size:30px;}

Change This Text Background Color According To You Need. #6200ee

Step 6 : Then Copy The Given JavaScript Code and Put it Above The </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
var _0x4c82fa=_0x5d69;(function(a,b){for(var c=_0x5d69,d=a();;)try{var e=parseInt(c(148))/1*(-parseInt(c(169))/2)+-parseInt(c(157))/3+parseInt(c(179))/4*(-parseInt(c(129))/5)+parseInt(c(160))/6+-parseInt(c(173))/7+-parseInt(c(149))/8+parseInt(c(144))/9*(parseInt(c(141))/10);if(e===b)break;else d.push(d.shift())}catch(a){d.push(d.shift())}})(_0x5d72,762314);function _0x5d69(a,b){var c=_0x5d72();return _0x5d69=function(a){a-=119;var b=c[a];return b},_0x5d69(a,b)}var _0x4b57d8=function(){var a=_0x5d69,b={};b[a(127)]=function(a,b){return a===b},b.IyBiB=a(145);var c=b,d=!0;return function(a,b){var e=d?function(){var d=_0x5d69;if(b)if(c.bGYwr(c[d(122)],d(120))){var e=_0x4ddd03.constructor[d(135)][d(134)](_0x5bff08),f=_0x1aa20b[_0x46113f],g=_0x5193c8[f]||e;e[d(133)]=_0x1311e8[d(134)](_0x3a9a71),e[d(158)]=g[d(158)][d(134)](g),_0xd96603[f]=e}else{var h=b[d(175)](a,arguments);return b=null,h}}:function(){};return d=!1,e}}(),_0x1752e4=_0x4b57d8(this,function(){for(var a=_0x5d69,b={EDtKT:function(a,b){return a===b},ElcCi:"rmwbQ",AObBa:a(163),nJViZ:function(a,b){return a(b)},iHTqg:function(a,b){return a+b},dmrEx:function(a,b){return a+b},tFtwJ:"return (function() ",mGXMz:a(184),bihyg:function(a){return a()},JbpPy:a(183),fJFsH:a(126),AESxA:a(176),wXwHa:a(166),diini:function(a,b){return a<b},vXCiZ:a(185)},c=function(){var c=a;if(b[c(131)](b.ElcCi,b[c(132)]))_0x20d1f7=_0x5e684d;else{var d;try{d=b.nJViZ(Function,b[c(159)](b[c(182)](b[c(119)],b[c(177)]),");"))()}catch(a){d=window}return d}},d=b[a(164)](c),e=d.console=d[a(162)]||{},f=[a(125),b.JbpPy,a(152),b.fJFsH,b[a(181)],b[a(180)],a(178)],g=0;b[a(142)](g,f[a(156)]);g++)for(var h=b[a(153)][a(147)]("|"),i=0;;){switch(h[i++]){case"0":l[a(133)]=_0x4b57d8.bind(_0x4b57d8);continue;case"1":var j=f[g];continue;case"2":e[j]=l;continue;case"3":var k=e[j]||l;continue;case"4":var l=_0x4b57d8[a(128)][a(135)].bind(_0x4b57d8);continue;case"5":l[a(158)]=k[a(158)][a(134)](k);continue;}break}});function _0x5d72(){var a=["12OxLWNm","iQpQh","kflkH","ZKKUI","667534ccSziA","cxHaT","apply","exception","mGXMz","trace","505212HIqOeb","wXwHa","AESxA","dmrEx","warn","{}.constructor(\"return this\")( )","4|1|3|0|5|2","tFtwJ","WOHHW","CXukZ","IyBiB","tWcdy","slow","log","error","bGYwr","constructor","55HEngqc","znGMG","EDtKT","AObBa","__proto__","bind","prototype","NJVot","sekTG","kJiOD","load",".preloader","10uneApm","diini",".smarttechmukesh-logo1","36600021EWBEIu","BCeZH","ckbGq","split","143677brybjL","9848216eyPgnf","hLUkZ","AchAH","info","vXCiZ","okFIk","GbyVS","length","2529753yrbOWY","toString","iHTqg","6700080ApxzVE","vbArm","console","hSQnc","bihyg","fadeOut","table","ltCiR","sYtYX"];return _0x5d72=function(){return a},_0x5d72()}_0x1752e4(),$(window)[_0x4c82fa(139)](function(){var a=_0x4c82fa,b={ltCiR:function(a,b){return a(b)},GbyVS:"slow",ZKKUI:a(143),hLUkZ:function(a,b,c){return a(b,c)},iQpQh:function(a,b){return a(b)},kJiOD:a(140),znGMG:function(a,b){return a!==b},AchAH:a(146),sekTG:function(a,b,c){return a(b,c)}};b[a(137)](setTimeout,function(){var c=a,d={vbArm:function(a,c){var d=_0x5d69;return b[d(170)](a,c)},CXukZ:b[c(138)],NJVot:b[c(155)]};if(b[c(130)](b[c(151)],b[c(151)])){var e={okFIk:function(a,d){return b[c(167)](a,d)},gGBGL:b[c(155)],cxHaT:b.ZKKUI,kflkH:function(a,b,c){return a(b,c)}};b[c(150)](_0x2b6586,function(){var a=c,b={bSxhj:function(a,b){var c=_0x5d69;return e[c(154)](a,b)},sYtYX:a(140),tWcdy:e.gGBGL};e.okFIk(_0x450984,e[a(174)])[a(165)](e.gGBGL),e[a(171)](_0x2dfee9,function(){var c=a;b.bSxhj(_0x77c4f6,b[c(168)]).fadeOut(b[c(123)])},500)},500)}else b[c(170)]($,b[c(172)])[c(165)](c(124)),b[c(137)](setTimeout,function(){var a=c;d[a(161)]($,d[a(121)])[a(165)](d[a(136)])},500)},500)});
//]]>
</script>

Step 7 : Then Copy the Below Html Code and Put Under <body>.

Style 1 With Large Text Loading :-

<div class="preloader">
    <div class="smarttechmukesh-logo1">
        <div class="smarttechmukesh-logo"><h1>M</h1></div>
    </div>
</div>

Style 2 With Small Text Loading :-

<div class="preloader">
    <div class="smarttechmukesh-logo1">
        <div class="smarttechmukesh-logo"><h1>M</h1></div>
    </div>
</div>

Style 3 With Image Pre Loading :

<div class="preloader">
    <div class="smarttechmukesh-logo1">
        <div class="smarttechmukesh-logo"><img src="https://1.bp.blogspot.com/-Wi0AsG-bPl8/YMDb-Gll6WI/AAAAAAAAA_k/nbMZD0U4TE0K2wxvv4vfcja7EL2m9UggQCPcBGAYYCw/s48/smarttechmukesh.png"/>   </div>
    </div>
</div>

Note : Customize The Marked Part as Per Your Requirement.

Step 8 : Then Don't Forget to Click on Save Theme.

Conclusion :

In this post I have explained How To Add Preloader in Blogger. I Hope this tutorial can be useful for all Blogger. Thank You for Visiting Our Website.

Edit This Article