Cool ?

Tuesday, December 6, 2011

CSS Gradients to Customize widget headers differently

Customize Blog Template Your Self

customize widget headers in blogger with gradiest css

     Getting free templates or buying low quality templates will let your blog down in search engine rankings. Also most of them are not user friendly. Because that kind of template has so many unwanted styles and scripts which will slow your blog's load time and make it looks like a Christmas tree with too much decorations.

       The best solution is to make and style the template your self. But most people don't know how to create one. I have a solution for that too. You can customize a ready-made  template from Blogger.  

That's why I have decide start a cool post series called " Make your Own Template " This is the starting post. I thought starting with a simple post will give the series a bless to keep up.


How to Change the Widget Header Style

First, Log in to your blogger account and go to Layout section. Then click on the edit button on the chosen  widget. And take a look at the URL on the opened window, It'll look like this one.

 "  http://www.blogger.com/rearrange?blogID=123456789012345&widgetType=HTML&widgetId=Widget ID&action=editWidget&sectionId=blabalabla  "

Find the Widget ID from the URL and replace the Widget ID in the CSS code.

Note:-The widget ID will be looks like; HTML1, HTML2, ...., Label1, PopularPosts1,.....

Basic CSS Code

All the CSS codes here are based on the following basic code.

#Widget ID h2{
<---Background CSS--->
margin:11px 2 11px 2;
padding:8px 1px 8px 10px;
font-family: Sans-serif, Arial, Helvetica;
<---Additional Codes---->

Before Customize,
  • Go to Template » Edit HTML, 
  • Backup the the full template.
  • Search for the code ]]></b:skin>
  • Place the CSS code just above it

Simply customized Header

As a simple and a fast loading classic looking header you can replace the <---Background CSS---> with,


Then you can change #E39E0A in to any Hexadecimal color value.( Pick colors from Our color code generator )

Delete the <---Additional Codes----> If you do not like to add any additional CSS codes.

Change the 14px in "font size" style to the font size you need.

Change in the color section to the font color you like. you can pick a color code from our color code generator tool.

Add Gradient Styles to the Widget header

Pic The Gradient you need

There are some easy gradient CSS germinating tools to build Gradient styles easily. But My personal favorite is colorzilla The coolest things about colorzilla are,
  • Photoshop looking interface
  • Even Transparent Gradients are allowed 
  • Easy code picker
  • Cool presets
  • Radial gradients are also supported.
Just create a gradient and copy the code to your clipboard. The replace it with " <---Background CSS---> " in the basic CSS code.

And don't forget to delete the <---Additional Codes----> if you do not need any extra styles.

Preview before you Save the template. Then Save it if Succeeded.

Additional CSS

Replace that <---Additional Codes----> with One or more of the following codes.

Rounded Edges

 border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;

Replace #ddd with the color you need at the border. And 5px with the radius you need.

Text Shadow

text-shadow: #bbbbbb 2px 2px 2px;

Replace #bbbbbb with the shadow color and change the numbers to place the shadow.

Adding Too mush CSS codes will make your blog heavy and it'll effect badly on Search Engine Optimization. So keep as simple as you can.

As I told you. New Posts are on the way to be posted. Miss nothing by Subscribing Via Email, Twitter, or by Following this Blog.


Subscribe to Get Latest Posts in your Inbox


  1. I like this article, very informative.

  2. good article. i hope it will be useful for my blog

  3. Great !! with this article i'll be able to customize blog template .. cool i always search about it and finally i get it

  4. good job it just really bugs have entered personally worked with many such

  5. this is very informative, i will try this and update to you when i am done. thank you Chathura.


  6. Very informative and interesting blog. I like it so much..

  7. This really informative blog for blogger!

  8. This website very interesting... Thank's for your information about CSS. Good Job. I like this....

  9. This blog is very importent to me. thanks dude...

  10. I was searching for the information about how to customize blogs using our own Custom Templates. This article was very useful. I just tried with it and I am happy I got results.

    gift idea

  11. This is useful in customizing blog color theme. Thanks for the share

  12. Cool Post Man. I believe making template my self will be great for the blogs unique look & Hope you will post more like this,

    look at the template here necklaces

  13. Good luck getting people behind this one. Though you make some VERY fascinating points, youre going to have to do more than bring up a few things that may be different than what weve already heard. Logo design company

  14. The basic tutorials are great though average users may take awhile to understand and incorporate them. Moreover, the insight as to why it is needed is more valuable.

    seo reseller

  15. Its really very interesting post full of valuable information. The key part of this post is its descriptive way to define anything.

  16. I'm glad I visited. I will post a link to this site on my blog. I am sure my visitors will find that very useful.

  17. Thanks very much for providing great information here... I like your blog. Thanks very much and keep posting..... I'm looking forward to your new posts.
    Portable solar panels

  18. many thanks for this particular amazing Post. Beneficial subject to dicuss pertaining to about my own Blog. I may placed the bookmark in your website.

  19. Dear Sir,
    Can you make video for this thing, Because of I can't understanding some factors.

  20. Fashion Really useful skills that you serve ... Thank you



Please Use 10 seconds to Make Us World Wide

A Pluse One will be a great support...

Also a Like on the Facebook Page

Get This