3 Simple CSS Tricks To Personalize your Blog

Getting ready-made free templates for blogger and wordpress is very easy. However the one big disadvantage of using a free template is that your blog won’t be unique, meaning that thousands of other blogs might be using the same template. The trick is to make minor modifications to your template, to make it stand out in the digital world! Follow these simple tricks.

Important Note:This tutorial has been written, keeping in mind sites using simple HTML. To edit your blog’s template, follow the instructions:

Please make an appropriate back-up of your template, before implementing any of the tricks below.

To make these customizations, you will need to edit your blog’s template.

For Blogger (BlogSpot) users: In blogger, from the dashboard, select your blog’s Layout option, then click on Edit HTML, and then check on the Expand Widget Templates. Now search for ]]></b:skin>. When you have to insert any of the codes below, just insert the codes above ]]></b:skin> check-box.

For WordPress users: In the Appearance menu, select Editor and then select the appropriate style-sheet file from the options at the right [it will most probably be Stylesheet (style.css)]

Okay. All prepared? Here are some of the simplest CSS tricks that you can implement to personalize your template:

1. Change the Selected Text Color

There are many instances when we might need to copy some contents from a website. What is the easiest method to do it? Of course, highlight the required text with the mouse and press Ctrl+C.

What do you see when you highlight the text? There is a grey background color. These is where our trick kicks in. Changing the backgrond color of the highlighted text can give a magic touch to your website!

Just insert the following code in your style sheet:
::selection{background:#c3effd;color:#000}
::-moz-selection{background:#c3effd;color:#000}

This will give a cool effect, like the one shown in the image. To change the background color, edit the hex code after background and to change the font color change the hex code after color.

2. Highlight the Input-box, when it is active

You might be familiar with this trick if you have been using Google Chrome. There is a orangish border on the input-box that is active. To implement this hack, just implement the following in your style-sheet:
input[type="text"]:focus {border: 1px solid #f00;}
input.focus {border: 1px solid #f00;}

Like the above trick, you can edit the hex code to change the colors. Unfortunately I could not find a method to implement it on Google CSE. 🙁

3. Align Ads as if they were part of the Post

Here’s a tip that makes your blog look better and give you additional income as well. Wrapping the text around your post content, makes your ad appear, as if it was part of the content. This tremendously increases the revenue, that you may get from your blog.

To implement this hack, find your ad code and insert the code below before it:
<div style='float:left'><div style='padding-right:5px'>

and the below code after it:
</div></div>

The final code would be like this:
<div style='float:left'><div style='padding-right:5px'>
<!-- Your ad code here -->
</div></div>

For a demo you can visit my blog @My Free House

Enjoyed these tricks? Having difficulty in implementing them? Please comment on.