(Disclaimer: I do not have any background in web design nor any knowledge of html. I'm just sharing what worked for me after much googling and researching online.)
Happy Monday everyone! A reader recently emailed me with questions on how I created my photo gallery under my enjoyments, DIY, and recipes pages. Since this was something that caused me a lot of frustration when I first started, I thought I'd share my tips with you all as well.
For my gallery, I found the most help from Tricia's blog Sweeter Than Sweets. She has a very thorough tutorial that includes the html that you can copy and paste straight onto Blogger. Please make sure to visit her blog for more detailed instructions. Below is just a quick rundown of what I did/used.
* * * * * * * *
Step 2: Find the picture that you want to use for your gallery. Using any photo editing tool, crop your picture into a square. I like to use Picasa 3 or Picmonkey.com. Save your picture.
Step 3: Upload your saved picture into Photobucket.
Step 4: Visit Sweeter than Sweet's blog and copy the html that Tricia generously provided.
Step 5: In Blogger, create a "Page" in which you will place your gallery and paste the entire html under the "HTML" mode. Plug in your own information wherever the blue text is.
"yourwebsiteurl": This is the link to your exact post, not your blog.
"yourimagetitle": This is what your picture will be labeled as if it doesn't load for whatever reason.
"yourimagesource": Open the uploaded picture in Photobucket. On the right-hand side will be a box containing the image links. Click on "Direct Link" and this will automatically copy the link. Go back to your html and "paste" this link in this space.
"yourcaption": This is the caption that will appear under your picture in the gallery.
"yourcaption": This is the caption that will appear under your picture in the gallery.
Below is what my html looked like after I plugged in my info:
Step 6: I switched over to "compose" to change the font of my caption as well as link the caption to the post.
Here's what my html looked like after the changes:
To complete the row, repeat the same steps but with another picture. To create a new row, simply copy the same html again after that first set.
Hopefully these instructions were not too confusing! Please leave a comment below if you end up trying it out and let me know how it worked for you! :)
Until next time,
Linking up with:
