Just like Santa’s elves…

So I haven’t had any interesting knitting pictures recently, due to the impending holidays and my reluctance to post anything that might ruin any surprises…

So, to make up for it, here’s the code to post progress bars if you use Blogger or one of the other free guys that don’t include web hosting for flash files:

Step 1: Go into MS Paint (or your drawing program of choice) and make a rectangle that’s 17 pixels high by 88 long. You can decorate it or just choose a plain color. Save this to wherever you keep your blog photos.

Step 2: Add the following to the style sheet part of your blog’s template:

#percent {

    align: left;

    width: 88px;

    height:17px;

    margin: 0 0 0 20px;

    background-color:white;

    border:1px solid black;

}




#knitDesc {

    align: left;

    margin: 0 10px 0 20px;

    font-family:arial,helvetica,sans-serif;

    font-size:12px;

    color: #300;

}



If you want to change colors, fonts, sizes, etc, this is the place to do it.

Step 3: Wherever you want to put the % bar, add the following:

<div id=”percent”>

    <img src=’
RectangleAddress‘ width=’W‘ height=’17’ align=’left’>

</div>

<div id=”knitDesc”>

    <b>Project Name:</b> Percent%

    Yarn: Name of Yarn

    Colors: Yarn Color

<div>

You should fill in your own details:

RectangleAddress is where you’re storing the picture you made. It’s the full address, starting with http.

W is the percent complete * 0.88 (the width of the bar, divided by 100)

Percent should be the number you used to determine W

Project Name, Name of Yarn, and Yarn Color are self-explanatory.



Have fun!

Leave a Reply

Your email address will not be published. Required fields are marked *