How to Create your own Custom Etsy Mini

Do you want to change the order of your items in your Etsy mini without having to move your featured items around? Do you want to change the background color? Then these directions will help you with that! Please note that there is a handful of code that you will need to write in order for this to happen. Also, this will not automatically update like the "real" Etsy Mini's do. When you want to add new items you will have to edit the code yourself.

Please note that some of these instructions are specific to Blogger Blogs.

If you feel that it is just too much for you to do I am willing to write the code for you (you can get information on how at the bottom of this post)

To build this Etsy mini you are going to be writing html code. A great tool to see what your code will look like can be found here: HTML editor

When coding in html we use tags. An open tag looks like this: < > and a closed tag looks like this: </ >

To start we are going to create a table with one row and two columns. The code is as follows:

<table border="1">
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
</table>

Copy the code and paste it into the editor so you can see what it looks like. When you want to create a new row you use the <tr> tag and when you want to create a new column you use the <td> tag. Every time you open a tag you must close the tag somewhere in your code.

Okay, so now lets put some information from our shops into the code. You will need to get the web address of each listing, along with the corresponding picture link. Instructions for finding the picture links are given below

1. Go to the listing
2. Right-click on the thumbnail you would like to use
   
3. Choose "View image"
4. Copy the address
   

Please note that you can choose any thumbnail you want, it does not have to be the first picture like in the "real" Etsy mini.

If you would like to use gallery images, the process is the same. Just right-click on the gallery images instead of the thumbnail images.

<table border="1">
<tr>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=24561867"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.69143953.jpg" align="center"/></a>
</td>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25272803"><img border="1" vspace="1" hspace="1" src="http://ny-image2.etsy.com/il_75x75.71480754.jpg" align="center"/></a>
</td>
</tr>
</table>

The red text shows you where I put my listing links, and the blue text shows you where I put the image links. The vspace and hspace code is used to create space between each item. If you want no space you can set them to "0" if you would like more space then increase the number. Copy the code above into the editor and paste in your own listings and images to see what you get.

The background color will automatically match the theme of your blog, so you do not need to worry about colors. If you would like to remove the black border you should use <table border="0"> instead of <table border="1">.

The next step is to add your shop name at the bottom of your table. To do this add the following code at the bottom, replacing your shop name and shop address with mine.

<a href="http://magnetgames.etsy.com/">
<span style="font-size:78%;">
<center>MagnetGames</center>
</span>
</a>
span style="font-style:italic;">

Please note that if you add this code into the HTML editor it will look a bit weird, it will not look this way when you add it to your Blogger Blog.

To make your etsy bigger or smaller, you need to add more rows and columns, below you will find the code for my 4x2 custom Etsy mini. Feel free to copy it and then paste it into the editor to play around with to create your own.

<table border="1">
<tr>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=24561867"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.69143953.jpg" align="center"/></a>
</td>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25272803"><img border="1" vspace="1" hspace="1" src="http://ny-image2.etsy.com/il_75x75.71480754.jpg" align="center"/></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25749038"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.73619037.jpg" align="center"/></a>
</td>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25749038"><img border="1" vspace="1" hspace="1" src="http://ny-image3.etsy.com/il_75x75.73076879.jpg" align="center"/></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25598963"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.72575901.jpg" align="center"/></a>
</td>
<td>
<a href="http://www.etsy.com/view_listing.php?listing_id=25564652"><img border="1" vspace="1" hspace="1" src="http://ny-image1.etsy.com/il_75x75.72462929.jpg" align="center"/></a>
</td>
</tr>
</table>
<a href="http://magnetgames.etsy.com/">
<span style="font-size:78%;">
<center>MagnetGames</center>
</span>
</a>


Remember, that learning anything new takes time. The more html practice you get the more you will understand!

If you do not remember how to add your Etsy mini to your blog there are instructions here: How to Add an Etsy Mini to a Blogspot Blog



At the top of this post I mentioned that I would be willing to make you your own custom Etsy Mini. I have created a new shop along with a new listing. I will build 1 custom Etsy mini for you for the price of $3. Please remember that all the information to create this on your own is available here for free. You can find the listing here: Custom Etsy Mini


Don't understand something I wrote about? Have a related question? Post a comment and I will be sure to answer it. Have an unrelated question? E-mail me, and I will feature it on my blog!

xoxo
susan.