Tips on Pictures In Blogger

YOU CAN UPLOAD ONLY IMAGES AND VIDEO FILES

Blogger at present allows only uploading of pictures and videos. All other files have to be uploaded to a free host like Photobucket or Googlepages and then linked to from there. You cannot link to any file on your computer without uploading it to Blogger or any other free or paid hosting.

DRAG AND DROP OF PICTURES BREAKS CODE

When pictures are uploaded to Blogger Posts they land up at the top of the post editor. After that to place them wherever you want in the post you can drag and drop them in Compose Mode. This sometimes breaks the picture code so better you should switch to Edit Html tab in Post Editor and select the whole code for the picture at the top and then do a Cut and Paste operation to wherever you want it in the post.

PICTURE CODE

The code generated when a picture is uploaded to Blogger is made up of two parts :

A. The code for the picture itself : and

B. The code for the enlarged copy it is linked to. This code for the link surrounds the code in A. above and looks like this :

CODE IN A

A simple method to extract the link of your picture is to upload your picture to a post and publish it. Then view that post in a browser. Click on the picture and a browser window will open with that picture in it. Copy the picture link from the address bar of that browser window.

DISPLAY PICTURES IN SIZE YOU WANT

When uploading pictures to Blogger they are resized according to the options you choose in the upload dialog : Small, Medium or Large. If you do not want your pictures to be resized upload them in the size you want to a freehost like Photobucket or Googlepages and copy their link. Then paste the link in code like this :



Then copy and paste the above code in Edit Html tab of Post Editor.

SIDE BY SIDE PICTURES

When a picture is uploaded to Blogger you can choose whether to put it on the left, right or center. If you want to put two pictures side-by-side then it is best to use a table with one row and two columns. Then you can put each picture in each cell of the table. For example :

FIRST CELL

SECOND CELL

The code for the above table is :

FIRST CELL

SECOND CELL

Copy and paste the code generated for your picture after uploading instead of the CAPS in the above code.

REARRANGING PICTURE POSITIONS

After uploading the pictures land up at the top of the post. To put them in different positions within the post follow these steps :

1. Login at Blogger.com and click +New Post link on Dashboard.

2. Blank Post Editor will open.

3. Upload photo and choose whether you want it to left or right.

4. After uploading finished click Done button.

5. Click on Edit Html tab of Post Editor.

6. Since Post editor was blank before uploading all the code you see now belongs to the picture.

7. Highlight all the code with mouse and right click it and select 'Cut'.

8. Paste it into a Notepad file and save. For a central aligned picture the code looks like this :

Notice the format of the code :

The image is displayed and is linked to the bigger size image.

9. Repeat for all images you wish to put in that post.

10. Type your post.

11. In your Notepad file select the code of the picture you want and copy it.

12. In Post Editor right click once where you want the picture and select
'Paste'.

13. Repeat for the other image codes and paste them where you want them to
appear.

14. Publish Post.

PICTURES WITHOUT FRAME

Blogger generates a frame round your picture. If you do not want a border round your picture insert this code within the picture code generated after uploading :

border-width:0px;

inside the tag. For example :


If you do not want a border round any blog post images go to Template----->Edit Html and scroll down to this code in the template :

.post img {
padding:4px;
border:1px solid $bordercolor;
}

Change 1px in the border line to 0px and save. You can change this code to make better frames for your pictures. See what increasing 1px to 10px does to your pictures. Change the padding from 4 px to more to increase the distance between the picture and the frame. For example :

ALT TAGS FOR PICTURES

To optimize your pictures for the search engines put alt tags in the code for the picture describing it. Search spiders cannot see images. They only read the alt text and then index the picture. These tags also describe the picture for visually challenged viewers.

PICTURE CAPTIONS

To put a caption under your image upload it to your post first. Switch to Edit Html tab of Post Editor. Select the whole image code at the top of the post and do a Edit---->Cut and then paste it between the code below :


PASTE IMAGE CODE HERE


Caption here


This will float the image to the right of the post and put a caption under it like this :




Icon For Blog Feeds












If you want to position it to left use "float:left;" in the code.

ANIMATED GIF PICTURES

To post animated gifs on blogs upload them to Photobucket.com and copy down their link. Then paste the link in code below :



Then paste the above modified code in Edit Html tab of Post Editor and publish.

Subscribe in a reader