Blogger Thumbnail Gallery
I have been wanting to post a tutorial on this for quite some time now. In this tutorial, you will learn how to arrange images in a thumbnail-gallery-like-format. That means, your images will be close to each other, making a 2x2 or any other dimension that you define. Here's an example of what you will achieve:
I will be using the above four images in this simple tutorial.
 |  |
 |  |
I will be using the above four images in this simple tutorial.
Step 1:
First, you gotta upload the pictures that you want to use using Compose Mode. Use Blogger's updated editor if you want to follow this tutorial, although the idea works just fine with any editor. Next, click on the image once, and click the left most option to make your image small. Refer to the image below:
Doing this will make your image small. Smaller image allows more images to be added in a row. Say you want 4x2 gallery, your individual image size must be really small. You gotta do the maths and decrease your image's width accordingly. You can make your image even smaller by adjusting its width in Edit HTML mode,but that's tangential to this tutorial so I'll cover that on another tutorial if I care enough about that click here to find out how to do it.
First, you gotta upload the pictures that you want to use using Compose Mode. Use Blogger's updated editor if you want to follow this tutorial, although the idea works just fine with any editor. Next, click on the image once, and click the left most option to make your image small. Refer to the image below:
Doing this will make your image small. Smaller image allows more images to be added in a row. Say you want 4x2 gallery, your individual image size must be really small. You gotta do the maths and decrease your image's width accordingly. You can make your image even smaller by adjusting its width in Edit HTML mode,
Step 2:
We will be styling our images in this step. Once you have completed the previous step, locate the HTML portion of the images by clicking on Edit HTML. Here's my HTML portion for the above four images:
My modified code looks like this now:
We will be styling our images in this step. Once you have completed the previous step, locate the HTML portion of the images by clicking on Edit HTML. Here's my HTML portion for the above four images:
<div class="separator" style="clear: both; text-align: center;">Nothing special above, it's just some normal unedited HTML codes for some uploaded images. So to prep it for our gallery, we want to make one minor adjustment. See the highlighted lines above, 2, 7, 12 and 17. Replace the part that says style="margin-left: 1em; margin-right: 1em;" with style="margin-left: 3px;"
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoL2wvNe6QyBwv3ADMBtMGgTOZsydt0ovSLay4jgXXJepLoqomZ7sTwsXX9_wzTn7MuD0KphcRCRHP4o51xrvRkuyIYk7S6l3oeHwy4n0ZVW6w881H3x-1R7xG-ISgtQLTpBBCH-nBBkq/s1600/P1010353_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoL2wvNe6QyBwv3ADMBtMGgTOZsydt0ovSLay4jgXXJepLoqomZ7sTwsXX9_wzTn7MuD0KphcRCRHP4o51xrvRkuyIYk7S6l3oeHwy4n0ZVW6w881H3x-1R7xG-ISgtQLTpBBCH-nBBkq/s200/P1010353_edit.JPG" width="200" />
</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwGsEyGMxeWlV8KlRSrjg_vL-Bz7yhz5ZdVgJcZMKFQoPqfY9_pkytjwFB0rvoGl0Ct9Tuy-RHUkIoRuqpkWpS37oAf4-DG7J6e7YK2Kl8dTkMmRifhxS3ZS9Gzor84Q4WGPmkzbeIUjQD/s1600/P1010354_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwGsEyGMxeWlV8KlRSrjg_vL-Bz7yhz5ZdVgJcZMKFQoPqfY9_pkytjwFB0rvoGl0Ct9Tuy-RHUkIoRuqpkWpS37oAf4-DG7J6e7YK2Kl8dTkMmRifhxS3ZS9Gzor84Q4WGPmkzbeIUjQD/s200/P1010354_edit.JPG" width="200" />
</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuGXbuL3wQNyspTNNl7ob7DQxGHoVTCozGGGMHbUr3OZpa7SR6-l1JdpF5GXeYiSycsjW_O4nvzj0UIiDcJWxAjQ4nlfpYr9EmW4q9aH1NWBDRw1biSjTPsRWI5VoKncfJEIWmtQ_vRra/s1600/P1010363_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuGXbuL3wQNyspTNNl7ob7DQxGHoVTCozGGGMHbUr3OZpa7SR6-l1JdpF5GXeYiSycsjW_O4nvzj0UIiDcJWxAjQ4nlfpYr9EmW4q9aH1NWBDRw1biSjTPsRWI5VoKncfJEIWmtQ_vRra/s200/P1010363_edit.JPG" width="200" />
</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqWOqVBWcBmRL2zKCOQ6viycoOsDVPKxya5b2g8sm4sHZG0VwzakuMwJlrVdiCl_ZkIBGD2B4DEIZllslMer_WGyMcEMWQ0emF1YvK1P8K9B_4a_JobXTwpa6V3zDjdc0gR8AOK50Gj91/s1600/P1010364_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqWOqVBWcBmRL2zKCOQ6viycoOsDVPKxya5b2g8sm4sHZG0VwzakuMwJlrVdiCl_ZkIBGD2B4DEIZllslMer_WGyMcEMWQ0emF1YvK1P8K9B_4a_JobXTwpa6V3zDjdc0gR8AOK50Gj91/s200/P1010364_edit.JPG" width="200" />
</a></div>
My modified code looks like this now:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoL2wvNe6QyBwv3ADMBtMGgTOZsydt0ovSLay4jgXXJepLoqomZ7sTwsXX9_wzTn7MuD0KphcRCRHP4o51xrvRkuyIYk7S6l3oeHwy4n0ZVW6w881H3x-1R7xG-ISgtQLTpBBCH-nBBkq/s1600/P1010353_edit.JPG" imageanchor="1" style="margin-left: 3px;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoL2wvNe6QyBwv3ADMBtMGgTOZsydt0ovSLay4jgXXJepLoqomZ7sTwsXX9_wzTn7MuD0KphcRCRHP4o51xrvRkuyIYk7S6l3oeHwy4n0ZVW6w881H3x-1R7xG-ISgtQLTpBBCH-nBBkq/s200/P1010353_edit.JPG" width="200" />
</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwGsEyGMxeWlV8KlRSrjg_vL-Bz7yhz5ZdVgJcZMKFQoPqfY9_pkytjwFB0rvoGl0Ct9Tuy-RHUkIoRuqpkWpS37oAf4-DG7J6e7YK2Kl8dTkMmRifhxS3ZS9Gzor84Q4WGPmkzbeIUjQD/s1600/P1010354_edit.JPG" imageanchor="1" style="margin-left: 3px;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwGsEyGMxeWlV8KlRSrjg_vL-Bz7yhz5ZdVgJcZMKFQoPqfY9_pkytjwFB0rvoGl0Ct9Tuy-RHUkIoRuqpkWpS37oAf4-DG7J6e7YK2Kl8dTkMmRifhxS3ZS9Gzor84Q4WGPmkzbeIUjQD/s200/P1010354_edit.JPG" width="200" />
</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuGXbuL3wQNyspTNNl7ob7DQxGHoVTCozGGGMHbUr3OZpa7SR6-l1JdpF5GXeYiSycsjW_O4nvzj0UIiDcJWxAjQ4nlfpYr9EmW4q9aH1NWBDRw1biSjTPsRWI5VoKncfJEIWmtQ_vRra/s1600/P1010363_edit.JPG" imageanchor="1" style="margin-left: 3px;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuGXbuL3wQNyspTNNl7ob7DQxGHoVTCozGGGMHbUr3OZpa7SR6-l1JdpF5GXeYiSycsjW_O4nvzj0UIiDcJWxAjQ4nlfpYr9EmW4q9aH1NWBDRw1biSjTPsRWI5VoKncfJEIWmtQ_vRra/s200/P1010363_edit.JPG" width="200" />
</a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqWOqVBWcBmRL2zKCOQ6viycoOsDVPKxya5b2g8sm4sHZG0VwzakuMwJlrVdiCl_ZkIBGD2B4DEIZllslMer_WGyMcEMWQ0emF1YvK1P8K9B_4a_JobXTwpa6V3zDjdc0gR8AOK50Gj91/s1600/P1010364_edit.JPG" imageanchor="1" style="margin-left: 3px;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqWOqVBWcBmRL2zKCOQ6viycoOsDVPKxya5b2g8sm4sHZG0VwzakuMwJlrVdiCl_ZkIBGD2B4DEIZllslMer_WGyMcEMWQ0emF1YvK1P8K9B_4a_JobXTwpa6V3zDjdc0gR8AOK50Gj91/s200/P1010364_edit.JPG" width="200" />
</a></div>
Step 3:
Now that we have prepared our image codes, it's time to create a skeleton for our table. Like I said before, we will be creating a 2x2 table. The following is the HTML to create a basic table.
Now that we have prepared our image codes, it's time to create a skeleton for our table. Like I said before, we will be creating a 2x2 table. The following is the HTML to create a basic table.
<table cellpadding="0" cellspacing="0" align="center">Just a quick example, the skeleton HTML for a 3x2 table would look like this:
<tr>
<td>Image1</td><td>Image2</td>
</tr>
<tr>
<td>Image 3</td><td>Image 4</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>Image1</td><td>Image2</td><td>Image3</td>
</tr>
<tr>
<td>Image4</td><td>Image5</td><td>Image6</td>
</tr>
</table>
Step 4:
What is there left to do? Take the resultant codes from Step 2 and insert them into the table skeleton of Step 3. We have four HTML portions for each image. Copy the first one, and replace the text 'Image1'. Do this for the other three as well. My final code looks like this:
And there you have it, your very own cute thumbnail galleries.
What is there left to do? Take the resultant codes from Step 2 and insert them into the table skeleton of Step 3. We have four HTML portions for each image. Copy the first one, and replace the text 'Image1'. Do this for the other three as well. My final code looks like this:
<table cellpadding="0" cellspacing="0" align="center" >Note: If there seems to be extra spacing between your images, make sure you did not include any line breaks in your image's HTML (pressing enter between tags will introduce a line break).
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoL2wvNe6QyBwv3ADMBtMGgTOZsydt0ovSLay4jgXXJepLoqomZ7sTwsXX9_wzTn7MuD0KphcRCRHP4o51xrvRkuyIYk7S6l3oeHwy4n0ZVW6w881H3x-1R7xG-ISgtQLTpBBCH-nBBkq/s1600/P1010353_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoL2wvNe6QyBwv3ADMBtMGgTOZsydt0ovSLay4jgXXJepLoqomZ7sTwsXX9_wzTn7MuD0KphcRCRHP4o51xrvRkuyIYk7S6l3oeHwy4n0ZVW6w881H3x-1R7xG-ISgtQLTpBBCH-nBBkq/s200/P1010353_edit.JPG" width="200" /></a></div></td><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwGsEyGMxeWlV8KlRSrjg_vL-Bz7yhz5ZdVgJcZMKFQoPqfY9_pkytjwFB0rvoGl0Ct9Tuy-RHUkIoRuqpkWpS37oAf4-DG7J6e7YK2Kl8dTkMmRifhxS3ZS9Gzor84Q4WGPmkzbeIUjQD/s1600/P1010354_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwGsEyGMxeWlV8KlRSrjg_vL-Bz7yhz5ZdVgJcZMKFQoPqfY9_pkytjwFB0rvoGl0Ct9Tuy-RHUkIoRuqpkWpS37oAf4-DG7J6e7YK2Kl8dTkMmRifhxS3ZS9Gzor84Q4WGPmkzbeIUjQD/s200/P1010354_edit.JPG" width="200" /></a></div></td>
</tr>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuGXbuL3wQNyspTNNl7ob7DQxGHoVTCozGGGMHbUr3OZpa7SR6-l1JdpF5GXeYiSycsjW_O4nvzj0UIiDcJWxAjQ4nlfpYr9EmW4q9aH1NWBDRw1biSjTPsRWI5VoKncfJEIWmtQ_vRra/s1600/P1010363_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuGXbuL3wQNyspTNNl7ob7DQxGHoVTCozGGGMHbUr3OZpa7SR6-l1JdpF5GXeYiSycsjW_O4nvzj0UIiDcJWxAjQ4nlfpYr9EmW4q9aH1NWBDRw1biSjTPsRWI5VoKncfJEIWmtQ_vRra/s200/P1010363_edit.JPG" width="200" /></a></div></td><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqWOqVBWcBmRL2zKCOQ6viycoOsDVPKxya5b2g8sm4sHZG0VwzakuMwJlrVdiCl_ZkIBGD2B4DEIZllslMer_WGyMcEMWQ0emF1YvK1P8K9B_4a_JobXTwpa6V3zDjdc0gR8AOK50Gj91/s1600/P1010364_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqWOqVBWcBmRL2zKCOQ6viycoOsDVPKxya5b2g8sm4sHZG0VwzakuMwJlrVdiCl_ZkIBGD2B4DEIZllslMer_WGyMcEMWQ0emF1YvK1P8K9B_4a_JobXTwpa6V3zDjdc0gR8AOK50Gj91/s200/P1010364_edit.JPG" width="200" /></a></div></td>
</tr>
</table>
And there you have it, your very own cute thumbnail galleries.
Category Article Tutorial
