How to add a very simple and good looking image gallery to Blogger?
Here are the written details to show adding image gallery to Bogger. This tutorial also contain the HTML coding.
Let's get started here!
Make sure you have a Blogger blog and have started posting, but you'd like to add a picture gallery to your posts or to a separate page. I'm going to give you some very simple html coding to help in creating a basic good looking picture gallery. Firstly, I suggest that you should keep ready and handy your images to upload and try to use square ones if you can. Three small images fit neatly across a blogger page. Don't worry if you have large images, we're going to use blogger to display smaller ones on the page, and then when your visitors click on them, they'll come up larger in a light box effect. Now time to Log into your blogger account and start a new page or post in your blog. Change from the Compose mode to the HTML mode using the buttons on the top left. Copy and paste the following HTML code into your post:
<table style="width:100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
It should look like this:
This makes up a table with just one row of 3 images. For each additional row of images you would like to add, insert just this html between the </tr> and </table> tags:
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
The coding for a table with 2 rows of 3 columns would then look like this:
Doing good. Great! Let's upload some images in here!
Still in the HTML mode, make sure your cursor is between the first pair of <td> </td> tags. Click on the 'Insert image' icon to bring up the picture uploader. Upload or import your pictures from where ever you have saved them . Select just one image and click "add selected." Another dialogue box will pop up. Choose "None" for alignment and "Small" for image size and click ok. The HTML coding for this image will be inserted in its place in the table. Put the cursor between the next <td> </td> tags and repeat the same process to insert the next picture. All the pictures you uploaded should be in the "From this blog" tab in the add image dialogue box. The HTML will look something like this when you're done:
Now preview your post so you can see how it will look. Here's my collection:
Now, the only thing to remind is, the preview mode of Blogger is that it doesn't let you click on anything, so you won't be able to see the lightbox effect until you publish. Go ahead and do that, you can always revert it back to draft as soon as you're sure it's working if you need to edit further.
Now when you view your page or post you'll be able to click on the images in your gallery and you'll get something like this:
You did it! Now you have a gallery that you can keep adding more rows of images to. Please feel free to leave any constructive feedback, suggestions or questions in the comments and I'll get back to you as quick as I can with concrete solutions. Want to know more about blog writing, please mention. I will make a tutorial on.
thankyou
BashTec