Want to create your own table of images? You can use a table for your own Project Gallery Page or just to put several images side-by-side in a blog post. (I originally found the code here and modified it to my needs.) Note: This code will give you clickable images that open in a new page/tab. The caption is not linked to anything and the image is not linked to the original image (which is the default set-up, at least in Blogger). It sets images to be 120 pixels wide, which was the biggest they could be for the width of my blog. Change the width if needed.
Copy and paste the html below and change the blue text accordingly:
|
|
|
|
{UPDATES}
1. I just repositioned the code above so that it's more clear. Each "paragraph" above represents and individual image. So if you want to add an additional image, copy and paste the following section to add one (or delete this section to have only 3 images per row... just make sure to adjust the widths of each photo to fit your blog's width accordingly):
yourcaption |
2. Also, here's more info on what the blue text means:
Image Title: This can be anything you want. Keep it relevant for SEO purposes. It's also the name that will show up if, for some reason, your image doesn't load on someone's browser. I usually end my image title with "by Tricia @ SweeterThanSweets" if it's a photo that I took.
Image Source: This is the url where the image is located. They all start with http:// and end with .jpg. If your image is hosted on Photobucket or Flickr, you can find the url when you go to the "share" options. If it's a photo that you're uploading onto Blogger, upload into a draft post as you usually would, then switch from Compose to Edit HTML mode. Look for img src=" or just src=" and what follows the quotation mark is the part you need. You don't have to actually publish the blog post to get this code. Once you upload to blogger and get the image source, you can delete the draft if you don't need it. The image was actually uploaded to the internet whether the post was published or not.
Let me know if you have any other questions and I'll update this post if needed!
No comments:
Post a Comment