HTML Code for Dummies

Disclaimer: If you’re thinking of clicking off of this post, please hang around. I promise the HTML code I will share is painless and understandable.

Three years ago, when I wrote my very first blog post (over on mySpace – does anyone even use mySpace anymore?), I had very little knowledge regarding HTML code. Back then, it was necessary to manually type in the HTML code for inserting a photo into a blog post – <“img src=”photolink”> – and more often than not, I’d have to retype the code several times because I’d get a character in the wrong place.

Sadly, there is no “spell check” for HTML code.

Since that time, I’ve learned *thismuch* HTML code and I know it would be beneficial as a blogger to learn the language. While I can make some very simple things happen with HTML code like centering and flushing, and whathaveyou, it is still a foreign language to me. Typically, when an HTML question arises, I contact my friend, Google, or my URL friend, Jo-Lynne, who also happens to be my blog designer.

I would bet the farm that Jo-Lynne wishes I would lose her e-mail address, so she wouldn’t have to be bothered with the why for’s and the how to’s of HTML code. A while back, I e-mailed her asking how she was able to scoot the words of her post a tad to the right just enough to keep them from touching a picture or bloggy button.

I just knew she was going to send me some sort of Greek  instructions that I would never be able to decipher. I was pleasantly surprised however, that yes indeed I understood and could probably make it happen.

Here were her instructions:

” So I enter this code in the Styles box:  margin-right: 10px; ”

Without the code in the style box the text sits Right. On. Top. of the button or picture (which makes my OCD crazy by the way) and also causes me to think about plucking my eyelashes out one-at-a-time because Oh.My.Word. who can stand to look at that mess? 

Putting the code into the style box makes me smile a big, happy, smile! Not only because it looks so much better, but because it is really very simple to do.  A great example of a how a small change can make a huge difference.

[NOTE: Coincidentally, I tried unsuccessfully a trillion times to show you examples of a picture or blog button with the code and then without the code. Surprisingly, each and every time I loaded the pictures or the buttons the spacing corrected itself making it impossible for me to show you the difference. Do things like this EVER EVER EVER happen to anyone else out there?]

You can take a look up at the WFMW logo to see how it should look with the HTML code in the styles box.

From Inmates To Playdates is a WordPress blog. If you’re on Blogger or Typepad, I’m sorry to say I’d have no idea what to tell you to make this tip work. Here on WordPress though, simple.

Simply click on the picture, click on advanced settings, then, go into the styles box and type this code – margin-right: 10px; and then, voila!

The text will scoot like magic.

And you’ll smile knowing that you just made it happen.

That trick works for me! For other Works For Me Wednesday posts, visit We Are THAT Family.