November 16, 2008

How to make our sidebar title split into two colors?

I got an email from one of my reader asking for how to get rid the monotone single color on her blogger sidebar title, She said, 'I want my sidebar title to be more colorful instead of single monotone mode'.

Actually we can use an image editor such as photoshop 7.0 to produce it but when I suggest her to use this image editor sofware, she said, "It is a pain since I don't know how to do with adobe photoshop software". Can you tell me a simple way by edit the HTML templates?".

And I said, "Yes, actually we can. Just add a span class on the css templates, and a make little hack on the HTML templates".



How to do? To make easy, I give you an illustration. See the image below.
For instance the former sidebar title only has one color.
photo album blog
then we plan to change it into 2 color like this :
photo album blog


What next?

Follow these steps :

  • After login to your blogger, go to "Edit HTML" area
  • Backup your HTML templates first then tick the Expand Widget Templates box.

  • Put the code as shown below before ]]></b:skin>

    .green {
    color:#8BCB2F;
    padding-left:5px;
    }

  • Drop down and find the following similar code :

    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Feed1' locked='false' title='photo album blog' type='Feed'>
    <b:includable id='main'>
    <h2><data:title/></h2>
    <div class='widget-content'>


  • You can find a line contain title='photo album blog' that point to the sidebar title.
    Now, take a look on the other line contains <h2><data:title/></h2> that state the placement of the sidebar title. I cut the "blog" word on the title and move it on the h2 area. Now, the code will looks like this

    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Feed1' locked='false' title='photo album' type='Feed'>
    <b:includable id='main'>
    <h2><data:title/><span class='green'>blog</span></h2>
    <div class='widget-content'>


So simple right?

Now you can even put a rainbow color on your sidebar title. Please share your experience on using this tip with us by dropping some word on my comment box.

In case you need an extra ordinary blog templates, why not check my gallery listed here?
Read More......