Project Blog Tip

With the New Blogger, this is really very easy. Just get into the Dashboard of the blog, click, "Template" tab, then the "fonts and Colors" sub-tab and you will get this page (see screenshot):



First, choose what your want to change in the left side of the page, then preferably select a color from the blocks of color to the left. You should preferably select colors that matches your blog or colors from your blog Be careful if you are choosing color for the font, not to choose a color that matches the background, or choosing a color for the background not to choose a color that matches the font. That will make the text invisible, making your blog unreadable. Worst, it can get your blog black listed by the search engine as that is considered black hat SEO (Search Engine Optimization). If those colors mentioned doesn't satisfy you, that are other color further to the right. You can also input the exact HTML for the color you want. For this task, getting the very useful Colorpic will be very helpful.

If you are trying to get the HTML Code code for the link on your site, it is best to make a screenshot (press "Printscreen" key, then paste it into the Paint Program available in Windows in the Accessories, or use my favourite - the free Irfanview). You have to use an image of your page because most links change in color the moment you place your mouse over it, but with a screenshot, that doesn't happen.

The CSS (Cascading Style Sheet) of every template is written different and if something is missing, all you need to do is to add the relevant missing part in.

For example, in the standard Blogger Scribe template, this is the section in the CSS (Cascading Style Sheet) for the sidebar:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

There is nothing mentioned about background. So what I did was to add a single line

background: #FFFFFF;

(#FFFFFF is the hexadecimal color code for white) to that section, so that it became:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
}


BTW, instead of using hexadecimal color codes like #FFFFFF, you can also use most names of colors like red, blue, white, etc.