How to: Progress Bar and Scroll to the Top Widgets

How to add a Progress Bar Widget:

It's interesting how you get to a place or an idea. I was looking at my friend, Rachel's post about my surprise St. Patty's Day gift. And one of her followers, Carla, commented on my cute 4 Leaf Clover feltie pin. So, I decided to check out her blog. She is a great cross stitcher and mom. Then, I noticed her right sidebar. I love her WIP, she put up pictures of the designs she is working on and a progress bar underneath.

Thus inspired, I went googling for "progress bar widgets for blogspot". The first one that peaked my interest is from Stacking Pennies. You can check out her tutorial here. It was easy to do but I didn't like how it turned out on my blog (see screen shot below). I had to do a lot of trial and error to figure out the coding.

Next site has a very promising post but it sadly did not work. So, finally I found something that worked well, Ask HTMiLy. :) It is a very easy to follow tutorial with highlighted parts of the html code so you can sort of understand each part. But I wanted to change some of the colors. So, then I googled "Html color codes" and came on this site. You click on a square of color on the "HTML color chart" and then put it into the "HTML color picker" and it will give you the numbers for the "R" "G" and "B" in the code (ex: rgb(254, 243, 210)).

Here are a few more sites for you guys to browse if you want something different: Needle Exchange's colorful bars (it requires you to get a host for your files which I didn't want to do) and Ravelry had quite a few links to different tutorials for blogs but I am not a member so I didn't look through it.

Check out my Work in Progress section on the right side bar. :) 

Do you see that black and white up arrow? It's up next.

Scroll to the Top Widget:

I was scrolling through my own blog and some of the posts were so long that I thought it would great to have a floating button that brought me all the way to the top. Googling again, I came across quite a few sites showing you how to add one. Here are a few that I had to go through: Way2Blogging but I didn't understand CSS & JQUERY, Bloggeranalytics and techtasks both use JQuery also so they were out. I might go back and lean more about how to use them later but I wanted something straight forward and easy right now. Sorry, I know moms are grimacing right now. hehe This led me to use My Blogger Tips' widget. The tutorial is very easy to follow and execute. While I was writing this post, it occurred to me to change the color of the widget so it might look different on my blog. :)

Have fun! Any questions, feel free to ask although I am definitely no expert.