CSS Gradients to Customize widget headers differently

Customize Blog Template Your Self

     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-size:14px;
font-family: Sans-serif, Arial, Helvetica;
font-weight:bold;
color:#ffffff; 

<---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,

background:#E39E0A;

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;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;

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.

---

---

!!Warning!!

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