This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Sep 26, 2007

Digg This Story

Change Widget Background Color

In our article on Background Image for Blogger Template, we had explained how to have a background color or background image in the body, main posts, or sidebars. This will apply to most blog templates except templates like TicTac. Instead of having the entire sidebar in one color, you can also assign a different color to each of the widgets. This guide will let you know how you can change the background color of each individual widget.

Let us assume that you have created a Link List via Template -> Page Elements -> Add a Page Element. If your Link List has no title, temporarily assign to it a title. Next, go to Template -> Edit HTML and press Ctrl+F to search for that title.

For example, we have a Link List entitled “My Blogs”. We search for this title in the template and we see this:-

<b:widget id='LinkList1' locked='false' title='My Blogs' type='LinkList'/>


What we want to know is the widget ID. In this case, it is called “LinkList1”. The next Link List will be “LinkList2” and so on. If you have a HTML/JavaScript page element, it will be “HTML1” and if it were a Label List, it will be named “Label1”.

We need to set a background color for this particular widget. Scroll back up to where we see all the # and insert the following code after a curly bracket }. For easy reference in the future, we have inserted it under /* Sidebar Content */ although it doesn't really matter where you insert it as long as it is between <head> and </head> and after a } character.

#LinkList1{
background: #FCDFFF;
}


We pulled off a color code from our Color Code Chart.

We can do the same for our LinkList2, Label1, Label2, HTML1, HTML2, etc. Just insert the relevant ID and color code.

#Label1{
background: #FCDFFF;
}

#HTML1{
background: #FCDFFF;
}


After that, Preview the template. This is what a colorful set of widgets can look like:-

Change Widget Background Color

With a wise choice of colors, you can customize the background color of each widget to something that you like and which suits the theme of the widget or Blog.

© Tricks for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

12 comments:

Matt Plavnick said...

I'd love to be able to add different background colors to my individual sidebar widgets. I'm using the minima template and can't find the # section mentioned "scroll back to where we see all the #". Am I missing it or is it different in this template? Thanks.

bizwhiz said...

That is just a reference. Add the code anywhere between <head> and </head>. That is where you see #header, #main, and so on.

Cale said...

I wanted to change the background color of the "Blog Posts" section, but apparently this method doesn't work. Any suggestions?

Anonymous said...

Your method for adding a color behind each widget in the sidebar worked great, but I still have a margin to the right from the original sidebar color. Is there any way to extend the new color all the way across so that it covers the sidebar? I've been playing around with the code and can't get it to work (I know enough HTML to be dangerous!). I guess my other option is to change the original color to white and have every widget a different color. I am using template #897.

Anonymous said...

brilliant! THANK YOU ;)

Эльвира said...

thanks!

thingswelovetohate.com said...

thank you so much for this post! it helped me with exactly what I needed :)

jamespoetrodriguez said...

Esto funcional fenomenal... ya lo he aplicado, y por cierto, no ocupan que los gadgets estén registrados al template, simplemente háganse la sección en el html y verán que luego sólo se guían con los id de los widgets y funcionará estupendo.. además ya probé colocando colores y fondos de imagen... FENOMENAL... MIL GRACIAS.

Many Money Savers Blog said...

thanks for all your tips. they have been a great help.

Deanna said...

Tried, and it worked. Thanks for the tutorial!

mommygaga.com

Googa said...

Hey,

I used your tip to change a background color for a "Twitter follow me" banner. The problem im facing is that the code only changes the upper (Title) and bottom spaces of the widget, leaving a big white space in between. Is there something I can do?

Flashducky said...

great tutorial, just what i was looking for and very easy to follow! cheers!!