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.

css-logo-w3corg-758750Getting 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

  2. 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.

    highWhat 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.

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

  4. pgnumYou 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. 🙁

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

  6. 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.

5 Comments

Paritosh September 4, 2009

Where do i add the code in stylesheet ? I have no knowledge of HTML or CSS !

Richie S September 4, 2009

Well as I mentioned earlier-
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 ]]>. When you have to insert any of the codes, just insert the codes above ]]> 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)]. You can insert the above code after the last line.

Also http://www.w3schools.com/css/ is a good way to learn CSS.

Sanjay September 19, 2010

Hello Sir, my name is Sanjay from India at New Delhi. I need to know about how to write Basic Style Sheet (CSS). I still loosing lots of money, because I don’t know about Style Sheet. I am very much interested to know/ write CSS. Currently I just know how to edit CSS only. But want full details. I am little designer but something good in Internet, so please provide me accurate details where I will learn CSS or Write Style Sheet. Please help me, I am waiting for reply, please sir reply me soon on my email id. Thanks for your help in Advance.

vara March 7, 2011

Go through the site http://w3schools.com/css/default.asp
You can learn CSS

sunil May 6, 2012

Nice article admin……….working nice for me