I got an interesting email in my inbox last night, and I thought that I would share.
One of my readers has a friend that liked the way that I created my “linky Parties” page, and was wondering how I went about making the page, inserted the images, and added the links.
It is actually pretty simple to make them the same size and have them line up properly. All you have to do is deconstruct the code a little. Just taking what you need, adding a few things, and deleting the rest.
Take my button and code (located on my sidebar) for example:
<div align="center"><a href="http://agirlinparadise.blogspot.com/" title="A Girl In Paradise"><img src="http://i1232.photobucket.com/albums/ff375/agirlinparadise/agirlinparadiseblogbutton1.jpg" alt="A Girl In Paradise" style="border:none;" /></a></div>
Normally you would just copy and paste that code (above) and add it to your blog post or side bar. But what if the button is sized too big or too small? The trick is to know what you need from this code and what you don’t.
There is a lot of technical stuff when it comes to coding, and I am by no means an expert. I have learned a few things from others along the way. Now I know what to look for and the things that must be included to successfully change the code to meet my needs.
The three things that you need to be on the lookout for is the address to the blog or website (http://agirlinparadise.blogspot.com/)
the address to where the image is located. (http://i1232.photobucket.com/albums/ff375/agirlinparadise/agirlinparadiseblogbutton1.jpg)
and the size you want your image to be.
height="90" and width="90"
Below is the model code that I use to add buttons to my “linky Party” page:
Which looks something like this with the addresses included:
<a href="http://agirlinparadise.blogspot.com/"><img height="90" src="http://i1232.photobucket.com/albums/ff375/agirlinparadise/agirlinparadiseblogbutton1.jpg" width="90" /></a>
You can change the height and width dimensions if you wish. I like 90, but if you like your buttons to be a little larger just increase the number to say 150 or 200. Sometimes it takes a little trial and error to get it just right. Just be consistent with your button sizing to make all the buttons lineup together.
Now to get all this information into Blogger…
First, you need to go into Blogger, create a new page, and click the HTML button located on the top left. To preview your work you can toggle back and forth from Compose and HTML formats. You must work and enter your codes into the HMTL selection format, or it will not show your images. Copy and paste your model code for each button that you want to create, replacing the website address and image link address for each new button.
For example, when I want to add a new button to my link parties page, I first copy and paste the button’s code from the owners blog. Then I copy and paste my model code below the pasted button code. Then I replace the necessary web addresses into my model code, and delete the original pasted button code from the owners blog.
Now I am ready to place that code under the right day of the week within my link party page. I place the code one right after another and let Blogger determine how many are going to be in each row. Basically, how many buttons in each row will depend on the size of your buttons. Then, I click compose or preview to see if everything is lined up to my liking. If it is, then I press Publish and double check the button to make sure the link works.
I hope you found this helpful. I will be linking this tutorial to some of these great linky parties. Be sure to stop by and check them out. If you would like me to add your linky party to my page just ask.
Thanks for stopping by and have a great week!