recent posts

banner image
Home / all / blogger / blogger trick / post stylish / How to Add jQuery Preloader Effect on Blogger

How to Add jQuery Preloader Effect on Blogger

, , ,



Let's follow below step to add this on your blogger/blogspot site.

  1. Login to your blogger dashboard
  2. Go to Theme>Edit HTML
  3. Click on Edit HTML
  4. Click anywhere inside the code area or you can read How to Search code in Blogger
  5. Press CTRL+F from keyboard and you will see a search box
  6. Search following code

]]></b:skin>

 Paste below code above ]]></b:skin> tags

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #222222;
    z-index: 99999;
    height: 100%;
}
#status {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    padding: 0;
}

Again search following code

    <body>
    or
    <body expr:class='"loading" + data:blog.mobileClass'>

After finding anyone of these code, just paste following code after it

<div id='preloader'>
   <div id='status'>
      <img alt='' height='64' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTe7dfH-xhsIlEcKdrwrGQApLU37EnEY1Qi5WOTjiqiW6tVAp5UYUApD8zVo9wrM5JEZw3U8pEOnErJAm1KEkeEbGs_-umh1HV8hwTaQfBV80W5f4ehlybQtMC9txqCeHlDAWheJmrPwY/s1600/preloader.gif' width='64'/>
   </div>
</div>

Note: Before adding the javascript code inside your blogger template first change above url here with one of image url from below add those link which you want  to add



Blogger Loading Effect Style1]

Blogger Loading Effect Style1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-gZtvTBBhovczZSJJfKeLA9fPvZZKfLypvRRqK7owlokEWFncBR2oVw5exUZLNeG-F9mXNHew7Iq2s6q69lq4drHwrVIJeeyhPSkMJY9AAc30WRXtvwOFoJmOBpKNcHHIvVWel5V7iGL/s1600/loading4.gif

Blogger Loading Effect Style2]

Blogger Loading Effect Style2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHZpFApSfT8-3dHm3sYHIEt1g-BraV11l6oCjq6e3fnQX-3Cynw2uxXNliKyPGMFB8Tlx5SqY6hx1oKKcFyxeGCgfYiyKcmk521BjDILGd7DfiuvfnjCJzTRg1hrSZgcI9rh55zRU5g-W/s1600/loading5.gif

Blogger Loading Effect Style3]

Blogger Loading Effect Style3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn4ygFvia1GTPpLzEvcS0hg1wVKHyvfRxsf-IwR0hk4lWimrbfzKcfAOcgAQV5QBWIG9fVxbFUvUigi2Eb5wXxb7FlkLQKmG_SzcEGCG46oB98RLTRpzOBCTD7bPOYalljAlq0er1XNMuV/s1600/loading6.gif

Blogger Loading Effect Style4]

Blogger Loading Effect Style4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS0FvX-ApzzALa0fgqAdg_ID-ilgDZ6po5OEHAaf1hijXQqcK7lew6-yTRQeQMqRVwe1gc3Q-zqG6DiqTIXF1iYvljw1tha2vPy3Iw3MnRRR3X_AUIygUMI0J_xgq4YgJbxqak8LC2MNjB/s1600/loading8.gif

Blogger Loading Effect Style5]

Blogger Loading Effect Style5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJb95XHnXZ3piF51rF1iyv7zXZbad4iPhKEc8uI9pGMj0ADT_LfvgO33SjDMfEnRZzvkfppFJFeN_blILyVBMdeiL7CZjFS1-k-6YlGRx4MpJtTDcRy7hafaNtbtx59EsabC8k_5zdOn1s/s1600/loading9.gif

Blogger Loading Effect Style6]

Blogger Loading Effect Style6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif80VNbNOQonevpZ0RBVUwiwN5QhxuYmeo_hyphenhyphenD9T93GXla9R7mkqr1trqSynqftx_UBX7Wy6Kkc_udruFMIn8fNzyFplfhKPZZJ1ZYhPd9bkqRchamYM3L1UB3ACbyrgScE_5zSsDIFOOJ/s1600/loading10.gif

Blogger Loading Effect Style7]

Blogger Loading Effect Style7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPMtSlCspw3fa_8XlK_WcpbDhjmgpJwQXamraF-d-rt9qCr4n-6xUk1-J78_FGrV63t5IQGX5SACPH9xzm__RgfbFnUXpnV2m8kaTeeeZIhqzUNvKg30eR8LlstbkgoKTkuOiarXu1X8/s128-no/Loading1.gif

                                                         more click here                     

Again search following code

</body>

Paste following code before </body> tags

<script>
/*====================================
* Preloader Effect
* www.codiblog.com
======================================*/
 $(window).load(function() {
   $("#status").fadeOut("slow");
   $("#preloader").delay(500).fadeOut("slow").remove();     
 })
</script>

Click on Save template. That's it.
How to Add jQuery Preloader Effect on Blogger How to Add jQuery Preloader Effect on Blogger Reviewed by wondermayank on November 02, 2020 Rating: 5

You May Also Like

Music

Powered by Blogger.