TipRicks network enlarged, follow us on Youtube for regular updates!Subscribe Now ×
Join The List Of BlogSpot Bloggers

your co blogspot users are here already - feel free to join too!

Subscribe

How To Create A Unique Loading Effect In Blogger or Website | Top 28 Eye Catching Effects

In my old tutorials I wrote on creating blog, changing template but today I am going to tell about a serious issue of page loading. It is v...


In my old tutorials I wrote on creating blog, changing template but today I am going to tell about a serious issue of page loading. It is very useful for reader as well as it increase the beauty of your blog or website. It will not effect the SEO of your blog or website.

"Loading" effect show a process bar when page loading like picture above . This effect is very useful for website .If loading time of your website is so long ,readers may think your website was down and find another website ,but in case of adding a loading bar ,readers may think the page is being processed and keep waiting a bit till full page loaded .

There are many way to create loading effect ,in this post ,I want to introduce the easiest way,here are some ideas and inspiration of loading effects that you can apply on your web design. Lets try how to install these effects to your blogger blog.


Follow My Instructions:



Step:1 Go to Blogger Dashboard→Your Blog
Step:2 Template→Edit HTML
Step:3 Now Search for </head> By Pressing (Ctrl+F)

Step:4 Copy the code below and paste it just above the tag </head> 

Note:(If jQuery is already in your template, do not copy anymore, because if jQuery is more than one would slow loading blog.)


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Step:5 Now,again search this peace of code in your blogger template 
]]></b: skin> 
or 
</style>
Copy the below CSS code and paste it just above ]]></b:skin> or </style>.


#page-loader {position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:9999;background:#FFFFFF url('URL Here') no-repeat 50% 50%;
padding:1em 1.2em;display:none;}]
Step:6  
  • Find the tag </body> with Ctrl + F.  
  • Copy the below code and paste code right above/before the tag </body>
[<script type='text/javascript'>//<![CDATA[$(document.body).append('<div id="page-loader"></div>');$(window).on("beforeunload", function() {    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});//]]></script>]
Step:7  Please select the menu loading of your choice and paste the URL in Red Writing in the code of step 2.

http://3.bp.blogspot.com/-99_s0XfLTt0/UQaikh3bSMI/AAAAAAAAFOU/BuKqG0mh0eY/s1600/loading4.gif

http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif

http://1.bp.blogspot.com/-udgAVO3FySQ/UQailMH35aI/AAAAAAAAFOo/JD6vDePg9OU/s1600/loading6.gif

http://2.bp.blogspot.com/-yz54Aj8Fp1s/UQailmVa8BI/AAAAAAAAFPA/LT0KOGY-_lk/s1600/loading8.gif

http://3.bp.blogspot.com/-eeiu8xL2Qls/UQaimEebl4I/AAAAAAAAFO8/hSK_kq7C8Po/s1600/loading9.gif

http://3.bp.blogspot.com/-bWMOJ7ywzjg/UQaij1cSLiI/AAAAAAAAFOM/Nrdgh1W6hys/s1600/loading10.gif

http://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.gif

http://3.bp.blogspot.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.gif

http://1.bp.blogspot.com/-tjFFryWgIcs/U7nQQ0x7JHI/AAAAAAAAEDU/v2BqyuIvCc8/s128-no/Loading3.gif

http://2.bp.blogspot.com/-kXvhQBHoB0s/U7nQRhwcIxI/AAAAAAAAEDU/WDhTfSJOii8/s128-no/Loading4.gif

http://2.bp.blogspot.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.gif

http://1.bp.blogspot.com/-sGFHLSRy2OI/U7nQTn34h8I/AAAAAAAAEDU/0PUXPSEACPc/s128-no/Loading6.gif

http://2.bp.blogspot.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.gif

http://1.bp.blogspot.com/-sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.gif

http://4.bp.blogspot.com/-H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.gif

http://2.bp.blogspot.com/-qqEpMJ9PeoI/U7nQO-rfprI/AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.gif


http://4.bp.blogspot.com/-s3r7ewkIgOE/Vq3jhD8qjJI/AAAAAAAAAZA/xjqlq8nC2Eo/s200/tumblr_mlj1mwdjWP1r9nvifo1_1280.gif



http://4.bp.blogspot.com/-LMzVgbTAx8M/Vq3jo9DgUSI/AAAAAAAAAZk/xklAgLy399I/s200/Add%2Banimated%2BGIF%2Bimages%2Bto%2Bblogger.gif

http://2.bp.blogspot.com/-uv-m4KEFQXg/Vq3jl514sdI/AAAAAAAAAZQ/t8DG2NMv0Bo/s1600/ajax-loader.gif

http://3.bp.blogspot.com/-McqgscdbKQQ/Vq3jmL1geRI/AAAAAAAAAZU/uXtD1KfQ6pM/s200/loader%2B%25281%2529.gif

http://3.bp.blogspot.com/-esI_LV3dX08/Vq3jpQtOxEI/AAAAAAAAAZg/DLAVTl76yIY/s200/loader.gif

http://3.bp.blogspot.com/-R-jTudwY4jU/Vq3juReCqJI/AAAAAAAAAaA/4LWlAIwqvCs/s200/loading1-1.gif

http://2.bp.blogspot.com/-S-RnhRYTQrk/Vq3jyHesheI/AAAAAAAAAac/CoOz0Gqx2S0/s200/loading1.gif

http://3.bp.blogspot.com/-9QIeI2m1dis/Vq3jtIxom2I/AAAAAAAAAaE/gXAVVU79ZS0/s200/loading%2B%25281%2529.gif

http://4.bp.blogspot.com/-B0KTXUUZ6Gg/Vq3jtgzD_GI/AAAAAAAAAZ8/CwCX9zo7Rkw/s1600/loading%2B%25282%2529.gif

 http://3.bp.blogspot.com/-4u6-lAuaKB4/Vq3jtbjwJrI/AAAAAAAAAZ0/c7BhKXiQ6DM/s1600/loading.gif

http://2.bp.blogspot.com/-5VB61zkRvTg/Vq3jyfoJGYI/AAAAAAAAAaU/S3Yvl_OuXa8/s1600/loadingfinal1.gif

https://2.bp.blogspot.com/-6JiGKFPm3E4/Vq3jybz0poI/AAAAAAAAAaY/rXPnfjx7TPY/s1600/preloader.GIF


Congrats! You have successfully add this plugin to your blogger blog.


We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below.


Peace and blessings buddies. :)

        COMMENTS

        BLOGGER
        You May Like to Read:

        Resources

        Tools We Use

        Name

        Agriculture PPT Templates,2,AskTahir,6,Blogger-SEO,5,Blogger-Templates,1,Blogger-Tutorials,23,Blogger-Widgets,8,Blogging-Tips,2,Facebook,4,Free-Mobile-Data,1,Freenom,1,Google-Adsense,3,Google-Analytics,1,Islamic PPT Templates,1,Medical PPT Templates,1,Mobile-Marketing,1,Motivation,1,MS Word,1,News,3,Oppo-Mobile-Features,1,PDF,1,PowerPoint-Templates,4,SEO,5,TrueCaller,1,Twitter,1,Videos,13,Whatsapp,1,Youtube,4,
        ltr
        item
        TipRicks: How To Create A Unique Loading Effect In Blogger or Website | Top 28 Eye Catching Effects
        How To Create A Unique Loading Effect In Blogger or Website | Top 28 Eye Catching Effects
        http://3.bp.blogspot.com/-THXPHWlaBLs/Vq3bX1IvUoI/AAAAAAAAAYo/5vAdOj87YxE/s320/How%2Bto%2BCreate%2Ba%2BUnique%2BLoading%2BEffect%2Bin%2BBlog.png
        http://3.bp.blogspot.com/-THXPHWlaBLs/Vq3bX1IvUoI/AAAAAAAAAYo/5vAdOj87YxE/s72-c/How%2Bto%2BCreate%2Ba%2BUnique%2BLoading%2BEffect%2Bin%2BBlog.png
        TipRicks
        https://tipricks.blogspot.com/2016/03/how-to-create-unique-loading-effect-in.html
        https://tipricks.blogspot.com/
        https://tipricks.blogspot.com/
        https://tipricks.blogspot.com/2016/03/how-to-create-unique-loading-effect-in.html
        true
        7070217950916442682
        UTF-8
        Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy

        Hello, how may we help you? Just send us a message now to get assistance.