Below is the tutorial to include a four column Gallery on your blog like the one HERE.
This Gallery will have a picture of your project plus a link back to the original post. I've tried to make it as easy as possible to understand, so hopefully you won't have any problems if you add one to your blog :)
To start, you want to create a new Page. To create a Page, go to your Dashboard and from the drop-down menu, select Pages. Once the screen pops up, there should be a button on the top that says "New Page". Click on it.
Once the new Page opens, click on "Html".
This is the code you need for the four-column gallery:
<table cellpadding="3">
<tbody>
<td align="center" width="25%"><a href="http://yourprojectposturl.com/" target="_blank"> <img src="http://yourimageurl.jpg" width="140" /><br />Project Name</a></td>
- So it should look like this now:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="http://yourimageurl.jpg" width="140" /><br />Project Name</a></td>
2. For the "http://yourimageurl.jpg" you are going to add the location of the picture you want to post in the gallery. My example is for those of you using Picasa Web Albums, which if you using Blogger probably are using Picasa.
1. Click on this link to open Picasa: https://picasaweb.google.com/
2. Log in if needed. Your Picasa albums should all be displayed. You may have several different ones. I have five albums that have the pictures from my blog posts and then several others for dt blogs I've been on, and some random pictures. You will need to find the album that has the picture you are looking for. The Album should have have your blog name and then beneath there will be a number of photos. This is what my most recent album looks like:
Most of the photos in the album will be in chronological order, so it's pretty easy to find the pictures you are looking for. The newest photos will be at the very bottom. If you don't see the photo you are looking for, check the other albums.
Find the picture you want to include in the gallery. Right click and a pop-up box will appear:
Click on "Copy Image Location". Then you will paste the copied URL into the highlighted area of the code:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="http://yourimageurl.jpg" width="140" /><br />Project Name</a></td>
It should look like this now:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZcuzloz_MvOU8bc7WHjofV2cfpvZHuTCHA3prlgxRF5l2OfW4g6Ve7Uyz6bxNZkIZsVHA42Kf5Jdyur-kEAUphzjxLYgjqrC4B3sjSv3uPwIdYA2-o7-2z9QQKcc2l-DCTa6qSDIYcpr/w121-h209-p-no/" width="140" /><br />Project Name</a></td>
3. Next is the Project Name. That's the easiest one. You just type in whatever you want it to say below the picture. I kept mine to one line, but you can add as much of a description as needed.
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZcuzloz_MvOU8bc7WHjofV2cfpvZHuTCHA3prlgxRF5l2OfW4g6Ve7Uyz6bxNZkIZsVHA42Kf5Jdyur-kEAUphzjxLYgjqrC4B3sjSv3uPwIdYA2-o7-2z9QQKcc2l-DCTa6qSDIYcpr/w121-h209-p-no/" width="140" /><br />Project Name</a></td>
It should look like this now:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZcuzloz_MvOU8bc7WHjofV2cfpvZHuTCHA3prlgxRF5l2OfW4g6Ve7Uyz6bxNZkIZsVHA42Kf5Jdyur-kEAUphzjxLYgjqrC4B3sjSv3uPwIdYA2-o7-2z9QQKcc2l-DCTa6qSDIYcpr/w121-h209-p-no/" width="140" /><br />Shabby Flower Tag</a></td>
You do this for each entry into the Gallery. You may need to play around with the width if the Gallery is to wide or to narrow for your page. I wanted my pictures to be more or less the same size, so if the pictures were taller, instead of keeping the width="140", I delete the width and add: height="170". So it would look like this:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZcuzloz_MvOU8bc7WHjofV2cfpvZHuTCHA3prlgxRF5l2OfW4g6Ve7Uyz6bxNZkIZsVHA42Kf5Jdyur-kEAUphzjxLYgjqrC4B3sjSv3uPwIdYA2-o7-2z9QQKcc2l-DCTa6qSDIYcpr/w121-h209-p-no/" height="170" /><br />Shabby Flower Tag</a></td>
Again, you may need to play around with the picture sizes to get what you want. Also, you can see that there is an open space on the top row of my gallery. It's where I will add my next project since I'm keeping the most recent projects on the top. So to leave a blank space, you just delete one line in the code:
</tr>
So it will look like this:
</tr>
When you are ready to add your next project, you just need to add the one line of code back in:
<td align="center" width="25%"><a href="http://yourprojectposturl.com/" target="_blank"> <img src="http://yourimageurl.jpg" width="140" /><br />Project Name</a></td>
I hope this is easy to understand. If you decide to add one to your blog, please leave me a comment so I can see it!!
Thanks so much for stopping by :)
This Gallery will have a picture of your project plus a link back to the original post. I've tried to make it as easy as possible to understand, so hopefully you won't have any problems if you add one to your blog :)
To start, you want to create a new Page. To create a Page, go to your Dashboard and from the drop-down menu, select Pages. Once the screen pops up, there should be a button on the top that says "New Page". Click on it.
Once the new Page opens, click on "Html".
This is the code you need for the four-column gallery:
<tbody>
<tr>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
</tr>
</tbody></table>
You can add as many rows as you like, just copy the code between the <tr> and the </tr> for another row. So if you wanted three rows, the code would look like this:
<table cellpadding="3">
<tbody>
</tr>
</tr>
</tr>
</tbody></table>
The areas in bold are where you are going to add your own code.
1. For http://yourprojectposturl.com/" you paste in the url address of your blog post.
- Open the original blog post
- In the address bar, copy the URL:
- Paste in the copied URL into the highlighted area of the code:
</tbody></table>
You can add as many rows as you like, just copy the code between the <tr> and the </tr> for another row. So if you wanted three rows, the code would look like this:
<table cellpadding="3">
<tbody>
<tr>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
</tr>
<tr>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
</tr>
<tr>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
</tr>
</tbody></table>
The areas in bold are where you are going to add your own code.
1. For http://yourprojectposturl.com/" you paste in the url address of your blog post.
- Open the original blog post
- In the address bar, copy the URL:
- Paste in the copied URL into the highlighted area of the code:
<td align="center" width="25%"><a href="http://yourprojectposturl.com/" target="_blank"> <img src="http://yourimageurl.jpg" width="140" /><br />Project Name</a></td>
- So it should look like this now:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="http://yourimageurl.jpg" width="140" /><br />Project Name</a></td>
1. Click on this link to open Picasa: https://picasaweb.google.com/
2. Log in if needed. Your Picasa albums should all be displayed. You may have several different ones. I have five albums that have the pictures from my blog posts and then several others for dt blogs I've been on, and some random pictures. You will need to find the album that has the picture you are looking for. The Album should have have your blog name and then beneath there will be a number of photos. This is what my most recent album looks like:
Most of the photos in the album will be in chronological order, so it's pretty easy to find the pictures you are looking for. The newest photos will be at the very bottom. If you don't see the photo you are looking for, check the other albums.
Find the picture you want to include in the gallery. Right click and a pop-up box will appear:
Click on "Copy Image Location". Then you will paste the copied URL into the highlighted area of the code:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="http://yourimageurl.jpg" width="140" /><br />Project Name</a></td>
It should look like this now:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZcuzloz_MvOU8bc7WHjofV2cfpvZHuTCHA3prlgxRF5l2OfW4g6Ve7Uyz6bxNZkIZsVHA42Kf5Jdyur-kEAUphzjxLYgjqrC4B3sjSv3uPwIdYA2-o7-2z9QQKcc2l-DCTa6qSDIYcpr/w121-h209-p-no/" width="140" /><br />Project Name</a></td>
3. Next is the Project Name. That's the easiest one. You just type in whatever you want it to say below the picture. I kept mine to one line, but you can add as much of a description as needed.
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZcuzloz_MvOU8bc7WHjofV2cfpvZHuTCHA3prlgxRF5l2OfW4g6Ve7Uyz6bxNZkIZsVHA42Kf5Jdyur-kEAUphzjxLYgjqrC4B3sjSv3uPwIdYA2-o7-2z9QQKcc2l-DCTa6qSDIYcpr/w121-h209-p-no/" width="140" /><br />Project Name</a></td>
It should look like this now:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZcuzloz_MvOU8bc7WHjofV2cfpvZHuTCHA3prlgxRF5l2OfW4g6Ve7Uyz6bxNZkIZsVHA42Kf5Jdyur-kEAUphzjxLYgjqrC4B3sjSv3uPwIdYA2-o7-2z9QQKcc2l-DCTa6qSDIYcpr/w121-h209-p-no/" width="140" /><br />Shabby Flower Tag</a></td>
You do this for each entry into the Gallery. You may need to play around with the width if the Gallery is to wide or to narrow for your page. I wanted my pictures to be more or less the same size, so if the pictures were taller, instead of keeping the width="140", I delete the width and add: height="170". So it would look like this:
<td align="center" width="25%"><a href="http://indymermaid.blogspot.com/2014/03/remembering-these-special-moments.html" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZcuzloz_MvOU8bc7WHjofV2cfpvZHuTCHA3prlgxRF5l2OfW4g6Ve7Uyz6bxNZkIZsVHA42Kf5Jdyur-kEAUphzjxLYgjqrC4B3sjSv3uPwIdYA2-o7-2z9QQKcc2l-DCTa6qSDIYcpr/w121-h209-p-no/" height="170" /><br />Shabby Flower Tag</a></td>
Again, you may need to play around with the picture sizes to get what you want. Also, you can see that there is an open space on the top row of my gallery. It's where I will add my next project since I'm keeping the most recent projects on the top. So to leave a blank space, you just delete one line in the code:
<tr>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
</tr>
So it will look like this:
<tr>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
<td align="center"
width="25%"><a href="http://yourprojectposturl.com/"
target="_blank"> <img src="http://yourimageurl.jpg"
width="140" /><br />Project Name</a></td>
</tr>
When you are ready to add your next project, you just need to add the one line of code back in:
<td align="center" width="25%"><a href="http://yourprojectposturl.com/" target="_blank"> <img src="http://yourimageurl.jpg" width="140" /><br />Project Name</a></td>
I hope this is easy to understand. If you decide to add one to your blog, please leave me a comment so I can see it!!
Thanks so much for stopping by :)
30 comments:
Super AWESOME tutorial!!! LOVE this idea so now I can go back and revisit all your amazing projects!!!
Thanks for sharing this Lisa!
thank you Lisa for sharing this. I am not tech savy, so probable need some time to digest this. Pinning this on my pinterest, it is definitely useful for blogger.
Thanks Lisa for the information! I would love to add this at some point~not going there right now though as I would probably delete my blog..haha! I would have to say my mind is on overload these days and surely not thinking clearly to take this on but definitely will keep this for a later date. I am off to another funeral this week :( Now my Uncle passed away over the wknd. Geeze..really? Enough already, ha?
I am glad I will have Arya today, she will put a smile right on my face in no time! Have a good week Lisa and we will stay in touch :)
Sherrie K
You are brilliant! I love your gallery! Fabulous tutorial! I am going to bookmark this so I can come back and maybe I will try this! Thank you, Lisa! Have a wonderful day!
I love your beautfiul gallery, thank you for the info. hugs
This is AWESOME!!! TFS! I am going to go through it and practice...
Have a wonderful day my fabulous friend,
M'
*Crafting With Creative M*
Great information Lisa.
OHHHH! You SO ROCK, Lisa! Thank you so much for posting this!! I wondered how to do it...
Thanks again, Lisa!!
Yikes...I'm scared...love your gallery!!!
I love your gallery , this is such a wonderful way to showcase your stunning projects !!! Thank you soo much for showing us how to do this !!!
Hope you have a wonderful day !!
Hugs,
Mayra
Mayrasdesigns.blogspot.com
Awesome tutorial! Ty for sharing it:)
Gosh, thanks so much for this very intensive tutorial. Hadn't thought about doing this, and wouldn't have known how to begin. I've got this page bookmarked, and will try to get back to read through the how-to thoroughly and perhaps attempt this most excellent idea. You're just brilliant! (smart too!) Hugs & TFS
Awesome gallery my friend thanks for sharing!!!
Thanks for the detailed tutorial. Great way to share your projects!
How the heck did you figure out this useful info?
Cool. Thanks for sharing this. I'll be working on my gallery!
Fabulous tutorial Lisa. Thanks for sharing. This is how I have my friends page set up.
Have a creative day.
Hugs Nana
♥ My Crafting Channel ♥
♥ Nana's Rag Quilts ♥
♥ 2 Creative Chicks ♥
♥ Silhouette Challenges ♥
Thank you for sharing Lisa!
Pam
scrap-n-sewgranny.blogspot.com
Thank you for the amazing tutorial, my sweetest friend! I, and so many others, truly appreciate you taking the time to write it up for us! I hope to do this sometime over the summer if I can squeeze it in. :o) (How gorgeous is your gallery, filled with all your beautiful creations!) Have a beautiful and blessed day, my dear Lisa! :o)
Hugs and blessings,
Karen
Very cool my friend! I LOVE this tutorial, you're so sweet to share :) Wow, your creations leave me in awe, seeing so many in one place is really breathtaking.
Have an AWESOME day!
Shelly
Fabulous tutorial and wonderful that you have share this TFS
You are such a cool blogger to share all this info with us :)))) Thank you!
Thank you so much for sharing Lisa, LOVE your BEAUTIFUL gallery my sweet friend!!! :)
Thanks, this will come in handy.
Thanks for taking the time to share this! I am always on the lookout for things to make my blog more fun and functional :)
Best crafty wishes!
Amber
Staying Crafty
WOW! this is an amazing tutorial and I'm sure it will be very useful to many of us:) TFS
Hugs,
Norma
Thank you for this, I'm going to have to remember to come back to this later.
What a FAB tutorial Lisa! Thank you for sharing :)
Lisa this is amazing!!!! Thanks for sharing :) I've just started mine :) This tutorial is fab!!!!!!!!!!!!
Thanks you :)
http://scrapartbyladye.blogspot.co.uk/
What a wonderful tutorial Lisa, I will have to try this! Thank you so much for sharing:)
Hugs, Sherry x
Loose Stitches and Unraveled Threads
Post a Comment