Tuesday, June 8, 2010

How to Put an Etsy Treasury on Your Blog

I get a lot of questions regarding how I put Treasuries up on my blog, so I did a quick video tutorial to show you how. Feel free to ask questions!



Here are the steps in list form. Feel free to ask questions!
IMPORTANT NOTE: You'll see these stars * in the code below. They are there so that the code doesn't compile and you can view it. When using your own code, TAKE THEM OUT. They're not part of the correct code.

1. Have your treasury on screen and make sure you can see all that you want to capture.

2. Hit the 'PRT SCR' button on your keyboard. Usually up in top right of your keys. This takes a picture of whatever's on screen and copies it to your clipboard

3. Open your graphics program and paste the image. Usually, you can just hit ctrl+v and it will be there.

4. Crop the image and resize it to your specifications. If it's too huge (generally wider than 800 pixels) it will look wonky on your blog. This depends on your blog though.

5. Save the image to your hard drive as a .jpg or a .png.

6. Upload the image to your photo host of choice. I use photobucket, but you can use flickr or any of the million sites to pick from. Now, when you're posting it on your blog (in Blogger) you can choose just 'upload' from your PC, but I often get a weird compression on the image when I do this, so I opt to host it somewhere so that the pic of the treasury has an existing web link.

7. Create a new blogger post. Upload the picture and choose 'url.' Paste the url of the picture. (This is the link from photobucket or wherever you hosted it.)
8. View the HTML section of your post and alter the HTML... see below

Notice how the 2 links shown are the same? They are both: http://i381.photobucket.com/albums/oo259/riskybeads/VacationMay2010.jpg

<*a href="http://i381.photobucket.com/albums/oo259/riskybeads/VacationMay2010.jpg" target="_blank"><*img alt="vacation TEast May 2010" border="0" height="400" src="http://i381.photobucket.com/albums/oo259/riskybeads/VacationMay2010.jpg" width="375" />

If you leave them this way, then you won't link to the treasury; you'll just link to the image, so we need to change the 'a href' link to be the treasury link. See below:

<*a href="http://www.etsy.com/treasury/4bf98908aad88eef2a71981f/vacationall-i-ever-wanted" target="_blank"><*img alt="vacation TEast May 2010" border="0" height="400" src="http://i381.photobucket.com/albums/oo259/riskybeads/VacationMay2010.jpg" width="375" />

If that code above is in your post, the treasury will show up and be clickable.

~Lori

No comments:

Post a Comment