Greetings to everybody. I'll explain how to add a preloader effect to Blogger in this tutorial. A preloader is an animation effect that loads and displays before the blog's content. For those of you who value blog quality and design, this preloader effect is ideal.
Pure CSS and a small amount of jQuery script that will be inserted into the blog template are used in the script to produce the preloader animation effect.
Add Preloader Effect in Blogger:-
Step 1:- First Go To Blogger.Com.
Step 2:- Then log in to Your Blogger Account.
Step 3:- Then Click on Theme Menu.
Step 4:- After clicking 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 it 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewO5BqUuYFOYNJ-Y6ZlnTK0uGB-vz3jOjb8bSax7Wf7wZ4-O9rLpZyXKbnUnBdgHz2VpKBig7fnehyphenhyphen0_QvH3JBRATXl_mLaA2VKZKSpbDusVwUKSWdUnq4-weGWHUY5djOLKUgP45a5I/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.
Reference :
Www.SmartTechMukesh.Com