Have you noticed the widget on the side of my blog that allows you to search my outfits by color or pattern? That little widget took me a little while to create, but I'm sharing my heavy lifting so you can make a few tweaks and have one on your own blog if you'd like.
The widget works by linking a specific post label with a little image of a colored square. So, if your posts aren't already 'labeled' with colors or patterns, the addition of this widget is actually quite a project; you'll need to go back through your archive and tag each post with the colors and patterns. You can add tags pretty quickly on the 'Posts' page by checking the applicable posts and adding labels with the dropdown. However, if you've been tagging colors since the beginning, (go you!) this will be a breeze.
Alright, this tutorial looks a little HTML heavy (and it is...) but it's really just plug and chug.
1. Add a 'gadget' to your side column. Copy and paste the text below into 'HTML mode'.
<table border="0" cellpadding="2" cellspacing="2" style="text-align: left; width: 260px;">
3. Insert your blog's URL for each color label. For example, "http://www.sincerelyjennamarie.com/search/label/blue", in place of BLUE LABEL. Note that the URLs and your labels are case sensitive, and the URL needs to be encased in quotations.
4. Replace all the labels with the appropriate URLs. Ta-da! Your widget is customized and ready to go :)
Notes: If you wish to remove a particular color tile, you'll need to understand a little more HTML. The widget is coded as a table. This means that each row is created with a line of code, and each row denoted with a tag. (If this is jibberish, check out my intro to HTML to get up to speed) So to remove an entire row, you'll remove the content and the surrounding <tr> </tr> tags. The tags <td> </td> denote the columns.
Notes: If you wish to remove a particular color tile, you'll need to understand a little more HTML. The widget is coded as a table. This means that each row is created with a line of code, and each row denoted with a tag. (If this is jibberish, check out my intro to HTML to get up to speed) So to remove an entire row, you'll remove the content and the surrounding <tr> </tr> tags. The tags <td> </td> denote the columns.
If I can better clarify anything, or if you have additional questions, let me know in the comments below!
This is great! Thank you so much for sharing your hard work!
ReplyDeleteJill
Doused In Pink