I love the parties, in fact I host one of my own each Friday (VOTW). Many of you have joined up before, and the rest of you should!
Anyway. I like to add the "button" to each of the parties I join, as a good reminder to me to go visit (and where the good ideas are each day of the week!) and also to keep the links that most party hostesses request. There are so many, it was starting to get unruly on my right side frame bar, when I saw this great idea from Kim @ Cheap Chic Home. (BTW, you should totally hop over there to her blog to see the awesome projects she's done)
She was able to add smaller buttons, and two per line on her right frame. I emailed her, (and emailed her a few more times!) and she graciously explained how to do this (see right frame...)
So if you're interested in doing this on your 3rd frame, here's how:
Option 1: If the blog owner has the code to the button, you're in luck! This is the easiest way. First off, copy the code they provide. It's typically below the button in a small box, like this one on my page:
Back in the layout section of your blog, you should choose the "HTML/Javascript" gadget, and figure out where you want it in the layout. You need to copy this code, which tells the website what image to display, at what size, and what website will be linked when the image is clicked.
The other thing, is you'll tell the website to display the image on the left or right (because two buttons will now fit on one line) because you're also telling the site the size of the image you'll want.
So let's give a practical example:
Here's some REAL code (you could post this right in your gadget for a link to Design-Aholic if you were so inclined :) )
<left><a href="http://design-aholic.blogspot.com/"><img src="http://i822.photobucket.com/albums/zz145/captaincrzy/designaholicbutton1.jpg" height="75" , width="75" /></a></left>
- The <left tags> (beginning and end) tell the site to put the image on the left side.
- The <a href> tag tells the site what website to link to when the image is clicked. In this case, the link would come here, to Design-Aholic.
- The <img src> tag tells the site what the "name" of the image is. In the case that the code is provided, like we're detailing in option 1, this will already be added in.
- The height="75" , width="75"designation right after the image name tells the site to display the image with the dimensions you specified. This measurement is in pixels.
Option 2:
If code isn't given on the site, you can quickly save the image of the button and add to your photobucket account, or similar web based photo storage solution, where they have an option to copy the code to the direct photo. In my example above, the direct link to the button image I've used is from my photobucket account. It looks like this:
<img src="http://i822.photobucket.com/albums/zz145/captaincrzy/designaholicbutton1.jpg" (the closing carrot ( ">" ) is after the height and width notes, but is important!
So with either option 1 or 2, each seperate image button will have the full set of code. And, each time you'll want to change the direction to left or right.
Hopefully you can follow this if you want to, otherwise you can send me an email. I really like the look now- much more condensed, and more room to add more party buttons, woohoo!
Enjoy, and good luck geeking out with some coding!
