Friday, January 29, 2010

How To Put Picture Side by Side in Blogspot or Blogger?

Hi blogger out there, sometime we have pictures or photos to insert into our blog posting, however you should noticed that the pictures or photos cannot be placed side by side, and I did try to changed the setting during uploading the pictures to blogger, but it didn't help at all! After some googling, I found out that the option to place pictures side by side is not available in control panel for unknown reason. The easy part is to do HTML coding. 'HUH? how am I going to do that?!' you might have this thought, don't worry, this is very easy. For those already have experience with HTML, this is piece of cake! You can either use free image hosting site or upload the picture first to blogger and then make the HTML code changes, your choice.

Okay, lets go do it!

Method one - host your image from image hosting site



Step 1
Go to your blogger dashboard and create post, usually it will automatically in Compose mode. Click on HTML tab to see in HTML mode, it is because the Compose tab. It is at the right hand side, just above the tool section.

Step 2
Copy and paste the following code into the HTML tab:


Replace the "insert your picture/photo link here" here with your own link.
Example:


Step 3
Now you can check the images by clicking on the Compose tab. Or use the Preview link, which is just below the Compose tab.


Method two - host your image from blogger/blogspot

Step 1
Same as Method one stated above, but instead of uploading the photo to image hosting site, upload the photos/pictures to blogger first. Go to HTML tab, you will find some code looks like below:


Step 2
Copy the link right after the first "href="" until the next """ and put it into the table that I showed in Method 1.



Note:
1. It is always good to insert the pictures/photos first and then write your blog post, because it can be very tricky to look at the HTML code once you have start writing it.
2. It can be quite confusing, especially if you are not familiar with HTML, and errors can make the whole post unreadable, so please help yourself by start with inserting photos/pictures first and then compose the post.
3. A few time of trying definitely will get yourself more familiar.


Finally, publish your post!

Good luck! :-)


p/s: for more tutorial on this blog, click here
Hope you will enjoy this post, subscribe to my RSS or mailing list or follow me on blogger or twitter. :)

8 comments:

Olga Paper Creations said...

do i copy the table code anywhere in the html code ?

ahsiang said...

@Olga Paper Creations, please copy the code within the box and replace with the link to your picture.

GWALLAGWALLAGANG BASEMENT said...

@ahsiang what if im uploading the picture?

ahsiang said...

@GWALLAGWALLAGANG, first you upload the picture first. Then on "Edit HTML" tab, copy the link to the picture. Put the link into the code that I provided in this post.

CP_Stealer said...

Thanks a lot mate
Now u have screwed up my blogger!!!
Evertime i move my mouse over the words or pictures it starts danling all over the place and moves away from the cursor. Plus its all out of line. What have I done wrong?

ahsiang said...

@CP_Stealer, sorry to hear that. This is the first time the code could screw up blogger. Did you backup your theme file?
The code should be use for individual post, not on theme.

Photographic and video duo said...

Thank you for this! Exactly what I needed! So irritating that blogger doesn't provide these user friendly options!

Photographic and video duo said...

This was perfect! Thank you!

Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2012 Outdated Penang Uncle
..........