 |  |
 |  |
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;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDt7HCvs_MUOJflUPjCz4FSJBpPl5KOwmiuujk83QCR5cqRl5Sl-hvLJK6DNypBVFZ239TA5rnemIqVq7t-gUV03pq7R4cVAX2dcuxPulfsKKjhnsfMBj-XZAcDe2vhT0k8W6RDMqBDev/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/AVvXsEirDt7HCvs_MUOJflUPjCz4FSJBpPl5KOwmiuujk83QCR5cqRl5Sl-hvLJK6DNypBVFZ239TA5rnemIqVq7t-gUV03pq7R4cVAX2dcuxPulfsKKjhnsfMBj-XZAcDe2vhT0k8W6RDMqBDev/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/AVvXsEgWg7RdxAOG3EwiNZGHGCHCX55o6IE5T9XiV6RIJTgbGfIc60haHyL8E8JPQdKSNZxnUehAQR9bfL9Lyh36faDeK9ud5jz4_m0Ojs8z_QtySaXFw4fkBOqluZQZF_l93Y0uQ9FWhI6Nd8B6/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/AVvXsEgWg7RdxAOG3EwiNZGHGCHCX55o6IE5T9XiV6RIJTgbGfIc60haHyL8E8JPQdKSNZxnUehAQR9bfL9Lyh36faDeK9ud5jz4_m0Ojs8z_QtySaXFw4fkBOqluZQZF_l93Y0uQ9FWhI6Nd8B6/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/AVvXsEhPM_QU-HJUdRjPWjMw7okqvbiwRDOej5UapQVolGMIuOtf2XsDP9IFCrWauq-PUUOVgSvp7wR2el8pzuYoWU8D3ed2df1kcC_r7agDjRhHZBL8KbbPSDNTYsB52LswAup9dt-rFH5ZDCoF/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/AVvXsEhPM_QU-HJUdRjPWjMw7okqvbiwRDOej5UapQVolGMIuOtf2XsDP9IFCrWauq-PUUOVgSvp7wR2el8pzuYoWU8D3ed2df1kcC_r7agDjRhHZBL8KbbPSDNTYsB52LswAup9dt-rFH5ZDCoF/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/AVvXsEh9GTjnvFlyWdAR4jNXJc3VUED7Qx5zIgNn1rmMEHzX8o7Nc5g6xYgCCp28thx0jHeRaNd_QIJviT2hWlscmUW1kgiY0sffw0bEBXzyQaHvIhuISmxNqt9FjiT2hm2PvQJLo6wtZgdC6jyn/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/AVvXsEh9GTjnvFlyWdAR4jNXJc3VUED7Qx5zIgNn1rmMEHzX8o7Nc5g6xYgCCp28thx0jHeRaNd_QIJviT2hWlscmUW1kgiY0sffw0bEBXzyQaHvIhuISmxNqt9FjiT2hm2PvQJLo6wtZgdC6jyn/s200/P1010364_edit.JPG" width="200" /> </a></div>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;"
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/AVvXsEirDt7HCvs_MUOJflUPjCz4FSJBpPl5KOwmiuujk83QCR5cqRl5Sl-hvLJK6DNypBVFZ239TA5rnemIqVq7t-gUV03pq7R4cVAX2dcuxPulfsKKjhnsfMBj-XZAcDe2vhT0k8W6RDMqBDev/s1600/P1010353_edit.JPG" imageanchor="1" style="margin-left: 3px;"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDt7HCvs_MUOJflUPjCz4FSJBpPl5KOwmiuujk83QCR5cqRl5Sl-hvLJK6DNypBVFZ239TA5rnemIqVq7t-gUV03pq7R4cVAX2dcuxPulfsKKjhnsfMBj-XZAcDe2vhT0k8W6RDMqBDev/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/AVvXsEgWg7RdxAOG3EwiNZGHGCHCX55o6IE5T9XiV6RIJTgbGfIc60haHyL8E8JPQdKSNZxnUehAQR9bfL9Lyh36faDeK9ud5jz4_m0Ojs8z_QtySaXFw4fkBOqluZQZF_l93Y0uQ9FWhI6Nd8B6/s1600/P1010354_edit.JPG" imageanchor="1" style="margin-left: 3px;"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWg7RdxAOG3EwiNZGHGCHCX55o6IE5T9XiV6RIJTgbGfIc60haHyL8E8JPQdKSNZxnUehAQR9bfL9Lyh36faDeK9ud5jz4_m0Ojs8z_QtySaXFw4fkBOqluZQZF_l93Y0uQ9FWhI6Nd8B6/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/AVvXsEhPM_QU-HJUdRjPWjMw7okqvbiwRDOej5UapQVolGMIuOtf2XsDP9IFCrWauq-PUUOVgSvp7wR2el8pzuYoWU8D3ed2df1kcC_r7agDjRhHZBL8KbbPSDNTYsB52LswAup9dt-rFH5ZDCoF/s1600/P1010363_edit.JPG" imageanchor="1" style="margin-left: 3px;"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPM_QU-HJUdRjPWjMw7okqvbiwRDOej5UapQVolGMIuOtf2XsDP9IFCrWauq-PUUOVgSvp7wR2el8pzuYoWU8D3ed2df1kcC_r7agDjRhHZBL8KbbPSDNTYsB52LswAup9dt-rFH5ZDCoF/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/AVvXsEh9GTjnvFlyWdAR4jNXJc3VUED7Qx5zIgNn1rmMEHzX8o7Nc5g6xYgCCp28thx0jHeRaNd_QIJviT2hWlscmUW1kgiY0sffw0bEBXzyQaHvIhuISmxNqt9FjiT2hm2PvQJLo6wtZgdC6jyn/s1600/P1010364_edit.JPG" imageanchor="1" style="margin-left: 3px;"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GTjnvFlyWdAR4jNXJc3VUED7Qx5zIgNn1rmMEHzX8o7Nc5g6xYgCCp28thx0jHeRaNd_QIJviT2hWlscmUW1kgiY0sffw0bEBXzyQaHvIhuISmxNqt9FjiT2hm2PvQJLo6wtZgdC6jyn/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"> <tr> <td>Image1</td><td>Image2</td> </tr> <tr> <td>Image 3</td><td>Image 4</td> </tr> </table>Just a quick example, the skeleton HTML for a 3x2 table would look like this:
<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" > <tr> <td><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDt7HCvs_MUOJflUPjCz4FSJBpPl5KOwmiuujk83QCR5cqRl5Sl-hvLJK6DNypBVFZ239TA5rnemIqVq7t-gUV03pq7R4cVAX2dcuxPulfsKKjhnsfMBj-XZAcDe2vhT0k8W6RDMqBDev/s1600/P1010353_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDt7HCvs_MUOJflUPjCz4FSJBpPl5KOwmiuujk83QCR5cqRl5Sl-hvLJK6DNypBVFZ239TA5rnemIqVq7t-gUV03pq7R4cVAX2dcuxPulfsKKjhnsfMBj-XZAcDe2vhT0k8W6RDMqBDev/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/AVvXsEgWg7RdxAOG3EwiNZGHGCHCX55o6IE5T9XiV6RIJTgbGfIc60haHyL8E8JPQdKSNZxnUehAQR9bfL9Lyh36faDeK9ud5jz4_m0Ojs8z_QtySaXFw4fkBOqluZQZF_l93Y0uQ9FWhI6Nd8B6/s1600/P1010354_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWg7RdxAOG3EwiNZGHGCHCX55o6IE5T9XiV6RIJTgbGfIc60haHyL8E8JPQdKSNZxnUehAQR9bfL9Lyh36faDeK9ud5jz4_m0Ojs8z_QtySaXFw4fkBOqluZQZF_l93Y0uQ9FWhI6Nd8B6/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/AVvXsEhPM_QU-HJUdRjPWjMw7okqvbiwRDOej5UapQVolGMIuOtf2XsDP9IFCrWauq-PUUOVgSvp7wR2el8pzuYoWU8D3ed2df1kcC_r7agDjRhHZBL8KbbPSDNTYsB52LswAup9dt-rFH5ZDCoF/s1600/P1010363_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPM_QU-HJUdRjPWjMw7okqvbiwRDOej5UapQVolGMIuOtf2XsDP9IFCrWauq-PUUOVgSvp7wR2el8pzuYoWU8D3ed2df1kcC_r7agDjRhHZBL8KbbPSDNTYsB52LswAup9dt-rFH5ZDCoF/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/AVvXsEh9GTjnvFlyWdAR4jNXJc3VUED7Qx5zIgNn1rmMEHzX8o7Nc5g6xYgCCp28thx0jHeRaNd_QIJviT2hWlscmUW1kgiY0sffw0bEBXzyQaHvIhuISmxNqt9FjiT2hm2PvQJLo6wtZgdC6jyn/s1600/P1010364_edit.JPG" imageanchor="1" style="margin-left: 3px;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GTjnvFlyWdAR4jNXJc3VUED7Qx5zIgNn1rmMEHzX8o7Nc5g6xYgCCp28thx0jHeRaNd_QIJviT2hWlscmUW1kgiY0sffw0bEBXzyQaHvIhuISmxNqt9FjiT2hm2PvQJLo6wtZgdC6jyn/s200/P1010364_edit.JPG" width="200" /></a></div></td> </tr> </table>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).
And there you have it, your very own cute thumbnail galleries.
Again the "Affiliates". (I previously commented on the manual resizing tutorial.)
ReplyDeleteQ: If I need/want to add more thumbnails, do I have to edit/add to the skeleton html again? Or can I just make the skeleton entirely and then add the images as they come? Will it disrupt the look of the page if I do it before hand?
Thanks Yoboy. You really are the Blog Saint. ~ Raina
RaindropSoup: HTML is very flexible. If you decide to add a new row to your existing table you can edit it whenever you want. Just use <tr></tr> to add a new row, and <td></td> to add a new column. You might want to check 'colspan' and 'rowspan' attributes if you want to merge two or more cells. There are hundreds (if not thousands) of tutorials out there when it comes to HTML.
ReplyDeleteAlternatively, you can create a skeleton first. You're not 'obligated' to insert an element into it. The spot will be left blank and will not take any space as long as the whole row is empty. Try this for yourself. Copy the HTML that I have in my last step, paste it in Edit HTML mode, and delete the HTML portion in between any one of the <td></td> tags. Personally, I prefer this method because it is more tidy and you'll be able to see the skeleton of your table clearly before adding an element into it.
Whether or not it will take space, it depends. Consider the following case for example:
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>Image1</td><td>Image2</td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
I have 2x2 table up there, so there are 4 cells. But the bottom two cells will not take any space because there is no elements in that row. Consider the same structure below:
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>Image1</td><td>Image2</td>
</tr>
<tr>
<td>Image 3</td><td></td>
</tr>
</table>
In this case, the second row has one element in it. The [2,1] cell will take some space, but the last cell [2,2] will not. Nevertheless, a new line has been spanned. The bottomline is, if your row has no elements in it, it will be as good as nothing even if you have defined it in the table skeleton.
The first 2 tables look exactly the same to me - I think you've made a mistake...?
DeleteThe second row in the second table has an element, the one in the first table does not.
DeleteFor some reason, I had to redo two pages of codes with the 'jump'. Mozilla was saying it couldn't open that URL. So I was afraid to try out any part of a tutorial.
ReplyDeleteThanks again, Yoboy. Oh, I like that you put the tutorials on the left column =)
I'm using this on my blog and I think it looks great, definitely tons better than how it looked before. Thank you for your tutorial! I know zip about this stuff but was able to make a pretty page just with this information you've provided. Thank you!
ReplyDelete@Mike + Desi: I was expecting for a 'but' somewhere in your comment. Glad you didn't leave any. You'll have more fun once you get the hang of it, trust me. Cheers and God bless.
ReplyDeleteGreat tutorial! What if I want to remove the individual borders around the pictures and instead have all the pictures in one large border?
ReplyDeleteThanks this was a lot of help! Is there a way to do this with adding captions for each pic?
ReplyDeleteThanks!!
~ M
@1000 + Books to Read: Good question. And yes you can. The only difference will be the code in step 2. First, add your captions, and then proceed with this tutorial as usual. Your code in step 2 will look something like this instead:
ReplyDelete<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-IxiWPNd_oY4/TP-xMU_1LWI/AAAAAAAACT4/5gJ3SHMRr8U/s1600/banner.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-IxiWPNd_oY4/TP-xMU_1LWI/AAAAAAAACT4/5gJ3SHMRr8U/s1600/banner.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cheers</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-IxiWPNd_oY4/TP-xMU_1LWI/AAAAAAAACT4/5gJ3SHMRr8U/s1600/banner.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://4.bp.blogspot.com/-IxiWPNd_oY4/TP-xMU_1LWI/AAAAAAAACT4/5gJ3SHMRr8U/s1600/banner.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cheers</td></tr>
</tbody></table>
Cheers.
@Kristine: The border is not part of the tweak, it comes with the template. Use the contact form and get in touch with me, and I'll assist you in removing the border from your template. Cheers.
ReplyDeleteYou have just MADE my day. Been trying to do this for such a long time. Now it works. Thank you so so much.
ReplyDeletehttp://clairebutlerphoto.blogspot.com
@Claire: Visited your blog, nice work :) Good job.
ReplyDeleteThank you! This helped me a lot.
ReplyDelete@Melissa: Happy to help, as always.
ReplyDeletemaksih atas infonya
ReplyDelete@Lutfie: You're welcome.
ReplyDeleteHelp! I can't get past step #2. This is the code I have. I don't see the same code that you have for the search/replace.
ReplyDeleteI have this:
style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"
Do I replace that?
@Jenny: Looks like your image has been left-aligned. And yes, replace that line.
ReplyDeleteThanks so much! It worked perfectly. I have one more question. There's a line around each picture that I do not want to have. Do you know how to remove it or am I stuck with it?
ReplyDeleteI made pictures with rounded boxes which is why I don't want the square box around the rounded box.
http://handmadebyjt.blogspot.com/p/my-shop.html
@Jenny: We call it the 'shadow'. I find it annoying. Nothing is wrong with your image. Your template applies shadows to images automatically. That is why you're seeing the shadow there. You have two options now:
ReplyDelete1) You can remove the 'shadowing' completely off your blog. See the tutorial below:
Remove Blogger Picture Shadow and Border
2)You can keep the 'shadow' feature, and just remove the shadows from these 6 images. It is more tedious. Go to Dashboard - Design - Edit HTML - Download Full Template (for backup purposes) - Find for </b:skin> - Paste the following directly below </b:skin> -
<b:if cond='data:blog.url == "http://handmadebyjt.blogspot.com/p/my-shop.html"'>
<style>
.post-body img, .post-body .tr-caption-container{
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
</style>
</b:if>
This was very helpful. I have a new problem though. Sometimes my pictures are not aligned in my 1 x 2 box. See this post: http://handmadebyjt.blogspot.com/2011/10/my-city-ontario-science-centre.html
ReplyDeleteDo you know what causes this?
@Jenny: Make sure you have no line breaks in your HTML code. A line break doesn't have to be an empty line. It could be a simple 'new line'. Just go back to the code, and make sure the codes act like one continuous line, instead of few separate lines. If it doesn't solve the problem, use the 'Ask A Question' page to create a new question, and post your HTML in there. I'll try to see what's wrong.
ReplyDeleteThank you so much! I went back to fiddle with it and I think I fixed it because I don't see it any more. Many thanks!!!!
ReplyDelete@Jenny: Glad you got them fixed. Cheers.
ReplyDeleteHi YoboY, just curious... why do we need to change the style to style="margin-left: 3px;" By accident, I forgot to do that step but it still turned out great. Thanks, J
ReplyDelete@Jenny: Removing the margin will bring the pictures closer with each other = more space to make your images larger.
ReplyDeleteHIIIII YOBOY...
ReplyDeleteHow can i create more photo gallaries in my blog.
I want to create photo gallary for different diffrent evernts.
for example : marriage photo, family photos, office events photo etc.
I want to create photo gallery where i can store separate photos as per the events.......
Thanks & Regards,
AMOL
HHIIIIII YOBOY.........
ReplyDeleteI have to create photo gallery in my blog....
In that gallery i have to make different different albums.....
like marrieage album...
office event album...
family album...
so how can i create this different album in the gallery pls tell me
@amol: You can create separate pages for your albums. You can create up to 20 pages. To create a page, go to Dashboard - Pages. To create the gallery, just refer to the tweak in this page :)
ReplyDeleteCheers.
@Hunnyu: Glad my posts inspired you :) Happy blogging..
ReplyDeleteHi Yoboy... Just one more question re: my post from October 2011. If I want to remove the shadow pic from more than one page, how do I enter more than 1 URL to the code you gave me? The code was a conditional i.e. if cond = my page, then....
ReplyDeleteThanks in advance!
Jenny
Hi YoboY, re: your response on 10/1/2011 to my question, how do I add another blogger page to the code you gave me? I want to remove the lines around the pictures for a couple more pages.
ReplyDeleteThanks in advance!
Jenny
Hi YoboY, re: your response on 10/1/2011 to my question, how do I add another blogger page to the code you gave me? I want to remove the lines around the pictures for a couple more pages.
ReplyDeleteThanks in advance!
Jenny
@Jenny: Sorry for my late reply. If you have more than 1 pages, simply copy and paste the same code again, but change the address in the code.
ReplyDeleteBut I've just thought of another way, which is much easier. Before you place your images into the table, make a slight change to it. You need to change the word 'separator' to an ID that I'm about to give. See the link below. Skip Step 2, and follow all other steps. Doing this right will get rid of borders/shadows from any single image. Do this for all the images that you want to be borderless and shadowless.
Removing border/shadow from any single image
ok I'm slow and new to this. Where do I post the knew table code?
ReplyDeleteWhen you are composing your post, you can switch between two different editor modes: Compose mode and HTML mode. All the HTML should go in HTML mode :)
DeleteHi Yoboy, wondering if you can help. Could you please take a look at this link: http://handmadebyjt.blogspot.com/p/recipes.html
ReplyDeleteI did a 3 x 2 table but the spacing between the first line and 2nd line under the title "Sweet Stuff" seems to be extra large. Do you know how to fix it? I can't seem to see what is causing the gap. Thank you so much!
Hi Jenny. All 5 of your images (under 'Sweet Stuffs') seem to have a bottom margin associated to them. You gotta remove these margins. Edit this 3x2 table, find and delete the following tags:
Deletemargin-bottom: 1em;
You'll find 5 of them, one for each image. Delete all 5. Here's how it suppose to look like (feel free to use this if you want):
Jenny's table code
Thank you so much YoboY! I don't know I ended up with a margin underneath but that solved my problem. Once again, you saved the day!!! Thanks again so much!
ReplyDeleteNo problem at all. Enjoy your weekend :)
DeleteHi YoBoy, I hope you had a good weekend too! One more thing I wanted to ask you about... I noticed that no matter how many times I press "enter", I never get a space line between the "Sweet Stuff" pics and the words "Frozen Treats". Do you mind taking one more peek at the page? http://handmadebyjt.blogspot.com/p/recipes.html
ReplyDeleteThat is weird. When I analyse your raw code, I do see line breaks in there, but it doesn't show up in the actual page. If you don't mind, can I take a look at your table code? Edit this post - switch to HTML mode - copy your post code (everything in there) - paste it in www.pastebin.com, and get back to me with the link. I'll try to replicate the issue.
DeleteHi YoBoy, thanks for taking a look at it. Here is the link from pastebin: http://pastebin.com/npMbs8xV
DeleteSorry it's a bit of a mess.
Thanks again!
Jenny,
DeleteHere's what you can do. Change the following line:
<table align="left" cellpadding="0" cellspacing="0">
Into this:
<table align="left" cellpadding="0" cellspacing="0" style="margin-bottom: 50px;">
You have two have them, change both. Change the value 50px in the new line to adjust the spacing between the tables.
Thank you, thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you,thank you, thank you!
ReplyDeleteI have been looking for something like this and no one could help me. Thank you soooo much!
That is one of a kind :) +1 to you~
DeleteI wanted to say Thank you for providing this tutorial. I have keep coming back to it everytime I need to add a new table to my blog. Feel free to check it out and let me know what you think
ReplyDeletethanks
http://motivatedmommyoftwo.blogspot.com/
Hi Shirley,
DeleteAdorable!
And here's a handy trick. If you're a frequent user of HTML tables, you can place the code in your post's template so that the code will be there each time you compose a new post. I have one in my template, and when I don't need it, I'd just delete the code and publish the post without it. If you want to place the code in your post template, go to Dashboard - Settings - Posts and Comments - Post Template - Add - paste the code for tables there. Convenient things are fun :P
Cheers!
Yoga..
Thank you so much for the tip, definitively going to use it. I tend to come back to this post for reference.
DeleteYou're most welcome :)
DeleteSo simple but works so well! thank you very much!
ReplyDeleteI'm glad you think so :)
DeleteThank you so much for this great tutorial! I found it looking thru your tutorial list while I am waiting to work out posting and getting answers to my other newbie questions. I just tried out this tutorial on my practice blog, and your tip about the spaces was very helpful also because my thumbnails were not evenly spaced. But I was able to figure out what the HTML code for the line breaks is and I found two - deleted them and my array is perfect! Now I will know what to do when I am ready with photos to post this way on my "real" blog!
ReplyDeleteAh, sounds like you're getting the hang of it. You're gonna be a self-taught professional in no time :)
DeleteYoga, thanks for the awesome post. It's been invaluable (along with many others of yours) in making my blog a little more how I want it.
ReplyDeleteI shot you a question through the ask a question page cos there's something I still can't work out re line spacing.
Just wanted to say thanks in advance. Awesome site.
Hi Michael,
DeleteThanks! I've replied you at the forum.
Cheers :)
I'm pretty sure that this post added years back onto my life! Thank you!
ReplyDeletethe other day I forgot to do this: "Replace the part that says style="margin-left: 1em; margin-right: 1em;" with style="margin-left: 3px;"" and from what I could tell, nothing was different, so what does this step do?
Thanks!
It's supposed to remove some extra padding between the images to make your gallery look a little bit more neat. But if you're not seeing any difference, you probably already have an overriding code somewhere in your template that's doing a similar negating job :)
DeleteCheers..
Hello hello! Thank you SO much for this post. I think it saved my life. I relaized the other day that I forgot to replace "style="margin-left: 1em; margin-right: 1em;" with style="margin-left: 3px;"" but I didn't notice any problems with forgetting to do that. So what exactly does that step do?
ReplyDeleteThanks again!
It's supposed to remove some extra padding between the images to make your gallery look a little bit more neat. But if you're not seeing any difference, you probably already have an overriding code somewhere in your template that's doing a similar negating job :)
DeleteCheers..
Hi Yoboy
ReplyDeleteI'm trying to follow your instructions but I cannot find the part I have to replace in step 2
After uploading the photos, I added captions to each photo (as I read your answer to one the above comments), and also added a link to each photo.
I also adapted to size of the photos
What I get is this (example for 1 photo):
http://winniedummyblog.blogspot.co.il/2013/01/question.html
Which part do I have to replace?
Thanks, Winnie
Hi Winnie,
DeleteIt'll be much easier if you do the styling (Step 2) before captioning, as captioning will wrap your whole code in a table (which means you're gonna have to deal with more unnecessary codes).. In the code that you already have, all you have to do is remove this part:
style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;
Cheers :)
Hi Yoboy,
ReplyDeleteYour site is great. I have used a lot of info from here to customize my site.
I have some questions:
How do you change the header on the other pages to look like the header on my homepage? My header links only show up only when I hover on them. That is not how it is on the homepage. The links show up on the home page all fine. When I hover on the header and click on the links , it opens up in a new window.
My Blog is http://bitesncrumbs.blogspot.com/
I have customized the pagesto have a snapshot view. The homepage has sidebar view.
Example: When I click on the Desserts page, I see all the desserts arranged with the Flipcard view. However on this page, you will see the header font slightly different and header links all gone. The Home link is gone. If you hover on the header links and try to click it, it opens the page in another window. I would like it to open in the same window. Can you please help?
Hi Sharon,
Delete1) The following should help to retain the font stylings. Add it to your Add CSS box:
#header.header .title a h1{
font-style: normal !important;
}
.header-bar span.title h3 {
font-size: 16px !important;
font-weight: bold !important;
}
2. I'm afraid there isn't anything we can do to prevent the pages from opening a new tab.
3. As for the missing home links, I reckon you can get this fixed by first going to Dashboard - Layout - Pages - Edit, and uncheck 'Home' so that it won't show in your Header bar. Next, go to Dashboard - Pages - New Page - Web Address, and add your homepage and title it Home.
Cheers :)
Thanks Yoboy.. These worked :) Im so glad.. I just wish there was a solution to stop the pages from opening in a new window. Also, is there a way I can add the pin button to my blog posts and images?
ReplyDeleteHi Sharon,
DeleteWhen you mentioned the pin button, are you referring to the one from Pinterest?
I would like to know this too! It's the pin that hovers over each picture
DeleteHi Jenny,
DeleteI'm afraid this pin you're referring to is entirely foreign to me. Do you have a page/link I could look at?
oh my goodness, you solved my problem. thanks Yoboy :D
ReplyDeleteMost welcome JOH :)
DeleteYEEEEEEAAAAAAAHHHHHH BUDDDDY!!! Awesome thank you for doing this!! You are a legend!!
ReplyDeleteI believe that the Lightbox function is not working properly on the page with my tabled images.
ReplyDeleteIt does seem to work on my landing page.
Any idea ?
Mind if I take a look at the page where your thumbnails are at?
DeleteOfcourse! Sorry I forgot to add the links in my post.
Deletehttp://www.michielvdheuvel.com/p/gallery.html
The first two images link to a static page and work fine. The others just open in a new tab. However I made sure that the Lightbox option was enabled under Settings.
Thanks for looking into it !
I´m not sure if I replied, but if I did not; here is the gallery.
Deletehttp://www.michielvdheuvel.com/p/gallery.html
My blog thumbnail tables don't seem respond at all now.
I haven't been able to replicate this issue in my blog, so I'm not entirely certain if the workaround in the blog below will work - but it's worth a shot. Give it a whirl and let me know how it goes.
Deletehttp://blogging.nitecruzr.net/2013/03/the-lightbox-image-display-option.html
I've tried that solution but it did not solve the problem.
DeleteI'm sorry that didn't work. Have you tried creating a dummy blog using the same account, preferably with one of the default templates, and see if the lightbox works there? If it does, we'd at least know there's something wrong with your current template.
DeleteNo problem! I'm very glad of your assistance :)
DeleteI tried creating a dummy blog as you suggested and copied my hmtl code from my website's Gallery page. But the problem persists!
Originally I wanted to make the thumbnails in my website's gallery the same size each (400 x 225 ) in a 3x2 table (as currently seen on my page)
As you can see, my images are not all alike. Even though I removed the height and width code, as well as configuring them to s400.
The results is this : http://sajdhajdhnjasdz12323sd.blogspot.nl/p/blog-page.html
I tried to fix it on my own by uploading 400x225 custom thumbnails and copying their respective src link and pasting them into the table.
I figured it would work, but then the Lightbox failed working. Which is where we're at now. I hope my explanation helped you better understand what I'm messing with!
I just visited this page of yours and the lightbox is working there:
Deletehttp://sajdhajdhnjasdz12323sd.blogspot.nl/p/blog-page.html
Since it wasn't working on your primary template, I'm thinking there is something in your template that's failing the lightbox. How much of a modification have you made to the template?
Not much! I am currently re-building the blog from scratch to see where things go wrong.
DeleteHey there! Just wanted to let you know that I can't see where things go wrong. I am currently just uploading images and putting them next to eachother by deleting
Deletethe div class seperator line between two images. This seems to work for now. Thanks again for looking into it.
Glad you've got things in control now. Sometimes things happen - and it takes more time to figure out the fault than starting from scratch :D
DeleteHI!!! I am hoping you still answer questions! I got the code and everything was going great but when I switched to compose the photos on each row are touching. How do I add a little space between each photo???
ReplyDeleteStill do. It'll be easier if I could just advise based on what you've already got going. Have you published this page yet?
DeleteI've been looking for a tutorial on how to do this for days and this is the only one that had worked well for me. Great post!!
ReplyDelete