12 Sep 2013

Add YouTube Style Premium Stylish 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 :)




So Here We Go:-






  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & 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 & 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 :) 

6 comments:

  1. how did you seo your blogger as it was on first page of google for term
    "add loading bar in blogger"

    Please tell me how did you do it
    http://nerdsfuel.blogspot.com/

    ReplyDelete
    Replies
    1. ThaNk You,I Can't TeLL U.it A trick

      Delete
  2. please if you can inbox me it would be great..... bro you can check out my blog and you can check my effort that i am putting in every post but no traffic for 4 years it is killing me from inside....
    http://nerdsfuel.blogspot.com/
    muhammadjahanzebmalik@gmail.com

    ReplyDelete
    Replies
    1. Jahanzeb Brother Its Really Easy You CaN Contact Me on Facebook I Will Tell You Its Not A Big Deal its All Depend On keyword Come At Facebook I Will Tell You

      :-> Search My Name Is Fb You will Find Me Easily

      Main Profile Name Akhil Swatantra
      Second Profile Name : Akhil Krazzymuddlehead

      Delete
  3. This is really interesting, lovely and beautiful blog about Youtube Help & Support. So thanks a lot for sharing needful information........!!!
    Youtube Support,please visit the link.

    Thankyou
    Lacy Brown

    ReplyDelete
  4. :) How to change the color of the loading bar?

    ReplyDelete

Ads Inside Post