We've Moved:
http://www.the-giveaway.com
Links below will take you to the new contest pages

Saturday, May 3, 2008

Etsy Mini Tutorial

Okay everyone, so today I'm doing a little tutorial on how to do your own html code for your Etsy Mini so you can make it as big as you want, remove the white background, choose whatever products you want to display on it, and have it say whatever you want underneath. You can see examples of this on my sidebars. I'm new at this tutorial thing, so I'll do it as best I can. It can seem a little confusing at first, but once you get the hang of it, it's mainly just copying and pasting. (Keep in mind that doing it this way, once an item sells you will need to change it by hand again as this isn't automated to show new items like the real Etsy Mini)

Takes more work, but to me it's worth it.

I'll start with a 2x6 mini. Here's the code for it:



So, if all your wanting to do is make a 2x6, all you would have to do is copy and paste from the code above. Copy the code, and paste it into your blog or whatever site you're putting it on. Then for each item, change the code specifically for what you want.

So each item is specified by this code:


Change the url (in green) to the url for your item. Then change the alt (in red) to the name of the item. Then lastly, you will need to right click ( CTRL +Click on a MAC) on one of the small pictures (75x75 pics that you click on to change the big picture) and choose properties, that will give you the src (in blue), change it to your src.

Do that for all 6 items.

Then at the bottom you have this little piece of code:


Change the url (in green) to your shop url. And the name (in red) to your name, or whatever you want it to say.
Font size can be made smaller by changing the value (in blue) to 0, or -1, -2, and so on, or bigger by changing it to +2, +3, and so on.

So now you have a nice little 2x6 Etsy mini. Now to explain how to change it for bigger or smaller ones.

Changing the Size:
So, that bit of code you see before each item, the td and tr (I spaced them so you can see them, please don't space your code) so are making a new row, when you close it with < / td > and < / tr >, you are ending that row. So if you want 3, or 4, or 5, or however many items you want in the row, just put more items in between those codes. Once your done with your row, you can start a new one by using the code again, or not. So you could make one long row with no columns, or one long column with no rows, or tons of rows with tons of columns, just copy and paste where needed and delete where needed.

Ending the Mini:
Just be sure that when you are done playing, you need to completely end the mini by putting in < / table > < / table > (again, don't space your code) otherwise it won't work. (This code goes in before the very last bit of code where you put in your shop url and name, you can see it on the first big html code image I have) And be sure that you didn't accidently copy and paste the < / table > < / table > somewhere before you were wanting to end your mini. Make sense?

Alignment:
Now, if you want your table aligned to the right or left, at the very beginning and after eacg image source is the bit of code that says < align = " center "> (still don't space it) just change "center" to "right" or "left". Then change the code around your name ( <> BabyLyons Designs < / center > ) to right or left too.

Spacing:
I have the spacing set up where there is 1 pixel between each item vertically and horizontally, as shown here: v space = " 1 " h space= " 1 " (do I even need to say please don't space?)
Just change that number to whatever you prefer, you can even do no spacing between them by entering "0" for it.

Borders:
I have my borders set up to look like the actual Etsy Mini. To do this you need to find this code in your Edit HTML tab:
}
a img {
border:1px outset #ff00ff;
border-color:$bordercolor;
padding:0.35em;
}

Be sure yours is like mine and says "border:1px outset #ff00ff;" or else you won't have the awesome border :)
And you can always do no border by changing the values to 0, or larger borders with larger numbers, etc.


Remember, this is my first tutorial so please be kind to me :) Feel free to convo me with any questions you may have.

25 Entries:

keeping it Simply Sweet said...

you go girl. you know I will have to try this. I do have some ?'s for about several different things. we need to hook up.
convo me :D

M

SavageBabble said...

What a great thing to come up with! Thanks very much. I'll give it a shot.

Melody's Unchained! said...

Just want to say THANKS! You are so very sweet for posting this! Gonna go heart your shop!

Cerra said...

You are super patient for doing this, I'm sure everyone is going to be so glad for it!

Rascallion said...

This is sooo awesome! Thank you very much for sharing.

A Blond And A Torch said...

This is so helpful! Thanks!

esque said...

Thanks for sharing this! Very helpful!

[inkihandmade]

Renaissance_a3 said...

This is very very cool. I learned some new today. I love doing html stuff. I will definitely take the time to customize my mini! Thanks.

Ren
raghousenternational.etsy.com

tattytiara said...

Awesome of you to share this with everyone, and a full serving of cleverness points for working it out!

Sandra Eileen said...

Great!

mdk jewelry designs said...

thank you so much. i have been wanting to do this. just did not know how.

Anitra Cameron said...

Great tutorial. I'm wiped out, and need to go to bed, but I'm leaving the page open to remind me to study and do.

Subscribing now....

Blue & White Wear said...

This is great - thank you so much! I was trying to figure this whole thing out! THANKS AGAIN!

ElegantSnobbery said...

Oh my goodness, thank you so much for this tutorial!! I completely love the look of the Etsy minis on your blog and I can not wait to try this out!!!

Catirina Bonet Designs - Fun! Funky! Hand Knitting Patterns said...

WOW! Great info but mostly I just keep coming back to see all of your amazing finds!

Octavine Illustration said...

thanks for the great tutorial...i didn't even know this was possible!~ what a great computer teacher you are.

Safari Lee said...

Great info. I'll definitely bookmark your blog. Hugs, Safari Lee

Gaia said...

Thank you so much for sharing this tutorial! I'll try and see if I can do it :)

Beautiful blog too... so many great pictures to see :)

Mama Z said...

Thanks for the tutorial! The mini's look great on your blog! I'll have to try one for my blog when the kids are sleeping!

EtherealRhapsody said...

Tried it, it works awesome! Thanks a million for taking the time! If anyone asks how i did it, i will refer them to your blog!

Anonymous said...

Question: I am working on a Mac so I can't right-click to get my image properties. Can you tell me what to do instead? Thnx!

BabyLyons said...

Hi Anonymous :) To "right click" on a mac, all you have to do is press down CTRL and click at the same time, you should get the same type of menu :) I put that in my post, thanks for letting me know that it's not the same on a mac :)

seemommysew said...

Thanks so much! Looking forward to trying this out!

All Things Lovely said...

I cannot thank you enough for this, I appreciate it so much! You are a lifesaver!

fatninjainyoface@gmail.com said...

you ROCK :)