Join me on Facebook Join me on Pinterest Follow me on Bloglovin Email me

Monday, February 25

TUTORIAL: HOW TO CREATE A PHOTO GALLERY IN BLOGGER




(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 1: Create a Photobucket account. I'm sure there are other photo sharing accounts (like Flickr) you can use, but I found this one to be the easiest for me. You will be uploading your gallery photos here.



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. 

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: 

   Daisy Cottage Designs

20 comments:

  1. Thank you for sharing, Weiya. I'm going to give this a try soon. :)

    ReplyDelete
  2. Thank you so much for sharing. I need to try this :)

    ReplyDelete
  3. What a great tutorial. I've had people ask how I've made mine before but there is no way I could put it in tutorial form. I'll be sure to direct them to your wonderful and easy to follow tutorial.

    ReplyDelete
  4. I have one on my blog too, it certainly makes a great resource!

    ReplyDelete
  5. Wow! Thanks for the great tutorial. I might just have to make one of these.

    I'd be thrilled if you'd link up at this week's Off the Hook!

    ReplyDelete
  6. Thanks so much for linking to my blog and sharing how to make a photo gallery. I love the gallery on my blog and yours looks great too!

    ReplyDelete
  7. Thanks for sharing this tip! I'm going to try it to update some of my pages as well. Glad to have you join us at A New Creation link party again!

    ReplyDelete
  8. Oh!!! Great tips Weiya!!

    Thanks for sharing this at The DIY Dreamer last week. Can't wait to see what you link up tomorrow evening! Have a great day!! xoxox

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. Thank you for the great tutorial! Worked perfectly.

    ReplyDelete
  13. Wow! Thanks for the great tutorial Weiya!!

    ReplyDelete
  14. thanks for sharing, i'll try this on my blog, i hope i can make it like yours :)

    ReplyDelete
  15. Great post. Its very interesting and enjoyable. Its must be helpful for us. Thanks for sharing your nice post.
    Clipping Path Service

    ReplyDelete
  16. suppose I make a photo gallery blog in blogger but later if i want to migrate it to wordpress then how will I do this

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. This comment has been removed by a blog administrator.

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete

Comments make my day! Thanks for taking a minute to share your thoughts with me! :)