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 : <img src="....."/> 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 :
<a href="LINK OF BIGGER PICTURE>CODE IN A</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 :
<img src="LINK OF PICTURE"/>
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 :
<table border="1" width="150"><tbody><tr><td>FIRST CELL</td><td>SECOND CELL</td></tr></tbody></table>
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 :
<a href="http://1.bp.blogspot.com/_SLyWdciSKYE/R9opekLGyOI/AAAAAAAAAJI/
vOp8_CD8HDY/s1600-h/IMAGE.jpg"><img style="display:block; margin:0px auto 10px; text-
align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/
_SLyWdciSKYE/R9opekLGyOI/AAAAAAAAAJI/vOp8_CD8HDY/s200/IMAGE.jpg" border="0"
alt=""id="BLOGGER_PHOTO_ID_5177496326698879202" /></a>
Notice the format of the code :
<a href="LINK_OF_BIG_IMAGE"><img style="display:block; margin:0px auto 10px; text-
align:center;cursor:pointer; cursor:hand;" src="LINK_OF_IMAGE" border="0"
alt=""id="BLOGGER_PHOTO_ID_NUMBER" /></a>
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 <img style="......"/> 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 :
<span style="float:right;">
PASTE IMAGE CODE HERE
<br/>
Caption here
</span>
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 :
<img src=LINK OF IMAGE"/>
Then paste the above modified code in Edit Html tab of Post Editor and publish.
50 comments:
From here I can see that there is no ready icons in blogger.com to manage pictures.
But my main problem here is that until now I cannot do the following:
1.Add a going-on music for browsers.
2. Can't put audio files in general.
3. Can't put video, uploaded from my own pc or from other sites like utube.
I wish you respond very soon for this is so important to run my blog more easily and flexibility.
thank you very much
dejavupress.blogspot.com
Deja Vu,
Have a look at :
You tube in Blogger
Music in Blogger
dear vin - v helpful - thank you
Hey Vin:
Great blog, but I have a question that no one can seem to answer: how do I upload pictures if I'm blogging from MS Word 2007? It keeps asking me for urls that I don't know and I've tried a bunch of them. I have a Picasa webalbum for blog pictures as part of my storage, but when I use that url the program tells me it can't upload the pictures. Any ideas?
-Laura
Laura Rose,
Can you give full details of the exact steps you follow when blogging from Word 2007 and whatever messages you get copy them and paste them here.
Are you successful at blogging without pictures from Word 2007?
Can you make a sample post with it and give us the link?
Okay, so here is where they sent me to troubleshoot the first time my pictures didn't show up (blogging without pictures is just fine):
http://office.microsoft.com/en-us/word/HA101640211033.aspx
As near as I could figure out, when i tell it that my picture provider is my own server (because there is no other option besides "don't publish pictures"), they ask me for an upload url and a source url. I'll email you the print screen so you see what I mean.
Laura Rose,
For pictures you can only upload to your own server.
To upload to Blogger login to Blogger later and edit posts and upload pictures directly through a browser like Firefox.
Oh well. Thanks for all your help.
Hey, I tried the picture captions, but after i've pasted my image in the right place all i see on the image is a text under it which says 'caption here'.... why is this?
Keke,
In the image code replace the words 'Caption Here' with your actual caption.
Hi..I would like to put pictures on my blog, pictures that i draw and i have two questions
1. how do i make my images sit hard against the left hand side of the page
2.how do i make these images the size i want,say up to 650x919,it seems once i go above a certin size the image is lost under the right hand coloum...
i really hope that you can help me.If you need to ask any questions, please do.
thanks,
eve
Secret Squirrel,
Before your picture code add :
<span style="float:left;">
PICTURE CODE
</span>
For 2. Increase width of Blog.
YAY Thanks...it still does not look quite the way i want it but at least i can now put in bigger(wider) pictures.
I SHALL RETURN
Many thanks to you (:
xox eve xox
Good tips!
I've had problems with my image code breaking when I add a link to a word in my blog. Very annoying. Sometimes I've had to delete the image and go back and grab it again.
I'm usually using Firefox on a Mac.
Linda,
Many Mac users report problems when uploading images. I can't say since I work on a PC.
Try working in Edit Html tab of Post Editor.
I notice my pictures have a hand on them that allows them to be enlarged in a separate window. On friends pages there is an arrow only on those pictures you can click on to enlarge in a separate window. I want to control which pictures are able to be enlarged. I tried reading through your tips and dragging and dropping to break the code, but that didn't work. Anything else?
Jac,
After the picture is uploaded it will land at the top of the blog. Click Edit Html tab of Post Editor.
The code for the picture will be at the top of the post. It will look like this :
<a href="..."><img src="..."></a>
Delete these tags :
<a href="..."> and </a>
Publish post.
I ant to add simultaneous images on my post like
1 2 3 4
Not like
1
2
3
4
Ankit Bajaj,
First you will have to increase width of blog to accomodate side by side pictures. Otherwise your blog sidebar will fall down below the posts column.
Next you can put pictures side by side by using tables to arrange them.
Hi. I blog through Google, and my photos are NOT automatically framed. I'd like frames around them. Do I have to edit the HTML on every photo or can I tweak something in the template?
Sheryl Smith-Rodgers,
In your Template Code box change this code :
img {
border: 0;
display: block;
}
TO THIS CODE :
.post img {
padding:4px;
border:1px solid #000;
}
Decrease the padding and increase '1' in border line to customize the border as you want it. Then save template.
Hey it worked! However, I lost the right side of the frame on "large" photos. I know...I'm picky. Can I fix that?
You're GREAT. Thanks much!
Mr. Vin!! Mr. Vin!!
I fixed my photo frame problem myself. Referred to your notes on "Increase Width of Blog" and it WORKED! Check it out and see what you think (like you have time for all of us illiterates out here). THANK YOU SO MUCH!
sheryl
http://sherylsmithrodgers.blogspot.com/
I've tried several times to upload some images (saved as
jpeg files) (images are of my grandmother's handwriting), but each
time I try to upload the scanned images, I get this message: "The
webpage cannot be found
HTTP 400
Most likely causes:
There might be a typing error in the address.
If you clicked on a link, it may be out of date.
What you can try:
Retype the address.
Go back to the previous page.
Go to and look for the information you want.
More information"
Can you help me with this one? Thanks!
THANKS!!
I've surfed around for ages to get a border removed in one blogpost, and it worked.
Great site!
What I love to know is this; if you post a picture bigger then the width of the post sections blogger will cut it off to the right and the right border of the post section will dissapear.
Is there a way that instead of cutting it off to the right it cuts on both right and left and also is there a way to display a picture inside it's border even if it is original size is to big?
WillTRiker,
It is not recommended to post larger sized pictures whose width is more than that of posts column since it may cause sidebar to drop to bottom.
If you still want to do so increase width of blog first.
Thank you so much for your help. This site is a great resource. Thanks for taking the time to assist fellow bloggers!
Hi, this is a great site for a new blogger like me.
I want to ask, after I post up pics in a new topic, when the reader clicks on the pic to enlarge it, it reloads the enlarged pic in the same window.
Is it possible to set it such that after the pic is clicked on to be enlarged, it will open in a new window or new tab?
Thanks..
mondez,
After the picture is uploaded click the Edit Html tab of Post Editor.
In the link code of the picture insert 'target=_blank' as shown here in links open in new window.
Thanks very much vin !!!!
Hi, using the caption.. the words are way below the image. Any clues:
hey thanks for the great tips...
i had a question for u...
i click on the name of my picture and link to my website..
and clicking on the picture leads to an enlarged view...
what if i didn't want the enlarged version and instead want clicking on the picture to also link back to my website..
would absolutely love the help...
thank you..
henzy,
You have to edit the picture code in Edit Html tab and insert your website URL instead of the link to the bigger picture.
Brenda,
Use Windows Live Writer.
oh my.. yet ANOTHER software to learn? arghhhh
Hi,
I added to my profile pic with Illustrator, and the finished image has parts extending out from the original frame of the picture. On some computers the picture looks fine (although it's not centered), but on other computers there will be a grey box behind the picture, essentially forming an outline of all the extending points and to the left side of what I'm guessing is the allotted space for the image. How do I get rid of that grey box, and how do I center the picture?
Thanks,
Isabel
Isabel Blakely,
I do not see the profile picture on the profile page.
Thank you. Yours was the most clear and simple approach to image captions I have seen. Works very well!
Thanks! I hope I will be able to put up my travel story now. I wasn't able to do that as I was not being able to organise my images as I wanted them to be.
Thanks once again
Hi,
I want to upload my pictures in low resolution (they are high-res on my computer). They're professional pictures and for copyright issues they have to be low-res, so I don't have the original photo editing software to work with.
I thought the small size made it low-res, but later realized I could click on them and it went to high-res. Is there any way to lock that, so it doesn't expand?
Thanks,
Emily
Anonymous,
First create the low res copy of your images on PC in an image editor and save.
Then upload them to Photobucket.com
Copy the Direct Link of the picture below the picture at Photobucket.
Paste it in code below :
<img src="LINK_OF_IMAGE"/>
Then paste above modified code in Edit Html tab of post editor where you want the picture to show.
I have a post signature that I do not want FRAMING around, but I do
want the PICTURES I POST to have a FRAME around them, how can I do
that?
thanks!
Jen,
In the code for the post signature add :
border-width:0px;
inside the <img style="......"/> tag.
how to use images placed in blogs like 2.bp.blogspot.com etc
Hi, i tried placing images present in 2.bp.blogspot.com, 1.bp...., 3.bp...., 4.bp.blogspot.com etc.. in my htm page
http://www.yadlapati.com/allmix2.htm
i am unable to see those images in my html page, but i am able to see if i copy the source code n paste the same in a browser..
people can you please trace out the problem n help me out
Thanks
Admin - Yadlapati
www.yadlapati.com
thanks ... useful information. auto resizing features of blogger tend to annoy me sometimes :)
thanks for this very useful information :)
I try not to use the drag and drop feature as it breaks the code, like you said, and also because it doesn't fill the ALT="" attribute which is not good for W3 validity.
Thanks for the article by the way.
dear doctor.
how to speed up image load in blogger?
thnx for the tips
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.