Tuesday, September 6, 2011

How to Add Pics in Table in Blogger

The new Blogger interface is really cool and provides lots of features to handle image uploading. But the editor is still a pity and you cannot arrange the images. Last day I struggled for 1 hour to arrange a few pics in my post. The aim was to arrange 2 or 3 pictures in one row so they may be looking nice and cleanly arranged. But I could never do it in Blogger's post editor. You can change the size, you can change the alignment but you cannot change the position of the picture from 1 row to another. I tried another solution, i.e. to put each picture in a table cell and thus to arrange them. But again, we cannot insert a table, if we create one using HTML mode we cannot put our pictures in it easily. That's for geeks folks. So for an easy way to put pics on blogger. Follow me.
  1. Download Windows Live Writer.
  2. Install it, afterwards you will be asked to setup blog account.
  3. Enter your Blogger.com credentials and setup for the blog you want to post on with Live Writer.
  4. Now open up the pictures folder in a new Explorer window.
  5. Start writing a new post in Live Writer name it Test Post.
  6. Go to Insert tab (the interface is familiar for Office 2007, 2010 users: Ribbon Interface).
  7. Here you'll find Table function. Click and it'll open up a new dialogue for table configuration.
  8. Select number of cells and rows as per your arrangement scheme. Select cell width, default width worked well for me by the way.
  9. Click OK and a table is inserted in the blank post body section.
  10. Now Drag and Drop each picture (from pics folder) in each cell. The picture will be automatically adjusted as per cell width.
  11. When you are finished. See in Home tab, second separator Publish. There is an option Post Draft to Blog. Click it and Live Writer will start publishing your draft post to your blogger account. It will not minimize but you can do other things in meanwhile.
  12. As soon as it is finished, go to Posts section of your blogger dashboard, and see there is a draft named Test Post.
  13. Click on Edit and the pictures are in front of you arranged cleanly in table cells. You can see the Preview to make sure that they'll look nice on your blog. And now you have two ways.
  14. Continue editing this draft, rename it and add your other content and Publish it.
  15. Or you can copy the pictures code by clicking on HTML mode in post editor and paste that code in your original post (of course through HTML tab). And you are done :-)
You may decide to use Live Writer as your default post writing tool as well but I like to do online things in my browser and leave it if it is absolutely necessary. Enjoy Blogging!

2 comments:

Wasio Ali Khan Abbasi said...

If you use Google Chrome for picture alignment, you will face a lot of problems. For some reason Google Chrome is unable to support the movement and alignment of pictures within blog posts. Try Mozilla Firefox for that. I used to write the blogs using Chrome and then sign in through Firefox to adjust images.

Muhammad Shakir Aziz said...

Wasio I use Firefox mainly and same is the problem with it. I cannot adjust images as it can be in a wordpress post editor. But Live Writer solver the problem.