Friday, December 31, 2010

How to Make a Progress Bar



How the heck do you make a progress bar?!

(And what in the world is a progress bar??)



 


I've received a number of questions on how to make a progress bar, so I thought I'd put together this post for anyone who is wondering and would like to add one to their own challenges. In order for everything to be visible here, I've replaced all of these things:

< >

with these brackets:

[ ]

So when you are using the code, make sure you replace all of the brackets with the little triangle thingies (as you can see from my sophisticated jargon, I am well versed in all things...thingy).

What You Will Learn

I'll show you how to make a progress bar and also how to add a picture with a link. Basically, this is what you'll be able to make when you're finished:







0/10 books



The picture is a link and leads to my post for the YA Historical Fiction Challenge. If you click on the picture, it brings you to that post. This isn't particularly helpful if you're already on the post, but if you put your challenge button in your sidebar or on a Challenges Page (like I have located on the top link bar) then it can be useful.

The second part you see is the progress bar. As you read books for you challenge, you can adjust this bar so it reflects how many books you've read so far. This bar represents the percentage of books you have finished, not the total amount.

The numbers below the bar (0/10) shows how many books you have read (that would be the 0) and how many books you plan on reading (that is the 10). So, if you have read 5 books, then the progress bar would be filled 50% and the numbers underneath the bar would read 5/10. It would look like this:






5/10 books



Let's Do This!

Step 1:

This is the code you will need. Just copy it and paste it into you post (remember to use the tab "Edit HTML"). Remember to change the brackets to those triangle things.

[center] [a href="http://smallreview.blogspot.com/2010/12/ya-historical-fiction-challenge.html"][img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoHkpAEWn77unJwUZ3hpuncUAhoLwVVpwFpfNfu8Ryh5InQCDBF7RIuZd4Lq3JIryqpoYo_kMfcKeMEasV4LmmsLJGuYaYUnzk8q7etD-NvRF0pfrA4YR4fJ0c6B4qwr3jU0wCyba3h0/s1600/Historical+Fiction+challenge.png" title="YA Historical Fiction Challenge" width="190" /][/a]
[div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]
[/div]
0/5 books[/center]

I have code here that will make the picture and bar centered on the post. If you do not want it centered, just remove the [center] and [/center] at the beginning and end of the code.

Step 2:

Now you need to plug in your information. The following is the same code as above, but I've color-coded the different parts you'll need to change.
 
[center] [a href="http://smallreview.blogspot.com/2010/12/ya-historical-fiction-challenge.html"][img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoHkpAEWn77unJwUZ3hpuncUAhoLwVVpwFpfNfu8Ryh5InQCDBF7RIuZd4Lq3JIryqpoYo_kMfcKeMEasV4LmmsLJGuYaYUnzk8q7etD-NvRF0pfrA4YR4fJ0c6B4qwr3jU0wCyba3h0/s1600/Historical+Fiction+challenge.png" title="YA Historical Fiction Challenge" width="190" /][/a]
[div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]
[/div]
0/5 books[/center]

The purple part is a link. Here you will copy the url for the page you want the button to link to. I used the url for my YA Historical Fiction Challenge post. 

The green part is the image. Right click on the image wherever you see it (it can be on the host's challenge page) and click on "Copy Image Location." Then paste that into the green section. 

The pink part is the title. Type in the name of the challenge.  

The red part is the percentage. Here you will type in whatever percentage of the challenge you have finished. You'll have to do a little math for this one.

The blue part is the number of books you have read and plan on reading. The first number is how many books you have read. The second number is how many you plan on reading.


If you only want the progress bar and you do not want the linked picture, then use this part of the code only:

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]
[/div]
0/5 books[/center]

And there you have it! 

If anyone has any other questions you can either ask them in the comments or email me. Please don't feel shy at all! 

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know. I'll edit this post with any other answers. 

Learn How to Customize Your Progress Bar 

32 comments:

  1. Thanks a lot! I was wondering about this.

    ReplyDelete
  2. i love you for posting this! very very useful and helpful indeed. i already made my own but i'll gladly bookmark this page and save the codes for future use! thank you very much for sharing the thingies (i'm well-versed too you know lol) c",)

    ReplyDelete
  3. Thanks so much!! :) I'll need to do a bunch of these for my many challenges! :)

    ReplyDelete
  4. Oooh, awesome. Thanks for sharing this with us!

    ReplyDelete
  5. Thanks, this is really helpful! You can also change the color of the progress in the progress bar from red by changing the second rgb value to a different color.

    ReplyDelete
  6. Thanks for sharing this. It's definitely going to help when I start posting my 2011 challenges.

    ReplyDelete
  7. This is a really helpful tip! Thank you!

    And thank you also for dropping by my blog. It's comforting to know I'm not the only one who's not too pleased with Pride and Prejudiced and Zombies. At least I know I'm not just too uptight about an Austen novel being messed around like that.

    Happy New Year! I'm wishing for a fantastic 2011 for all of us!

    Brush Up On Your Reading

    ReplyDelete
  8. I have always wondered how to do this! Thanks for the helpful post! :)

    ReplyDelete
  9. You're all very welcome!

    Aobibliophile, It's a difficult language, but someone has to speak it :P

    Andi, Yes, maybe I should add that... Thanks!

    ReplyDelete
  10. Wow that's great! I wanted to know how to do the kinky picture thing (kinky??? Pmsl I meant linky darn autocorrect) as I want to make a button for a meme :). Many thanks for all your hard work.

    ReplyDelete
  11. Thanks for this, I've been wondering how to do them!

    ReplyDelete
  12. Ohhhhh thanks so much for the tip! I've always envied people their progress bars and now I can have my very own. Yay!

    ReplyDelete
  13. Thank you so much-I've searched for how to do this but failed. Now I can update my challenges!

    ReplyDelete
  14. This is a great post, l looked for ages on the internet to find a code for it a few weeks back.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. Sorry I had to delete above post because typing on my iPad makes too many typos. What I was trying to say is this post is fantastic. You have a real gift for making a complicated process easy to follow and understand. You rock!!! I'd love to see more posts like this in the future.

    ReplyDelete
  17. You're very welcome everyone! I'm glad this has been helpful :)

    Gina, Thank you! I was wondering if it was clear or not, so I'm very happy to hear it was. I'd be happy to make more posts like this. Have any requests?

    ReplyDelete
  18. Oh wow, you probably shouldn't ask someone like me for requests, I'll have mercy on you and only post a few:

    1. How to make a button
    2. How to put a poll up on your blog
    3. How do I post a message in my comments box "I really like comments etc."
    4. What's the best and easiest way to "Pimp my blog"

    ReplyDelete
  19. Mercy? Oh no! Have no mercy on me, please! You are only helping me by giving me more post ideas and prompting me to learn more things! Don't hold back at all. :)

    I'll make posts for all of those topics and schedule them out. Keep an eye out!

    The first part of this progress bar post shows how to make a button. Basically the part where you plug in the url and the image link is how you make a button. This part:

    [a href="http://smallreview.blogspot.com/2010/12/ya-historical-fiction-challenge.html"][img src="http://1.bp.blogspot.com/_9hJs2J1RW1Y/TRYOTIVVnaI/AAAAAAAAATw/mRIhoLHPKJY/s1600/Historical+Fiction+challenge.png" title="YA Historical Fiction Challenge" width="190" /][/a]

    ReplyDelete
  20. OMG YOU ARE AMAZING!!!!!!!!!!!!! HAPPY NEW YEAR!!!!!!!!

    ReplyDelete
  21. I have always wondered how to do this!! Shannon just sent me over here, and 5 minutes later... I have a progress bar on my sidebar! Thank you :)

    ReplyDelete
  22. Lazy Girl, Haha, I'm happy to help! Happy New Year to you too.

    Katie, Yay! I'm glad you found it helpful. :)

    ReplyDelete
  23. Thanks for posting this! I really needed this, but didn't know how to get it on there! :D

    ~Zakiya

    ReplyDelete
  24. You're welcome! If you have any questions please don't hesitate to ask :)

    ReplyDelete
  25. THANK YOU! I was so jealous of other websites who had this and was so flabbergasted as to how to make one and where to even start!?! You totally made this possible! Thank you!

    If you would like to see your amazing influence, here's my challenges page. Thank you!

    ReplyDelete
  26. OMG, I could you a huge, grizzly bear hug. I have been looking EVERYWHERE to figure out how to do this! THANK YOU for posting this!

    ReplyDelete
  27. Thank you so much! I hope this post never goes away! This isn't the first time I've referred to it! I wish my brain would remember all this stuff! ;) Lol!

    ReplyDelete
  28. haha I need to refer back myself! Glad you've found it helpful :D

    ReplyDelete

It's all about friendly conversation here at Small Review :) I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Because I am absolutely terrible about following through with blog awards, I can't in good conscience accept any more. Thank you very much for thinking of me though!

Spam WILL be deleted. Attacks on myself or other comments WILL be deleted.

Related Posts Plugin for WordPress, Blogger...