How to install a stylish effect progress bar into your blogger blog - In my previous article I already shared 5 types of css scroll bar (you can read that article here- 5 best animated css scroll bar for blogger), but today I'm going to provide you 5 stylish progress bars for your blog. The progress bar is very stylish and unique way to let your visitors know how much the page is loading. The effect of the loading progress bar will appear when the blog page is in the process of loading the page and it will disappear when the page finishes loading. The installation of this progress bar is quite easy because there is only one CSS code of it. Now if you like this progress bar and you want to install it on your own blog then don't worry today with the help of this article I'm going to show you how you can easily set up this progress bar in your blog without having any problems.
How To Install CSS Progress Bar?
First go to your blogger dashboard - Login
Now, before you start editing your template don't forget to make a backup of it.
Now go to "Template" section and then click on "Edit html" button.
And then find the below code by pressing "Ctrl + F" key together from your keyboard.
<head>
After that copy any one code from below (which you want to show on your blog) and paste it just after <head>
1ST-SIMPLE RED
<script src='https://googledrive.com/host/0BxB51PrIeBaicXpaaFNWamlwZGc' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaiMk5rN0FKemJfLVE" />2ND-BOUNCING BALL
<script src='https://googledrive.com/host/0BxB51PrIeBaicXpaaFNWamlwZGc' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaiaHg0NUJxcm80bDQ" />3RD-SNAKE TAIL
<script src='https://googledrive.com/host/0BxB51PrIeBaicXpaaFNWamlwZGc' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaiSkhINHVHWXdaX1k" />4TH-BUBBLE TYPE
<script src='https://googledrive.com/host/0BxB51PrIeBaicXpaaFNWamlwZGc' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaiU3FCYmltdnFSYmc" />5TH-BLUE BOLD
<script src='https://googledrive.com/host/0BxB51PrIeBaicXpaaFNWamlwZGc' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaiLVZudXMzWUowM0k" />6TH-ON SCREEN
<script src='https://googledrive.com/host/0BxB51PrIeBaicXpaaFNWamlwZGc' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxB51PrIeBaidnNNMTNKaXlhcjg" />
Now click on the orange save temple button to apply the changes after that reload your blog and see the magic.
That's it! I hope you like this progress bar! Stay tuned for more cool widgets! Thanks for reading @Prince
0 Comment to "6 Stylish Progress Bar For Blogger"
Post a Comment