Peachy Trick: How to add the 'Percentage Read' bar widget to your Sidebar

Many of you have asked me how I established my  "Percentage Read" in the side bar below under my books which I am currently reading. So I thought, why not add this to my Tips & Tricks and share it with you all :)

This is super handy to have, simply if you want to show your readers how far you are into your book and perhaps when they can expect your review, or also for when you have received a book from an (independent) author and you can give them a clear indication how you are coming along with their book, and likewise for them to see when they can perhaps expect their book review to be on your blog! I believe communication with your readers and those you work alongside with is key, and this is just one tool (out of the maaany) to just keep people informed on your progress.

Let's get started! The code is really simple once you understand what you need to tweak and personally change! I will explain it step by step.

          1. Copy (Ctrl/CMD + C) the code below:

<div style="width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(254, 243, 210); border: 1px solid rgb(0, 0, 0);"><div style="width: INSERT- PERCENTAGE-READ%; height: 15px; background: none repeat scroll 0% 0% rgb(106, 71, 42); font-size: 8px; line-height: 8px;"></div></div>INSERT-PERCENTAGE% Read!<br />

Change the following:

• INSERT- PERCENTAGE-READ- Insert here a percentage. If you are reading your from your Kindle or another E-Reader, you will easily find this shown below the E-page.
  If you are reading a hard copy, simply divide the Page number you are on by the Total number of pages of the book. You will then get a percentage, and this number you will need to insert in this section of the code

• INSERT-PERCENTAGE- Insert that same percentage above in this section of the code. I have this part written out as "50% Read!", but you can freely change this as to how you personally prefer it ;)

       2. Now simply place this code into your sidebar!

In blogger, go to Layout, then 'Add a Gadget' and choose HTML/JavaScript and paste the code there and click 'Save'! That's it!

If you are unsure how to insert the code in the sidebar, please let me know and I will explain in further details!

I hope this has helped you! Enjoy your new cool widget;)