As a new knitter and a new knit-blogger, I'm still coming across the
coolest new things to add to my blog. And this week my mission was a Progress Meter Bar Thingy. First, I had to find one. Turns out it's not as easy as it sounds. I've seen many of them, but never took note of
where so tracking one down became dificult. In fact, a Google search for "knitting progress meter" turned up nothing. Then finally I found something on KnitFlix' site. Phew! I emailed and asked for a quick how to, and her response led me to a few different sites, my favorite of which was this one:
Track Your Progress (or Lack Thereof). David includes a pre-made progress meter and everything you need to add one to your blog, the only thing I couldn't find was HOW to add it. So I just tried a few things. I finally came up with a solution, and am quite happy with the results. As a blogger un-familiar with CSS, I didn't know
where to place the CSS code but tested it in a few places and decided it could go almost anywhere in your blog's template. So I inserted mine right before the /*Footer information. I noticed that my particular template was divided up nicely by section: /*Header...*/ /*Headings....*/ /*Outer-Wrappings....*/ etc. so I just slid the CSS code in at the end of one section. Before /*Footer I pasted:
.prog-border { height: 15px; width:
205px; background: #fff; border: 1px solid
silver; margin: 0; padding: 0;}
Followed immediately by:
.prog-bar { height: 11px; margin: 2px; padding:
0; background: #C9DDEC;}
[Note: This is where you would change the meter's
color if you wanted to, but I think it goes nicely with my template so I left it alone.] I saved the template and opened the Page Element screen, Add a New Page Element, added an HTML/Java Script window and copied the HTML from David's tutorial. I fiddled with it a little bit to add the Name of each project and Ravelry links so my final HTML looks like this:
That's it! And now I have a nifty status bar that I have to constantly update (in addition to my Ravelry WIP status) but hey, anyone out there in the great blog expanse can see what I'm up to - including my mom and other friends and family that are not (yet) Ravellers. Nifty!
That's it! And now I have a nifty status bar that I have to constantly update (in addition to my Ravelry WIP status) but hey, anyone out there in the great blog expanse can see what I'm up to - including my mom and other friends and family that are not (yet) Ravellers. Nifty!
No comments:
Post a Comment