The Weathered Door

How to Add Photos to Blog Post (using HTML formant) without Uploading Through Blogger

By 4 Comments

 

The Weathered Door How to add photos to a blog post (using HTML format) without uploading through Blogger 2

I mentioned in a post the other day that I figured out how to add photos to a blog post without uploading them through Blogger and had a lot of requests to share how I did that. I must not be the only one having trouble with the over saturated and highly contrasted processing that seems to be taking place when photos are uploaded directly into blog posts with Blogger. If you want to see what I mean look at the example above. The photos added to the blog post through Blogger is more saturated, dark, and contrasted as opposed to the exact same photo that I added using HTML format.

_____________________________________________________

1. What I stated doing was added the photos in HTML format (code). When you are composing a post on blogger, or another blogging site, there is the option to have the post in the “Compose” format, or the “HTML” format (this is how it appears on blogger). It’s up in the navigation bar on the far left. It’s circled in green in the photo below. Don’t try to upload photos through blogger where the red “x” is. Click on the HTML button to switch to that format.

How to add photos to a blog post in HTML format (without uploading through blogger)

2. Now, go create a wordpress.com blog. It’s super easy to create. You don’t have to do all the setup and design stuff, you just want to get an account set up with a site to that you can compose a new post. When I go to wordpress.com I click the “My Sites” button in the very top, left hand corner (circled in pink in photo below). Next, in the navigation bar on the left, under the “publish” heading, click “Blog Posts” (yellow arrow). Then click “Start a Post” (circled in orange below).

How to add photos to a blog post in HTML format (without uploading through Blogger) 7
3. Now it’s time to upload your photo(s). Just like on blogger, there are two ways to view a post, the “text” formant, or the “visual” format is how it is referred to on wordpress. You want to be in the “Text” formant (circled in green below).
Now, click the “Add Media” button (showed in teal below). Go ahead and upload your photo(s) and then select which photo you want to add. If more than one were uploaded at once they are all probably selected. Just click the red “clear” at the bottom of the upload screen (circled in pink in the second photo below) and then select the photo you want to add. The photos that are selected will have the check mark in the photo (circled in orange in the second photo below). Now click “Insert into post” on the bottom right corner (circled in green in second photo).
How to add photos to a blog post in HTML format (without uploading through blogger) 2
How to add photos to blog posts in HTML format (without uploading through blogger) 8
4. Once you click “Insert into post” you will see the screen below with the HTML code for the photo in the text area (highlighted in yellow). If you see a picture instead of the HTML code, just be sure you are in the “text” mode (circled in green below). Copy the HTML code for the photo, then go back to your Blogger post.
How to add photos to a blog post in HTML format (without uploading through blogger) 3
5. Now just be sure you are in the HTML format on Blogger (circled in green below) and then paste the HTML photo link you just copied where you want it to appear in the post. Once you paste the link (highlighted in blue), then click the “Compose” button (circled in green) to see the regular format of the blog post. **Side note, yes I used a different photo for so the HTML code appears different in the two photos above and below.**
How to add photos to a blog post in HTML format (without uploading through blogger) 4
6. Now, your photos should appear in the post. It will be sized and placed based on how it was formatted for the wordpress post. See how the photo is off centered and is spaced too close to the text in the photo below?
How to add photos to a blog post in HTML format (without uploading through blogger) 5
7. Now you just need to format the photos and line it up the way you like. Click on the photo so the format options appear. I centered the photo and made it the original size (since I had exported and resized it previously). You may have to click a different option and then the option you want again in order for the format to change.
How to add photos to a blog post in HTML format (without uploading through blogger) 6
Now you should have your photo where you want it in the text and it doesn’t have the crappy look and coloring that happens when the photo is uploaded through Blogger. I hope this helps some of you! I’ve been annoyed and complaining about this problem for over a year and I’m so glad there’s an easy way around it… it just took me way too long to figure out I knew a way to avoid it.
-Reeves

Filed Under: Blogging, how to, Tips and Tutorials

Subscribe to our mailing list

* indicates required

Comments

  3. Is it okay to print out and save this tute? I can't remember all the steps and if i ever get moved and into a time when i can actually create a blog (sometime this year before all that you wrote is outdated!!!!LOL) this will be useful.

    Reply

  4. You are welcome to, but some advise, if you are going to start a blog buy a domain and pay for hosting. I need to switch over to a self-hosted WordPress site (wordpress.org, not a free wordpress.com site) and it's going to be an expensive switch where I'll most likely lose a good amount of the readers and following I've built. It does depend how seriously you plan to blog and you intentions for you site.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *