How to create an “Etsy Mini Widgit” for wordpress.com using HTML

When I was preparing to create my “Soul to Sparkle” blog and had decided to use WordPress.com as my platform, I was dismayed to learn that Etsy Mini is not available in HTML and therefore could not be added to my WordPress.com blog. Furthermore, the Etsy widget that is available through WordPress only works on WordPress.org blogs, which are different and more sophisticated than WordPress.com blogs. So, rather than settle for less than my dream blog, I set out to learn HTML and create my own Etsy Mini Widget for Soul to Sparkle, featuring items from my shop, Jess’s Treasure Chest. Once I had the hang of it, thanks to some free lessons from w3schools.com, I created the Etsy Mini Widget you see over there on the side. Hooray! Success!

So after writing my first post and doing a little seated jig, I was talking with my boyfriend about my nifty little shop banner on the side of my blog. Thanks to his passion for open source software and Linux, he gave me the brilliant and wonderful idea to share this HTML script with you, dear devoted reader, so that you, too, may do a little seated jig of excitement over having an Etsy Mini Widget on your WordPress.com blog, too!

All of that said, here it is:

Jess’s Little Recipe for an Etsy Mini Widget:

Ingredients:

1 HTML script for an Etsy Mini Widget (see below)
6 URLs of items from your shop
6 URLs of corresponding images of said shop items (click on the image of the listing and copy the URL ending in “.jpg”)
1 URL of your shop’s main page
1 WordPress.com “Text” widget, found under “Appearance” on your blog’s dashboard

Method:

1. Copy the HTML script below. Open Notepad or another simple text editor on your computer and paste the HTML script into the document.

2. Highlight the text, “URL OF YOUR SHOP’S MAIN PAGE HERE,” and type the URL of your shop’s main page there.

3. Highlight the text, “YOUR SHOP’S NAME HERE,” and type your shop’s name there.

4. Highlight the text, ” YOUR SHOP’S SLOGAN HERE,” and type your shop’s slogan there.

5. Highlight the text, “LISTING 1 URL HERE,” and place your first listing’s URL there.

6. Highlight the text, “LISTING 1 IMAGE URL HERE,” and place the URL of your first listing’s image there.

7. Copy steps 5 & 6 for listings 2-6 and their respective images, placing them in the correctly named and numbered places.

8. Place an empty WordPress “Text” widget in the location of your choice.

9. Copy the HTML script you just edited with your information and paste it into this “Text” widget’s empty space. (*Note: You do not need to include a title.)

10. Click “Save” in the “Text” widget.

11.  Go to your blog and find your new Etsy Mini Widget featuring your items!

12. Do a little seated jig!

Good luck!  Please comment and let me know how it turns out.

HTML Script: (Copy and paste into your simple text document for editing)

<html>
<body style="text-align:center">
<hr />
<h1 style="text-align:center;font-family:calibri;font-size:22px;color:teal">
<a href="URL OF YOUR SHOP’S MAIN PAGE HERE">
<ins>YOUR SHOP’S NAME HERE</ins></a></h1>
<h2 style="font-family:calibri;color:purple;text-align:center;font-size:12px">
<i>YOUR SHOP’S SLOGAN HERE</i></h2>
<hr />
<p>
<a href="LISTING 1 URL HERE" target="_blank">
<img border="1" src="LISTING 1 IMAGE URL HERE" width="130" height="130" /></a>
<a href="LISTING 2 URL HERE" target="_blank">
<img border="1" src="LISTING 2 IMAGE URL HERE" width="130" height="130" /></a>
</p><p>
<a href="LISTING 3 URL HERE" target="_blank">
<img border="1" src="LISTING 3 IMAGE URL HERE" width="130" height="130" /></a>
<a href="LISTING 4 URL HERE" target="_blank">
<img border="1" src="LISTING 4 IMAGE URL HERE" width="130" height="130" /></a>
</p><p>
<a href="LISTING 5 URL HERE" target="_blank">
<img border="1" src="LISTING 5 IMAGE URL HERE" width="130" height="130" /></a>
<a href="LISTING 6 URL HERE" target="_blank">
<img border="1" src="LISTING 6 IMAGE URL HERE" width="130" height="130" /></a>
</p>
<hr />
<p style="text-align:center;font-family:calibri;font-size:10px;color:blue">
Created by Jess Albrecht of <a href="http://www.etsy.com/shop/JessTreasureChest"&gt;
Jess’s Treasure Chest</a>
<br />Email <a href="mailto:jessstreasurechest@gmail.com?subject=Etsy%20Mini%20Widget">
Jess</a> for one of your own, or find out how
<a href="https://soul2sparkle.wordpress.com/2011/07/23/how-to-create-an-etsy-mini-widgit-for-wordpress-com-using-html"&gt;
here!</a>
</p>
<hr />
</body>
</html>