I started out a couple of weeks ago to do a quick lesson on coding and that post has taken on a life of its own. I’m kinda crossing over here in what I want to do as a Blogger …… which is to run Blogging Extreme.com while managing Bloggers Market. After all you can’t really “Learn How To Make Money Blogging” until you understand, well ……… how to Blog, call it a catch 22.
This week I’m going to share with you a little of what will be forthcoming in my new E-Book, “The Bloggers Market Guide To HTML For Bloggers”.
In this post I’m going to focus on the Bloggers post. When I started out I thought that providing images for my Blog would be a pretty good way to provide my readers with a little extra something. What I have come to find out is that the images that I post here at Bloggers Market get indexed within Google …… sometimes at the very top. Pretty cool ……. I can use all the help I can get.
As you no doubt have learned by now I actually provide an image for the homepage and an image for the inside of the post every time I post. For the first I just provide the path to the template and upload. For the image in the post I actually hard code that image into the post. As you have probably learned by now you can use the “Set featured image” in WordPress that will basically set the image you use on your homepage within your post. This option called “Insert into post” is not a very good one. The image is restricted in size …. somewhat, and the image will not nest properly within the post if inserted at the top. Best idea, hard code the thing. Here’s how, first don’t try to size an image for the inside of your post with your coding. Go ahead and put your image through your photo editor and size it there and then upload it to a folder titled “images” within your home directory. Why WordPress buries the images on the dark side of the moon I have no idea. What’s worse they want to sequence the folders by number instead of name.
When you size your images don’t try to squeeze the dimensions. Just get the width right and the height will take care of itself. My template size is 588px for my width. I like a full size image for my post. Below is the code I use: ( you can left click inside the box and copy the code if you so desire)
If you post three times a week you will have this down to memory in about three weeks as second nature. It is really pretty basic. The image attribute, the path to your image, the alt attribute and the title attribute if you need it. I forego the title attribute most of the time unless the image needs some explanation for the interest of the reader. The title attribute will display the text “Kitten Being A Kitten” when you mouse over the image with the code I have used above. Don’t forego the alt attribute as this will cause the code to fail validation. What that means is that Google will frown upon you. And don’t leave the alt attribute blank either as the code below displays. While the code will validate if you do this, it shows really poor form ( something we will get into next week) The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Most of you that read this will be totally dismayed with what you see here. I understand that. Some of the Newbies will find it useful but for the most part, most will wonder why I display code that a 5-year-old would know. That’s just the point! Simple code design!!! By the time we finish I’ll spin your head right off your shoulders. You will see some really complex HTML designs that I will re-write here that will leave you with a feeling of “how cool is that” when you see the finished code. For example: the code box that you see displayed twice above started out in three languages and 30 lines of code. I have re-written it in one language, (XHTML) and with just one line of code. It took about 5 hours to do it. But I got it down to nothing but the running gear. I’ve seen plenty of code boxes out there, but nothing like what I have. Looks pretty cool huh ? I’ll show you how ……… soon. By the time we finish you may not be a “Pro Blogger” but I can guarantee you will be a “Power Blogger. See you next week.
( EDITORS NOTE: Since writing this post I have completed an HTML solution for inserting your images with the “Media Library”. You can read a clear explanation on the issue by following the provided link above. Below you will see an example of the finished code as well as a small piece that I use to finish the styling.
CODE AS INSERTED BY WORDPRESS:
CODE USED TO FINISH THE STYLING:
COMPLETED CODE FOR THE PROPER INSERTION OF YOUR IMAGES:
Code Example for Angela:
Sign Up To Receive Breaking News & 
