Add YouTube Style Progress Loading Bar in Blogger

Loading effect  is a great way to make your blog design more professional and create great visual orination in Your blog. You have often seen loading bar on many websites just like Youtube and othr suh. You can add loading effect on your blog easily with a little piece of JavaScript. How it will work?. Simple! When your blog load it will show progress bar of loading on the very top of your blog. When your blog loads fully it will automatically disaper.Sometimes blog load very slow and it creates problems for visitors but if you have instlled this widget then your vistors can make estimate of loading with bar.

It is very easy to add this widget in your blog just followthe below step by step guide to install this widget in your Blog.

Demo This Widget

How to add this widget in Blogger

First login to your Blogger Dashboard and navigate to Template → backup your template→ click edit HTML →. Expand <b:skin>....</b:skin> if it is not expanded and Press Ctrl+F  to find ]]></b:skin>.

Paste the below CSS code just above/before the  ]]></b:skin>. 

CSS and JS

#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}

Now search for </body> and paste the below javascript above/before </body>.

HTML And JS

<div id='loadMore'/><script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><script src='http://goo.gl/10Okof'/>
 

Save Your template and enjoy...