 |
|||||||||
|
|||||||||
 |
 |
||||||||||
Tech Tip 64 - Customize Your Blog With Some Easy HTML
|
But, that doesn't stop us from getting our hands dirty with customization. Now, it's time to bring out the Geek in us and dig down to the guts of the thing - the HTML code. Sure, we could drive a stock sedan straight off the showroom floor, but why do that if you can add some fancy wheels or a hood scoop to make your vehicle really stand out from the crowd? In this case, your vehicle is your blog and attracting attention with a snappy screen presence is the name of the game. Check out my personal blog that I just started for examples from this series: |
1. Under Construction
The vast majority of bloggers never fool around with HTML code and their blogs look just fine. You have a lot of control over the content and format of your posts, but the template is the only place you can control the background and the overall arrangement of content on your blog page. Since the purpose of this exercise in blogging is to learn all the nuts and bolts, I'm going to mess with all the details of the template and see what comes of it. The first thing I did was dump the olive green background in favor of medium slate blue. I used to have a bedroom with the walls painted that color and I find it very relaxing. Let's see what else I can customize. |
You have probably noticed that the color scheme on my blog is kinda funky and things are shifting around a bit. It used to be all green and now a lot of blue (my favorite color) is showing up. That's because I'm experimenting with tweaking the HTML template that defines things like the background color and the default font.2. Where Did HTML Come From?
 First, let's get our bearings. HTML, or Hyper Text Markup Language, is the code that makes Web pages something different. HTML codes set the font, color of the background, and control dozens of other attributes that differentiate one Web page from another. That same code is used by blogs, but templates are usually used to gloss over the whole HTML coding thing.
To be fair, I usually whitewash right over the HTML coding on my Web page too. I get away with that by using a Web page authoring program like Microsoft FrontPage. You can edit the page using Word-like tools to set the text attributes. FrontPage then generates the HTML code to make your Web page look the same as what you designed. The drawbacks are that FrontPage is not free and you are tied to a single computer for adding to your Web site unless you pop for more copies of FrontPage. |
3. Borrowing Color From Web Pages
 As I said, your blog page uses exactly the same coding language as a Web page, so we can steal some of the tools used for Web pages. The first thing to address is color. We need to set the color for the background, the fill, the text color, and even outlines for photos.
The colors on your screen are made up of red dots, green dots and blue dots. If you turn on all the dots to full brightness, it looks white to the eye. If you turn them all off, then naturally you get black. By varying the brightness of the three colored dots, you can generate what looks like millions of different colors. These colors are described by the individual brightness of the three primary colors. The value can vary from 0 (off) to 255 (full on). The simplest way to describe white is 255, 255, and 255 for full red, green and blue. It's more common to see the brightness numbers expressed as hexadecimal numbers. Hex is base 16 so the counting goes: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F 0 in hex is also 0 in our normal decimal numbering system. 255 in decimal translates to FF in hex. So, white in hex is FFFFFF. This is called Hex 6 notation. Often, you don't need such precise control over color so shorthand called Hex 3 is used. The lower order digit of each color brightness number is thrown away. White then becomes FFF, which is really slightly off-white, but it's close enough. If all this is too complicated to visualize, check out this Web page that has many examples of colors and various ways to express them: I like to keep this Web page open while I'm fiddling with my template so I can instantly visualize the color palate I'm poking in. |
4. Hacking the Code
It's pretty scary looking stuff when you first see it, but the beauty of working with an existing template is that you don't have to know very much at all to make some impressive changes in the way your blog looks. I wanted to change the text color from black to a dark blue. The original line of code was: color: #000; That's expressed in the Hex 3 format. Actually, a single zero would do also, but it's easier to visualize when each color is represented. I changed the text color to a rich dark blue by putting in some blue while leaving the red and green at zero. color: #008; |
Finally, we get around to actually changing some HTML code. On Blogger.com, it's easy to find your template. There is a tab on the page where you compose posts, so instead of writing things that people will read, click the Template tab and write things the computer will read - the instructions for the format of your blog.5. One Step At a Time
 You want to make only one change at a time, save the code and preview your blog to see what you changed. Then, you can decide if you want to keep the change or go back to the way it was. If you restrain yourself and carefully evaluate each change, you can learn HTML code without ever cracking a book! |
6. A Trick for Experimenters
When you are just learning, it's nice to be able to experiment with new HTML commands. Sometimes, it's hard to tell what happened and you want to remove the new code you just wrote. Or, you may just want to remove an existing command to see what it doesn't do. Instead of deleting the unwanted code, you can just comment it out. HTML, as well as most programming languages, allows you to surround sections of text with special characters and what is inside the special marks is ignored. The purpose is to allow comments to be inserted in the code so you can remember why it is the way it is. You can use this comment capability to turn things off. In HTML, the open comment characters are the forward slash and star. To close a comment, use the star and then the forward slash. Here's an example: /* This text is ignored and will not affect your page */ Another trick I use all the time is to make a copy of an existing line of code and comment it out. I then fiddle with the copy of the line like this: /* text-align: left; */ The original code called for the text to be aligned at the left margin. I wanted to try putting it in the center of the column so I made a copy and commented out the original. I guessed that the code word would be center, and I was right. If I am sure I want to keep the change, I can just delete the original line. If I want to revert to the old format, I can delete the new line, remove the comment characters, save, and I'm right back where I started. |
7. Call For Help
Pick a feature you want to change and look through their long list of template modifications that they have detailed out for you. Start with simple things like changing the color of the background. You'll be amazed how one line of code can make such a big difference in the appearance of your blog page. Go after the obvious things like the font and color of the title. Insert a custom graphic to truly make the page your own. Don't get too wild and remember that dark text on a light background is easier to read - newspapers are still black text on white for a reason. |
In this short piece, I certainly don't have room to talk about all the ins and outs of HTML coding, but I wanted to get you started. You don't have to go to the bookstore and buy a thick tome on HTML coding. The help you need is right under your mouse button finger. If you go to Blogger.com and click on the Help section, you will find more details on modifying your template than you can digest in a week. I'm sure your blog site has similar help available.Final Words
I hope this piques your interest in learning more about how Web and blog pages are put together and that you put that learning to work making your blog different from the next guy's. I don't live in a house that looks like the neighbor's, so why should my blog? Be colorful. I am totally turned off by blogs that have tiny white text on an all black background. I run across way too many of them and usually just go right on to the next one. Black is just boring unless you have some other color graphic that just has to be set off with a dark background. Take it one step at a time and make copies of the original code so you can always back up to remove an "oops." Also, remember that if you totally screw it up, you can apply a new stock template and be all the way back to where you began: no harm, no foul. |
|
|
