I recently have been making some small changes to my blog to make it easier to use. Blogger can be a little tricky, but if you know some basic (and sometimes not so basic) html you can create some amazing things!
If you click on the page link at the top of this blog titled ‘Crafts‘ you will pull up an image gallery of all my past craft projects. (Update: This is now the ‘tutorials‘ page’) This page makes it so easy to find anything you may have seen on my blog because each image is linked up to the original post. I did a similar image gallery for my ‘party ideas‘ page.
href=”http://yourprojectposturl.com” target=”_blank”> <img
src=”http://yourimageurl.jpg” /><br>Name you want to have
displayed below your image</a></td>
- You are creating a table. Everything within the <table> and </table> tags will be shown in that table. The <tr> tag is for the row and the <td> is for each cell in the table.
- In all html you will have a start (or opening) tag and an end (or closing) tag. For example, to create a table you must have the tag <table> at the beginning and </table> at the end. If you are getting error messages, usually it is because you are missing an /,<, or >. You must check this carefully or your codes will not work!
- Since I chose to do four images, I created the width of the cell to be 25%. I did not predefine the width to a particular number so that it will always only take up 1/4 of the row width, regardless of how many images are there and how big the browser window is. This way, when I do not have all the cells filled out, it still only takes up the same amount of space. You can see this in the very first picture in this post. I only have three images in the first row.
- If you were to do three images you would make the width 33% instead.
- Likewise, if you choose to do five images, you would set the width at 20%.
- Blogger automatically uses Picasa Web Albums to save your photos. If you open Picasa Web Albums and log in with the same log in you use for blogger, you will see your blogger account with all of your pictures. I found the main page that opens up when you click on your blogger account has the perfect size thumbnails to use for these image galleries.
- To get the image url, find the image you want, right click on the image and select ‘copy image url’. This will be what you will paste into the green link area in the above example. You do not have to resize the images or do anything further to make it work!
- If you are still stuck, I have found w3schools.com to be incredibly helpful for learning hmtl code. They have a section on creating tables that can help you if you are stuck.
I use Google Chrome as my web browser. When I opened up my ‘Crafts’ page in Internet Explorer, the table was stretching over into my sidebar. I finally found a fix to keep the table the same size in any web broswer! Set your table width to about 50 – 100 pixels less than your main column width of your blog.
For example, my main section of my blog (where my post content shows up) is 800 pixels wide. So I set my table width to 700 pixels.
To do this, in the above code you would add width=”700″ into your table setting. Here is what it will look like:
<table cellpadding=”3″ width=”700″>
I hope that helps some of you out there that may be having trouble like I did. Also, be sure to check your blog in several web browsers – you may be surprised how different it can look!
Linked up here: