How to add loading animation for blogger

Rk creations May 19, 2021 How to add loading animation

HOW TO ADD LOADING ANIMATION TO BLOGGER

1. To install loading widget, you need to to go to blogger-theme-and click edit html, find(ctrl+f) ]]></b:skin>and insert the following CSS which is given below.


 #loader {

background-color: #fff; background-image: url(http://2.bp.blogspot.com/-oP
GZaNs5sVA/VjMsQ7sIZQI/AAAAAAAAA9w/q9k
-wOikJQI/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 of an animation image.
you can change it to the following options.

1.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90emoxRECAln02Me480ZXAOH_7InJi7J9qJU-g9Hc6YKc-yX86HuXkgzixatRqFeTRZ3mD58r2DgDA0eUhypK2NSCwWRib5ScP4WWapmfQfrsedBI8E7dqrH_aQd93LHOYpZbEeACxbQ/s1600/preloader+%25285%2529.gif

2.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig9hvUir7Zd0SQBcwP_4mfNtt56hPittOYHKNOMz7OX-45gwb-gHE2R2G40zNfKL9-Z8mwb6Dh1dneDI0drrg_Oyb8z57-0d08LVuKE8ieQpoQAAvUoQa5Zr9zpycQKt7fuBLTBbY5ybU/s1600/animation3+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


3.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGaWnK0RSi7xdLOnQbn2arJQwxd8f3QrFAW_0W4A3DUXyJdj0y1xpSfrl20x0wIrdRhVJNrRj72EPkV_yrKCw2VwpCqakwHMMysnA-wyA6GmlBRXqMsjTOol9Sk117gkyNe4bQYsRRvo/s1600/gear.gif


4.

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






5.



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


2. Now 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.

java script

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

4. save it and check the result














Post a Comment

2 Comments