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!

Aug 16, 2007

Digg This Story

Sidebar Title Background Color and Image

The sidebar usually has many different widgets, ranging from links to labels to advertisements. It is wise to make the Headers in the sidebar stand out from the contents. Navigation will be easier for the readers, and with a unique choice of colors, you can draw the attention of the readers to these widgets.

Background Color

We can add a background color or a background image to the sidebar titles. Log in to your Dashboard and go to Template -> Edit HTML. In many of the templates, the sidebar styles are found here:-

h2 {
background:#FFFF00;


Add the above background color code and Preview the template. Do not save. Because there are many different types of templates, you have to first confirm that this is where your sidebar header styles are situated.

Sidebar Title Background Color and Image

If you see the yellow backdrop to the sidebar Headers, you can then change the color to something that suits your Blog. For a list of color codes, you may refer to our Color Code Chart. If you don't see the yellow color, you can try inserting the color code under h3 or h4.

Background Image

To add a background image, first create the image. After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL. Take note of the Image URL. See that when you enter this Image URL into your browser, you are able to view the image, instead of being prompted to download it.

Insert the background image code here:-

h2 {
background:url(http://www.blogpulp.com/imagehost/images/381245101.jpg);



If you have not yet created an image, you can use the above Image URL to test and Preview the template to see the effect. You should see this:-

Sidebar Title Background Color and Image

Now, replace the part in purple with the URL of the image that you have created. The sidebar Headers will have this image as a background. There are further attributes on positioning, repeating the image, etc. which can be included. If you are interested, you can adopt the attributes discussed in our Background Image for Blogger Template article.

One more thing. In the Minima template for instance, the Date header in the Blog Posts uses the same h2 header element. If you have added a background color to the sidebar title, you may also see the same background color in the Date of the Blog Post. You won't want that. Therefore, insert another background color to that Date header element:-

h2.date-header {
background:#ffffff;


Here, what we have done is to fix the background color of the Date header as white to be consistent with the background color of our Blog Posts. Change the color code to your Blog Posts background. Preview and save the template.

© 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

14 comments:

The Beading Gem said...

Alas the background colour to sidebar titles looks awful. Yours looks better. Can you give us instructions on how to underline the sidebar titles instead? Thanks.

ZBit said...

Thanks for all your Tips!
Relative to this one it works ok, but, in my case using the K2 template (I don't know if it is related to the specific template) it only give background color exactly the same width that the title word/sentence just like a highlight effect.
How can I use a background color with the exact width of the sidebar and not restricted to the width of the sidebar titles?

alladr said...

it simply doesn't work. I tried to paste your line with the background url in my h2 style block (modify html) but it returns to me an error code: bX-qarjrd.
the link and the image are ok.

chilly said...

Hello!
Do you know of way to lose all sidebar title background and text. Then replace the titles with images for each widget. Images would be words that say 'About Me', 'Labels', 'Archives', etc...
Seen this on some blogs but haven't figured out how to place a different image for each wedget title.
Thanks, and your blog rocks!! You give some awesome help!

http://onthebricks.blogspot.com/

Hannah said...

With Widgets you have that title line at the top when you create them. If you don't want a title to show up on the main blog portion (you leave blank) you get a generic title on your add or arrange screen like, "html java' meaning you added some html or java to that widget, but didnt' place a title on it. Is there a way to place the title ONLY on the layout page, and NOT on the main blog portion?

Strange Guy said...

How do you add a border around the sidebar title? Anyways, I love your site.

'-Yas-' said...

how about if i want to put different sidebar header images for each one?

Edie said...

I added a background and border to the sidebar titles and and it works on all except the html and text gadgets. Do you have any suggestions how I can fix this?

Nene said...

Mr, please help! Visit my blog and see there is some part that is flawless image...please help >.<

Harvey Wallbanger said...

Hi,

Your tutorial worked flawlessly. Thanks a lot. I ve used some of my own tweaks on my blog : http://cosmopolistan.blogspot.com

Do tell how you find it : )

Thanks again

kati said...

hi!

thanks for the tips - however i have a problem:
everything works just fine with only adding a background color following your instructions, but nothing happens when i try to use a background image?!?
Has anyone an idea what the problem here could be?

MaryRC said...

great tip. any suggestions as to how i can not have the image repeat? i've tried standard html, no workie..

Big B said...

My sidebar moved down, in line with blogpost.

Please help I tried everything and checked around 100 blogposts for error tags.

I cannot fix it, please help me i am in big trouble, i have 3 sites using herbret blogger template, since last 5 days on all my sites my right sidebar pushed at the bottom, after all blog post, i tried but cannot find the fix. please help....

my sites
1. www.sugarinds.blogspot.com
2. www.latestcarblog.blogspot.com
3. www.heartsafetytips.blogspot.com

Thanks

Anonymous said...

Hey are you a professional journalist? This article is very well written, as compared to most other blogs i saw today….
anyhow thanks for the good read!