How to Add Animation to Blogger

Good day, dear visitors of our site. We have studied the most important sections for working with a Blogger platform. Now you can move on to the useful and at the same time beautiful. Surely you

sometimes noticed that when entering some sites (blogs) before loading them, a small animation appeared on your monitor and it lasted exactly as long as the site needs to fully load the opened page.

That is, until all its components are loaded, a certain animation object will wriggle in front of you. It is clear that this is done not only for beauty, but also so that the visitor can see all the components of the sites in front of him at once, and not separately each of them. In addition, such a widget shows that your site more than professional. The better the design, the more credibility.

An example of the animation can be seen on our test blog.

How to Install Preloader into Blogger

1. To install the preloader widget, you need to go to Theme - Edit HTML find ]]></b:skin> and insert the following CSS code before it:

CSS#loader {
background-color: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL_ADyj4TmuQKi9Don3CVLkr6QVmWGNwTb8JLcdO3LTG5BBTNLbrCjP6_P08lYdK2jzTOGq5pdmMfUeGNA0eUgmMo-YXPYvzmVwjEA7Ygh7NpRXvPkOO5s5GWewuoTCwPFl1meenQveDw/s1600/preloader.gif);
background-position: center center;
background-repeat: no-repeat;
background-size: 70px 70px;
bottom: 0px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 9999;
}

The highlighted section of the code is a link to an animation image. You can change it to the following options:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdlK6q13BZb9q3dcKLiOD20bfDIr1wl3IbCGbsMf01CMHinKRFTZqv3UTUupmKgqhm1T7JAGEp0OYwss4MSMfNgnxD4uYhrEpFzCRcAjPUXLDOj5mTniFLg3NN76uiRTbepflzB_Jjis4/s1600/preloader+%25285%2529.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGEKYBbM-TMrWkE2KI4zevPUcdGykXEDek4vTTZc2Nj72p_r0kFFcwK9USyv0oEUunYFIF_rNyEsboekEqxSRpKtP2wJgMEDyP2eUS5xixRo33F95nF63IJeqIByZL0iwZiI5TCFeDmMA/s1600/54f4ca1edced7ed62ba934b4_infinite-gif-preloader.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWLzlVqx0vJj27WfErfe7g-DYcWdzmdpGhQ0vfiGdUO_mEa78eLVZPGlaXMdSLBQNGkWFMQG6FeHGW-TxVDAgpo8oyLdaURxhZnaaCOxyE8l8XB9bxpa0ov4b6VNNC8eqMkgsVNIgiYjU/s1600/042413_square_loader+%252%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaK9W138Di5gAdnDK5kdQFO7r9GEkBNdjXyDGZ4PQvAovhy_rjW_xsG6YdculSH3h6jVGc96jawwtL22qfDuEmkX_7cgkJL5PMnESK5b8f8GR2JUfVGtl1ZDwNy6XwQVes0mSfNowui94/s1600/1338614bf6bda949333801c917d9e988.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgovyLrAJFDnWciZxSwWSwntzHYpg08BblSI-h_tPSKlFCvmNix3TtecB2lyYJ3ZP0uLGucNlFAb-4Gtwx45izBIxRAQURBojCdt4cFm77dBFjUlcqSLck-qsI8QIGcF8dCQuhGfUwukIU/s1600/9080607321ab98fa3e70dd24b2513a20+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3sCipEdJejL_Y6Lp5I_c-quYsP3Ae8Bd2Lg9FSe3wb1x2AgDzxbckDL_LnslQ6jSi5BtnjYNw6eWu7VIm-Zgc7TSK6svhsXqKT0d9ic3a1CywLgMyGvLG3Eyf7t0LXcr7wYTZK1VD80/s1600/animation3+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgj3Jyp0CSXTKCJskwWw2-RydWrqTrjhHQVMT01CoLNciz_ebBUVAkiF_HpFDYBng9FUC3G42Ug3xXY_8CDno54NgCSvnjZI8H2SoODvWbzXxv_3L2mEOjj-bHBk3q1NfH6N7BhnsVXXI/s1600/e95a921638100a6e21b3143002d05a0f+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5puDzUVS2BZdcf7g9vkrj71JgQKJGCcJcrE_2Y-ob5hkvTQQFBudT3ZYtbwN8dA7b_iCllcOp7VIPrPbXvhlNR1tegf2smDoSmR-QcK2gL8_SdaS3xkBpV2B6xTo2JeNCEQscLtKsAk/s1600/free-preloaders1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNNj9ieLPKMJr9Z5pY7Ikt3iRr1NWyW9DhXBH-Gbso1q_mU11qm7cLByZvJHac2TjTWWoXprHCJ-0pZ0aMIxrtuIZCYlxB4qCr3ZydNaHT-1oSrXwapnN_8W3slSUJBx62lDZaQuofzA/s1600/gear.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhludEtI126_OrpD0iG1qe_v0LpgMam6YbujehMsOmg0EvlJEcQ6e54CWLkdy5I0Pf1EEBt2ymaZI_b0b1YYC0KeBJzzP2XDGUm_zEcDdo1WtfsmmEHvQXo8TjS8SXQ-V4vKVM75pNsMUk/s1600/loading+%25281%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceHzp7h_ishbBVOAaIExE_ry2cKIixdx2-dIT9814mvOgvUpjuRwyxWrlLJ32oAWEgzUgMMTN2JOssu47pjlNOa-_cQ9VUBbeVHXPSqroYI8FJUt0dAzSjeBDs8IuO9r3oQ5mbPgjy2M/s1600/loading+%25282%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQxEOW6mYlRfIlVElJvNMcBFsslXiEOBDXOc5WIONr9mnLnzLrU2pKYNPHQx0_iAtS0HooPjPYMiac60zLwhhgMSzbjRjJeP3qqkEnmhp-pSoP1_4aCMIXYycpJ874x56KiyTzHMLMaM/s1600/loading+%25283%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIjEztkaVuFef-y8ZdC3OjIWNsCPj7tNbwzK2okK0Wvu9E3iTl4WFWtP4qk2DLQiANR2SSiWeOp466YcUajiobAfd2uVvRPCq9XMSswD1M_qIPQE3rVNOiDtXUR_HzQc0CKhNUWuxj4g/s1600/logo_dark_nobg+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvUQ5o52eG2vAUSCkvrlbxEH2mhXy5sC3EDtoGUsdCFOCltjc-I5EsujHht1cLHEWLjml1Ysbb3NZ7mLm2uwwN_xkAcKmikneVfA778wZmeMMgpeyB2DEiVU8DSmjA6FSuJm62DVzkCBo/s1600/preloader+%25281%2529.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1Ye9wlwMLUX2ChE8YkctCsVfPw21Uks8lwmKAVK045oEwimhUdCBdh2yIMG743hcq6m8j7vQ_DGE0zRotyYvCSRgk2tiVVWBdKSlLDFAMiWpaOajyHtBG7fQJxeFdYjAg8gDGOpkEY4/s1600/preloader+%25282%2529+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs6NvO-Dgd8poM3-8oHJA6E3dMpHebGIiXW45nlh1e4v4-p9IPfwqY7jxYWP9l5ZHri8u6uQ_XpfJuynvxzid8i7CLrtRV58WcNpJup8GN1D3EiigDSAK8ldjn2cr-Cl_FsI1jyS0LSKM/s1600/preloader+%25284%2529.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFblrQbQHLfFfVQmHzHt5delOoFPwNM3e95GDeJ2F24pc1SCOnIlkj_tc06pkmQslQkRtGnUxuMx9w8YdENeU4M5xthdczJIbdd0u9i-e-yqP_kXNvoPoVy9C7Q2CbD7Q0PrUMULWTNA/s1600/Preloader_8+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlGkNf4WVXioVLyPRiszwW4B5yaATunQ_XLIlf3cqwwL4TXTkH8LhnZgSyTb220NhhLPStAJGZvG4HEAt7QjWHcpDC39hPacvMItdHqgAbuHiCtAcCq2rtV1HZFjfPK8MMH_HFn9gvPKo/s1600/Preloader_10+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

2. Now you need to find in your theme <body> and paste after him:

HTML <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='loader'/>
  </b:if>

If you want that widget to work on all pages, not only on the Home page, then do not copy the code highlighted in orange.

3. And the final stage, now we are looking for the code </body> paste before it:

JS<script type='text/javascript'>//<![CDATA[
// Loader
$(window).bind("load",function(){$("#loader").fadeOut(1e3)});
//]]>
</script>

4. Save new settings and check the result.

Video Instruction

4 Comments

Mark Daniel Korvin August 29, 2022 at 1:54 AM

You can increase it, to do this use instruction in video.

Marc March 29, 2023 at 10:19 AM

Hey, thank you for the codes! I'm a beginner and appreciate your kind tutorial, may I know if we can add some text below the page and set a duration for the loader? Thank you again!

Mark Daniel Korvin April 2, 2023 at 12:26 AM

Welcome. For duration try to play with numbers 1e3 in JS code. If you need text add this CSS code: #loader::before{content: "Hello World!"; color:#333; display:flex; align-items: center; justify-content: center; position: relative; top:59%;}