Widgets on Artfire - Basic HTML

Adding widgets to your shop adds personality to your shop, you can add links to your blog, fan page, twitter account, shout box, and all sorts of other gadgets. Even if you have links to your other accounts in your market hub, people are more likely to click on your widgets,maybe follow you on Twitter, check out your blog-it's a link to you.

To add or edit a Widget, go to My Artfire, then click on My Studio, in there click on My Widgets. There you'll see 2 columns; the one on the left lists the widgets you already have, the one on the right is to add a widget.

• There are to choices for adding a widget, mostly you'll use TEXT/HTML/FLASH one. The tag cloud just lists all your tags and a customer can click on the tags. While not bad, you'll only use it once. I'm working with the  TEXT/HTML/FLASH ones, so chose that one.
• The next choice is placement. Left only will only shop up in your Artfire blog. The ones on the right side are probably most seen.
•  The next step is to cut and paste the code you have in to the widget and click save
• example, the code for the You Can Sell It widget    < a href="http://youcansellit-artfire.blogspot.com/"> < img src= <a href="http://www.blogger.com/goog_1269116928239"&glt; < /a >
  
  
• You now have a widget.

These are the basic steps for adding a badge, some good ideas are twitter buttons so people can follow you, badge for your face book fan page, your blog. There are also shout boxes where buyers can leave a question or comment, stumble upon badges, almost anything you can think up.

There are a couple of issues with Artfire's widgets that still need to be addressed. You can't name them or rearrange them and if you click on the delete button by accident, it deletes the widget without confirming it. Using some basic HTML, all those issues can be taken care of. Next to each widget there are 3 symbols to the right

Check mark is to deactivate the widget- it won't show in your shop but it's not deleted

The pencil is to edit the widget

The x is to delete the widget.

All you need to know are a few simple tags organize your widgets. Since you can't name them widgets using Artfire, adding a comment tag (a tag is always with  < >.  Using the example of the You Can Sell It badge, it is not always that obvious what that widget is for. If you plan on editing or deleting a widget, it's a good idea to name it.

• Going back to that example- The You Can Sell It badge. Now that you have the original code in place, we're going to add a comment. To do this use <!--comment here-->
  
  You'll want this on the first line so when you open the code, you can see which which widget it is.  No one will see this in your shop, it's just going to be seen by you, when you actually look at the widget code.
• It's is a good idea to save the widget in notepad (not in MS word, you need to save it as text), so if you do delete it, you'll still have the code.
• If you don't want the widgets all pressed up to the left, start the widget with the comment(they can go anywhere), then use < center > before any other code and </center > after all the other code to close. Anything with

This part is more advanced; if you are just starting out, you might might not want to try this yet. I know after a while, I felt like I had too many widgets to keep track of. Someone in the forums (I want to give credit but I forget who- I'm sorry whoever), suggested combining them into one super widget when I said I was tired accidentally deleted widgets when I was trying to edit them. Combining them is it not as scary as it sounds, especially it you start slow, like combining 2 widget into one.
Since each separate widget just is a container for your HTML or flash. The only new tag you'll need a paragraph tag between each set of code, this is just to add a space between. < p >Suppose I have 2 widgetsI have already added comments to. I like to know what I'm working with. The first one is the You Can Sell It badge the code will look like this <!--You Can Sell It--> < a href="http://youcansellit-artfire.blogspot.com/"> <img src= "http://i1011.photobucket.com/albums/af237/FantasyClay/YCSIavatar.jpg" > </a>

I have a second widget, a twitter button-
I took this code directly from their site and added a comment

<!--Twitter Button-->
< href="http://twitter.com/fantasyclay"> <img height="90" src="http://www.twitterbuttons.com/images/lbn/twitterbutton-0102.gif" ><a href="http://www.twitterbuttons.com">By TwitterButtons.com</a> </a >

For some reason the Twitter button is under the badge and since it is small, I want it on top. So here's how I will fix it. When you make a widget by combining other widgets, they'll show up in the order you type them in. Leave the original 2 widgets in place until you are sure the new one works.

To Start I'm going to use the <center> tag; this will actually center the images

< center >

Add a space just to make it easier to read

<!--Twitter Button-->

< href="http://twitter.com/fantasyclay"> <img height="90" src="http://www.twitterbuttons.com/images/lbn/twitterbutton-0102.gif" ><a href="http://www.twitterbuttons.com">By TwitterButtons.com</a> </a >

Add the paragraph tag to add space between the images

< P >

Now the second set of code for the badge(again leave space to make it easier to read)

< !--You Can Sell It Badge-- > < a href="http://youcansellit-artfire.blogspot.com/"> < img src="http://i1011.photobucket.com/albums/af237/FantasyClay/YCSIavatar.jpg" /> </a>

Just close the center tag and you're done
< /center >

Check that it looks right. If any tag is not closed or mistyped,  these will need to be fixed. Once you have to way you like. Save all the code in the widget in Notepad. To be sure you copy everything, that widget box is hard to scroll, click CNTL+A to select all. Then copy and paste. Name that file something you'll remember.

Now save it. This is crucial- remember what I said about deleting, Artfire doesn't ask you to confirm it, it just deletes the widget. So save this code, so when you do delete, you can easily replace it.  It so easy to do by accident, just assume it will happen.

When you want to add new badges or find a new gadget you want to add to your shop, you can just add it to this widget; be sure to save this code. I'd suggest saving all the code and then paste it over the text in the original file. 

If anything isn't clear or you need more explanation, let me know how I can help. I'm always glad to help.