Archive for Bloggers' Paradise The forum for personal bloggers to get help and share knowledge on all aspects of blogging.
|
jacquie
|
More fun WIPS!Terri of http://terriknits.blogspot.com/ has kindly allowed us to use the progress script her DH wrote for her blog so here it is.
There are 4 steps involved in getting this on your blog.
1) You need to save these images and upload then to your photo host in the usual way.
2) Add an HTML side bar element to your blog and put this code in it:
| Code: |
<!-- Start - place holder where WIPS will be displayed -->
<div id="terriKnitsWIP"><h2 class="sidebar-title">CURRENT WIP'S</h2></div>
<!-- End - place holder where WIPS will be displayed --><script type="text/javascript">
|
You can change "CURRENT WIP'S" to the title of your choice if you like.
3) Add another HTML sidebar element under the first one and add the code below. Or if you can get to your template code add the code below just after the </body> tag.
| Code: |
<script type="text/javascript">
//Originally created for Terri Knits (http://terriknits.blogspot.com/)
function createWIP(intPercentComplete,strColor,strDescription){
intPercentDone = (intPercentComplete * 0.6) + 20
intBottomMargin = 100 - intPercentDone - 20
var str = ""
str += '<table width="200">'
str += ' <tr>'
str += ' <td width="60">'
str += ' <div style="position:relative;background-color:'+strColor+';height:'+intPercentDone+'px;width:60px;margin-bottom:'+intBottomMargin+'px;">'
str += ' <span style="position:absolute;">'
str += ' <img src="YOUR LINK TO needles.gif" style="display:block;"/>'
str += ' <img src="YOUR LINK TO garment.gif" style="display:block;" onclick="infoWin = window.open(\'\',\'newWindow\',\'width=200,height=100\');infoWin.document.write(\'<H4>WIP Progress:<br />Originally Created for <br /><a href=http://terriknits.blogspot.com target=blank>Terri Knits Blog</a></H4>\')"/>'
str += ' </span>'
str += ' </div>'
str += ' </td>'
str += ' <td>'
str += strDescription + '<br />'
str += ' <span style="color:Red;">'+intPercentComplete+'%</span>'
str += ' </td>'
str += ' </tr>'
str += '</table>'
document.getElementById("terriKnitsWIP").innerHTML += str
}
<!-- Add WIPs here -->
<!--End of WIPs -->
</script>
|
Replace YOUR LINK TO needles.gif and YOUR LINK TO garment.gif with the URLs provided by your picture host for the images you uploaded in step 1).
4) Now for each WIP you want to display add the following line of code between the lines where it says '<!--Add WIPs here -->' and '<!-- End of WIPs -->'
| Code: |
createWIP(percent,"colour","name")
|
replacing "percent" with a number 0-99, "colour" with the colour you want it displayed in and "name" with the name of the item you are making.
Here is an example:
| Code: | createWIP(99,"red","sweater")
|
|
Becka
|
Now, those are just too cute, too!
|
|
|
|