Welcome to www.ExEBlogger.Blogspot.Com | Want This Template! Subscribe us!
Subscribe For Free Updates!

We'll not spam mate! We promise.

Tuesday 1 October 2013

Add YouTube Style Progress Loading Bar in Blogger

Add YouTube Style Progress Loading Bar in Blogger
Today We will share an tutoril on how you can add Youtube like progress bar on blogger.It is very nice,premium widget. I have tested this on Blogger and it works fine. So possibly it will work great on Wordpress websites too. There are several plugins for WordPress that will create progress bar widgets for your sidebar, but I don’t like them.



Where to Put the Code

  • Open Blogger Dashboard >> Template >> Edit HTML.
  • Press Ctrl+F and search for </body> tag & paste below code above it.
<style>
#nprogress{pointer-events:none}
#nprogress.bar{
background:#29d;height:2px;left:0;position:fixed;top:0;width:100%;
z-index:100}
#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);
-webkit-transform:rotate(3deg) translate(0px,-4px);
box-shadow:0 0 10px #29d, 0 0 5px #29d;
display:block;
height:100%;
opacity:1.0;
position:absolute;
right:0;transform:
rotate(3deg) translate(0px,-4px);
width:100px}
#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}
#nprogress .spinner-icon{
-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;
border:solid 2px transparent;
border-left-color:#29d;
border-radius:50%;
border-top-color:#29d;
box-sizing:border-box;
height:18px;
width:18px}100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)}.photo{display:none}
</style>
<div id='loadMore'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='http://goo.gl/10Okof'/>



  • Now hit Save Template and you are done, now just refresh your blog and see this awesome loading effect.

Well if you loved this effect and trick then do share this with all your friends by liking it below, if you face any problem do comment. :)

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!
Share This Story, Choose Your Platform! >>

2 comments:

  1. nice one Usman loved it
    it is possible to change its colors ?
    nice blog
    tushar ( Eutectics.blogspot.in)

    ReplyDelete
  2. it doesn't work on my blog https://hydrasubs.blogspot.com/

    ReplyDelete