A couple people have asked me about my mini treasuries. So here is a tutorial for making them yourself! This method works for Blogger, but I’m not sure about other blog sites. If you have any questions, please feel free to email me. :)
Unfortunately you'll have to type the code in yourself. When I put the code in straight, you can't see it, so I had to use screen pics.
Step One: Make a Treasury
Before you can make a mini treasury, first you have to make a big treasury. Well, you don’t have to make any entire treasury if you don’t want to. But you do need all the items you want to use for you mini treasury saved somewhere, and the treasury is the best place to do that. It’s a good idea to set them up the way you want them to be displayed in your blog, so you get an idea of what the finished product will look like. Once you’ve finished your treasury make sure you save it!
*Note* If you aren’t going to make a complete treasury, make sure you set your test treasury’s privacy to Only You before you save it.
Step Two: Saving Pics
Now it’s time to create the pics that will appear in your mini treasury.
1. When you’re done with your treasury, click on the item you want to appear first in your mini treasury. This will take you to that item’s listing page.
2. Once you’re on the listing page, click the item’s picture. This will bring up a new window with a larger sized picture.
3. Copy the picture and paste it into your picture editing software.
4. Crop the picture so it’s square. It should be at least 300x300 for best results, but you can save it bigger then that if you have space.
5. Repeat with the other items.
6. Remember to make sure you save your treasury and keep the window open, you’ll need it again in a minute.
Step Three: Copy & Pasting
This is the longest step. We are now going to add the pictures and titles of the items to your blog. Once again, I know this works in blogger, but it might work slightly differently on other blog sites.
1. Open up Blogger in a new window or tab.
2. Open a new post, or edit an existing post if you want to add a mini treasury to a post you’re already working on.
3. Then copy this table into your post:
This table will give you 3 columns with 2 rows each. The < tr > tag is for the row and the < td > tag is for each item in that row. Feel free to add or remove rows or columns as you like.
4. Once the table is the size you want to use, click the Add Image button.
5. Find the picture you want to go in the first slot with the Browse button.
6. Then pick None and Small for your Layout selections.
7. When you're done click Upload Image. This should paste a bunch of code at the very top of the post you're working on.
8. Copy the code then paste it between the first set of < center > tags. Make sure you go back and delete the code at the top of the post or you’ll end up with a bunch of pics up there as well.
9. Now head back to your treasury. Click on the item whose picture you just loaded into your post. You should now be on that item’s listing page.
10. Copy the URL for the listing page.
11. Go back to Blogger. Find the line that starts:
12. Highlight everything in between the " " and paste the URL over it.
13. Right after the end " add a space, then type this after the space you've just created:
The line should now look similar to this:
Now the picture on your blog will link to the item listing on Etsy and open the link in a new window.
14. Find the end of the code block. It should look like this:
16. Now type this:
in between the / > and < /a >.
17. Head back to the item’s listing page. Copy the title of the item. (I also go back add the artist’s name, but you don't have to if you don't want to.)
18. Go back to Blogger. Paste the item title between the < p >< /p > you just pasted.
Congrats! You've just done one complete item! Hit the preview button and see how it looks. Now do the same for each of the other items.
Step Four: Review
Once you have finished all the items go back to preview mode. Are all of the pics lined up? Or are some of them crooked? If they are crooked it’s because of the item titles. All the titles that share a row, must have the same number of lines. If one item’s title has two lines and the one next to it has three, it will make them line up wrong. Luckily it's an easy enough fix. Just go back to the offending item’s title and either add or subtract words, whichever is easier.
Head back to Preview mode. Everything should now be lined up correctly. But the block of pictures is probably hanging out in the middle of nowhere, for some reason, isn’t it. This drove me nuts the first time I made one of these tables! To get your table in the right place on the page, all you have to do is take out all the returns after each line, so the table is one giant piece of code.
Wrong:
Right:
And you’re done! Everything should now be in its proper place! I hope you found this helpful, let me know if you have any questions. Now go and enjoy your mini treasury! :)
