It has always been the desire of every blogger to make their blog eye
friendly to their visitors. Tweaking your blog with new features and
color designs will not only make your blog attractive, but encouraging
to your visitors.
Recently, I got a message from a friend via Gmail, asking how he can Add a Colour Background frame for his gadget title.
There are different methods of doing this which I’ll be explaining below so take your time to read till the end.
In other to Add Color Background to your gadget title, you will have
to change the Sidebar Title Background Color in your Html Template if
you can not do it via Template Designer. But both methods has been
provided for you and also how to use a customized image to make it more
attractive and unique.
1st Method
1. Login to your Blogger Dashboard
2. Go to Layout > Edit Html.
3. Press CTRL+F and Search for sidebar h2 {
4. Then add background-color:#007788; just after the sidebar h2 {
5. After that it will look like this sidebar h2 {background-color:#007788
Note:You may not find sidebar h2 { Then Look for /* Sidebar Content Just below it add the following code .sidebar h2 {background-color:#007788;}
Note: Change the color code in red to your desired color in-order to match your blog design.
If you want to change main post gadget title background on blogger Look for
/* Headings
And add the following codes below it instead of the one above.
background:#007788;
2nd Method
1. Login to your Blogger Dashboard
2. Click on Design > Template Designer > Advanced (at your left
side) scroll down and select > Add CSS > input the follow code
below inside the box provided #Gadget ID h2 {background-color:#000000;}
You will have to change the color code in red to the color that matches your blogger template design.
If you want to apply color background on all gadget title, then use this code instead:
.widget h2 {background-color:#000000;}
3rd Method
This method is for those wishing to use image or picture as a Background to their Gadget Title.
All you have to do is, Design a picture or Image using Adobe
Photoshop, Corel draw or any software you can use to design a picture.
Upload your image to Blogger and get the Image url, after doing these, follow the above step to to complete the bellow steps:
Use any one of the following code and paste in the provided box.
#Gadget ID h2 {background-image:url(‘YOUR IMAGE’);}
OR
.widget h2 {background-image:url(‘YOUR IMAGE’);}
Change the YOUR IMAGE to the image url you get earlier.
Save your changes clicking on Apply To Template.
Happy Blogging! Share!
Friday 30 March 2012
Adding Background Color To Blogger Widget Title Bar
Posted by
Emeka Kamanda
at
09:00
Adding Background Color To Blogger Widget Title Bar
2012-03-30T09:00:00-07:00
Emeka Kamanda
Blogger|Blogging Tips|
Comments
Emeka Kamanda
Emeka Kamanda is a part-time blogger from Nigeria. I am a computer freak and love all what I do. You can follow me on twitter or facebook or add me to your circles on Google+. You can also get my blog updates through your email.Follow us on: |
Get free daily updates through email
Adding Background Color To Blogger Widget Title Bar
2012-03-30T09:00:00-07:00
Emeka Kamanda
Blogger|Blogging Tips|
Subscribe to:
Post Comments (Atom)