How to Add Photos to a Blog

• 1). Use your favorite search engine to locate an HTML reference sheet (sometimes called a cheat sheet). These HTML shortcuts and tips can help you to identify HTML code even without fully understanding HTML.
  
  
• 2). Open your blogging software. When you add a new post to your blog, most online blogging tools allow you to edit the blog using a WYSIWYG (What You See Is What You Get) editor. A WYSIWYG editor means you have to know little programming to post a blog to the Web. Buttons for adding bold, italics, hyperlinks and titles are usually available in the menu bar of the software.
  
  
• 3). Locate the button or menu item that will show your blog post with the included tags in HTML format. If you press the button and see tags such as <p> and </em>, you're in the right place.
  
  
• 4). Begin experimenting with your blog post by writing several lines of text and using the usual WYSIWYG editor. Add some bold, italics, formatting and images to the blog post. Then use the button or menu item that shows the HTML tagging to see how tags are used to enclose text and/or images. You may not learn to write HTML, but you'll learn how changes in HTML will change the final formatting of your blog post.
  
  
• 5). Add the appropriate HTML code to your blog post once you have an image set on your blog post. In the following example, popular Blogger software is used to show how the tags on an image change. Once you understand the tags, you can insert the code written here into your own blog post. (In Blogger, there's a tab at the top of every new post that says "Edit HTML.")
  
  

HTML Code for Photos on Blogs

• 1). <b>This is a test of HTML code for inserting photo links into a blog.</b>
  
  The above HTML code will write the sentence in BOLD. Notice the <b></b> tags surrounding the text.
  
  
• 2). <div style="clear: both; text-align: center;">
  <a href="/links/?u=LINK HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="IMAGE SOURCE HERE" /></a></div>
  
  For the most part, you can ignore much of the coding involved in this HTML code sample. If you explore, you'll see how to add borders around an image, as well as how to left-justify, right-justify or center an image.
  
  Pay particular attention to the location marked "IMAGE SOURCE HERE." This is where you'll place the actual image file, whether from your local machine or from another website. There are no spaces between the quotes, and http:// is what the Web address or file needs to begin with.
  
  
• 3). Locate the "LINK HERE" wording. This is where you'll place the link to another website on the image. The image itself can be clicked once the blog post is completed. This link can be completely different than the image source link. For instance, if you want to post a blog about dog breeds and have a photo of a terrier, you may not want to link to just the photo but to a wider site that has a photo gallery of lots of dog breeds.
  
  
• 4). Be careful in copying code from popular word processors. Many of these word processors change the code during the pasting process; use notepad when you can. In addition, pasting code from a website, including this one, often does not paste correctly. It's best to retype the code and keep a copy for your reference.
  
  
• 5). Change the size of your images in HTML by experimenting with the HTML reference code from Step 1. You'll quickly learn more tips for making your blog posts more interesting for your readers.