Subscribe to BT To Get Latest Blogger Tutorials For Free

How to Change Sidebar Background Color in Blogger Templates

By default, Blogger does not offer an option to add background color in sidebar [or multiple sidebars]. So, here is a simple tutorial to change the sidebar background color in new Blogger Template Designer templates. After this tutorial, you can easily change the sidebar background color from Template Designer.

Update: I've updated this tutorial. Now you can change the sidebar background color in all default Blogger templates. Templates with multiple sidebars can also have different colors for each sidebar.

Lets Do Some Coding First!

  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. On next page, you'll see a lot of code. Just expand <b:skin>...</b:skin> tag by clicking on the arrow on left side. See following image for help.
  6. .
  7. Find the following code:
    /* Variable definitions
    ====================
  8. REPLACE the above code with the following one:
    /* Variable definitions
    ====================
    
    <Group description="Right Sidebar Background" selector="body">
    <Variable name="sidebar.right.top.color" description="Right Top Sidebar Background" type="color" default="#00f" value="#0000ff"/>
    <Variable name="sidebar.right.left.color" description="Right Left Sidebar Background" type="color" default="#ff0" value="#ffff00"/>
    <Variable name="sidebar.right.right.color" description="Right Right Sidebar Background" type="color" default="#f0f" value="#ff00ff"/>
    </Group>
    
    <Group description="Left Sidebar Background" selector="body">
    <Variable name="sidebar.left.top.color" description="Left Top Sidebar Background" type="color" default="#00f" value="#0000ff"/>
    <Variable name="sidebar.left.left.color" description="Left Left Sidebar Background" type="color" default="#ff0" value="#ffff00"/>
    <Variable name="sidebar.left.right.color" description="Left Right Sidebar Background" type="color" default="#f0f" value="#ff00ff"/>
    </Group>
    
    <Group description="Sidebar Column Background" selector="body">
    <Variable name="sidebar.bgr.color" description="Right Sidebar BG Color" type="color" default="#f00" value="#ff0000"/>
    <Variable name="sidebar.bgl.color" description="Left Sidebar BG Color" type="color" default="#f00" value="#ff0000"/>
    </Group>
  9. After that, find ]]></b:skin> and REPLACE it with the following code:
    #sidebar-right-1 { background: $(sidebar.right.top.color); }
    #sidebar-right-2-1 { background: $(sidebar.right.left.color); }
    #sidebar-right-2-2 { background: $(sidebar.right.right.color); }
    .column-right-inner, column-right-outer { background: $(sidebar.bgr.color); }
    .column-left-inner, column-left-outer { background: $(sidebar.bgl.color); }
    #sidebar-left-1 { background: $(sidebar.left.top.color); }
    #sidebar-left-2-1 { background: $(sidebar.left.left.color); }
    #sidebar-left-2-2 { background: $(sidebar.left.right.color); }
    ]]></b:skin>
  10. Click Save template and then Back button.

Coding Done! Time to Add Some Colors in Sidebar :)


We've finished the coding stuff, now simply click the Customize button to open Blogger Template Designer.
Blogger Customize Button
Then click the Advanced tab. You'll see 3 new options there. First one is Right Sidebar Background. It has 3 further options.


Right Top Sidebar Background: This will change the background color of the top section in the right column.
Right Left Sidebar Background: This will change the background color of the left sidebar in the right column.
Right Right Sidebar Background: This will change the background color of the right sidebar in the right column.


Next option is Left Sidebar Background. It also has 3 further options.


Left Top Sidebar Background: This will change the background color of the top section in the left column.
Left Left Sidebar Background: This will change the background color of the left sidebar in the left column.
Left Right Sidebar Background: This will change the background color of the right sidebar in the left column.


Last option will be Sidebar Column Background. This is the most interesting one because it affects the whole column rather than a single sidebar section. It has 2 further options.


Right Sidebar BG Color: The color in this option will change the background of whole column on the right side.
Left Sidebar BG Color: This option will change the background of left side column.

I hope this tutorial would be helpful for you. Kindly link back to this blog. You can use the link code available at the bottom of this page. This code can be used in sidebar or footer.

What to Do if Tutorial Does Not Work for Your Blog?


I write tutorials by testing on all Blogger default templates like Simple, Ethereal & Watermark. Such tutorials might not work on custom or highly customized templates because of incompatible codes. In such case, you can hire me. I'll charge $16 for this tutorial. You'd be able to customize the color by simply going to Blogger Template Designer. You can contact me via email [levisinside0@gmail.com].




99 comments:

  1. Hi!

    Thanks for this code, but funnily enough the colours don't seem to show up on blog. I am using Simple as the base template, and after editing the code I am able to see a customization option in my Advanced design editor. Why do think this may be happening?

    Thanks in advance!

    ReplyDelete
  2. @ Rabia Fathima, I don't know exactly, you can send me your template file and I'll have a look at it!

    ReplyDelete
  3. Thanks this was the first one that worked for me!!!

    ReplyDelete
  4. Hello, I followed all the steps. However, when I change the colors on the sidebar, it does not show up on my blog. Here is my blog url:
    tracysbistro.blogspot.com

    ReplyDelete
  5. @ Miss Tracy A., send me your template file.

    levisinside0@gmail.com

    ReplyDelete
  6. Yep - options are now there, but selection isn't showing on blog.

    ReplyDelete
  7. Thank you so much for this its exactly what I've been looking for. I'm also trying to change the background colour of the main body of my blog (the area where my actual posts are), as I have a busy background but would like my posts to be on a plain background so they are easier to read. I imagine the process is similar to this, but I don't know how to do it! Any advice would be so appreciated, thank you.

    ReplyDelete
  8. The colour does not show up on my blog. www.stkhit.blogspot.com Please advice what should i do.

    ReplyDelete
  9. @ Shwe Thiri Khit, what colour do you want to use as background of your sidebar? Send me your template file:

    levisinside0@gmail.com

    ReplyDelete
  10. Hi!
    Thanks for your help. It added a little accent to my blog. I also hope that you can show us how to put a background color to the title of each categories on the side bar:)

    Keep it up!

    ReplyDelete
  11. Trying to use this to change my sidebar background to white. I made the changes but they don't show up on my blog.

    ReplyDelete
  12. Ohhhh, Thank you, thank you, thank you!!!!! I have been searching the web for instructions that would WORK! Yours did on the first try!!

    ReplyDelete
  13. This is amazing! Thank you so much for the help! I have both my sidebars on the same side and was hoping to make them two different colors but with this tutorial it changes them both to the same color. Any tips or thoughts?

    ReplyDelete
  14. http://expeditioncornwall.blogspot.com/
    I am using the simple template and "change sidebar colour" has appeared but the background colour will not change on the blog, Thanks loads if you can help.

    ReplyDelete
  15. I've used the same code principle to try to change the sidebar text (as I want it different to the post text). The option showed up in customise area but changes not showing on blog.

    If you don't mind taking a peek at this different application of your code, I would appreciate it.

    http://bohemiantwilight.blogspot.com/

    ReplyDelete
  16. @ Monica, I've tested the tutorial again. It is working fine for me. Please send me your template file, I'll have a look at it.

    levisinside0@gmail.com

    You can download the file from Template section by clicking the Backup/Restore button at top right.

    ReplyDelete
  17. Thank you so much for this tutorial! It was exactly as I was looking for and was able to customize my colors. I wish there was a sidebar border option, but for the moment I am satisfied!

    ReplyDelete
  18. how about change the sidebar background color completely? like bloggersentral.com?

    ReplyDelete
    Replies
    1. Hi there, that would require further editing of the template.

      Delete
  19. Thanks for this post. I tried it and it worked. The only issue is the length of the color changes doesn't extend all the way down my page. any suggestions?

    ReplyDelete
    Replies
    1. Hi Nakisha, what template are you using? What is your blog address? Complete background change would require additional coding.

      Delete
  20. Thanks a lot! It works for me! Now, i´ll be looking for some code who changes footer color at Simple. xo

    ReplyDelete
  21. I'm having issues with this as well, I make the changes in the template designer, but it's not showing up on my blog. Can you help?

    ReplyDelete
    Replies
    1. Hi Ashley, please tell which template are you using and what is your blog address?

      Delete
  22. doesn't work for me too :-( I'm using an etheral template n my site address is http://www.onlyfishrecipes.com

    ReplyDelete
    Replies
    1. Hi Only Fish Recipes, please email me your template file. Just go to the Template tab, click Backup/Restore button on top right then click Download full template button to download your template file and send it to me.

      levisinside0@gmail.com

      Delete
  23. I can't find a section that has ]]>

    only one that has " must not appear in content unless used to mark the end of a CDATA section.

    I use the simple template :-)

    ReplyDelete
    Replies
    1. Hi EvaMae, find the following code in your template:

      /* Posts
      ----------------------------------------------- */

      and place the step 6 code before it. I said place not replace. After that save your template and see the blog if that worked.

      Delete
  24. Hi there ! I've got the options to appear but I too can't seem to get the colour changes to show up on my blog ... I'm SUPER new to creating my blog and although I've done some website design using Imageready and photoshop I'm finding this blog designing really difficult. I want my blog to eventually look like this - http://nimpodcast.blogspot.co.uk/
    but with different colours.

    My blog is - http://doubledownpodcast.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Hi Levendus, the blog you've mentioned is using an old Blogger template. These templates are no longer supported. However, you can apply that template on your blog. Go to the Template tab and scroll down to end. You'll see a link "Revert to classic templates" click it. It will expand, then click the "Revert to classic template" option to select and apply a classic template. Though I'd highly recommend not to do that.

      Delete
    2. Thank you it worked really well!!!

      Delete
  25. Powerone Inverter thanks for this site this is very useful to me as i am new to this blogging industry.

    ReplyDelete
  26. It does not work for me my site is here
    http://www.littlepinkstrawberries.com/

    ReplyDelete
    Replies
    1. Hi Noor, please email me your template file.

      levisinside0@gmail.com

      Delete
  27. Its a good tutorial. But i think Right Right Background color doesn't work well. I may be wrong. But it worked great!!! Thanks a lot

    ReplyDelete
  28. Thank you Soo SOO much!!
    This actually helped me!!!:)

    ReplyDelete
  29. Hi! I have been trying to get rid of the grey colour on my side bar. I want everything else to stay the same. Can you take a look at my blog and tell me what I can do. I have tried everything. I am only able to change the title colours.

    Thanks,
    Andrea
    http://uskar-vor-inspire.blogspot.ca/

    ReplyDelete
    Replies
    1. Hi Andrea, you're using a custom template. So, please send me your template file with question.

      levisinside0@gmail.com

      Delete
  30. Hey! I did just what it said, and in the template design the different tabs showed up, but the colors aren't coming through. Help??

    www.maid4him.blogspot.com

    ReplyDelete
    Replies
    1. Hi Mikailah, please email me your template file:


      levisinside0@gmail.com

      Delete
  31. Okay, I got it! My last template was really weird... and nothing was working. But is working fabulously now! Thank you so much! This is the only tutorial that I have seen for the sidebar color that works. :)

    THANK YOU!

    ReplyDelete
    Replies
    1. Hi Mikailah, I'm happy it worked for you. Please support this blog by adding a link back to betatemplates. The link code is available at the bottom of this page. Thanks :)

      Delete
  32. When I try editing the HTML, every time it won't let me save it and says "Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:" in red. Help?

    ReplyDelete
    Replies
    1. Hi Stacey, email me your template with this question:

      levisinside0@gmail.com

      Delete
  33. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Penguiin23, I've checked your blog. You have not yet applied this tutorial. Please follow the tutorial carefully.

      Delete
  34. do you know how to change default view from classic to sidebar??

    thx..

    ReplyDelete
    Replies
    1. Hi wala, sorry :( I don't know what you're talking about.

      Delete
  35. I did code stuff, but can't see the colors.... :(
    www.theunknownblogster.com

    ReplyDelete
    Replies
    1. Hi Nadine, you have customized your blog. That's why you can't change sidebar background color. Please email me your template file, I will fix it :)

      levisinside0@gmail.com

      Delete
  36. Thanks. The code seems to work fine, but the colors doesn't show up on my blog :-(

    ReplyDelete
    Replies
    1. Hi Sandra, please email me your template file with your question.

      levisinside0@gmail.com

      Delete
  37. This was exactly what I was looking for.
    However, while the changes to my sidebars show up in the template screen, they do not appear in my blog.
    Any idea why?

    ReplyDelete
    Replies
    1. Hi Jen, What is your blog address?

      Delete
    2. I just wanted to clarify that it's Ken, not Jen, and the blog address is:
      http://ozonesouthbridge.blogspot.com/
      Please pardon me if I'm being redundant. Thank you for your interest in my problem.

      Delete
    3. Sorry Ken, I was typing on my new Nexus 7 that's why miss-typed your name. Sorry :) Anyway, kindly send me your template file:

      levisinside0@gmail.com

      Also write the problem in the email as well.

      Delete
  38. The first part worked like a charm, but the 2nd code kept messing up. Any help?

    ReplyDelete
    Replies
    1. Hi Kristina, please email me your template file:

      levisinside0@gmail.com

      Also write the problem and your blog address in the email as well.

      Delete
  39. Thank you for these instructions. They helped a lot.

    ReplyDelete
    Replies
    1. Hi Ariana, kindly add a link to betatemplates.com. The code is available in the bottom :)

      Delete
  40. Thank you! That was very easy and helpful! :)

    ReplyDelete
    Replies
    1. Hi Natalie, I'm glad it worked for you. Please support this blog by linking to it. The link code is available at the bottom of this page.

      Delete
    2. Thanks I will
      But now I have a problem with the mobile view. it's totally blank and without the template. is there a way to change this?

      Delete
    3. Hi Natalie, what is your blog address? Also go to the "Template" section. Click the button below mobile template. See if the option "Yes. Show mobile template on mobile devices." is checked or the other one is checked?

      Delete
  41. Great tip - it's easy and gives much more control. Thanks!

    ReplyDelete
  42. Thanks... it is wonderful tutorial~!

    ReplyDelete
  43. Yay, it's the only one that worked for me. Thanks a lot!

    ReplyDelete
  44. Having The same Problem as others- I get the option to change the colour but it just doesn't do anything ...

    ReplyDelete
  45. Hi! I'm using the template from Awesome Inc (Fantastico Spa) and I can't change the color of my sidebar even if your code seem to work properly.
    Can I send you my template file so that you can fix it, if you can? :)
    Thanks a lot!
    Manuela

    ReplyDelete
    Replies
    1. Hi Manuela, I can do that for a reasonable $11.

      levisinside0@gmail.com

      Delete
  46. Great! Thank you! I've got the colors to change but now my sidebar runs into my post. Is there a way to separate them, or make the background color/border narrower? I tried setting that to transparent, but then my titles are right on the edge of the widget color and it looks bad. Thank you! jessicapospeck.blogspot.com

    ReplyDelete
    Replies
    1. Hi Jessica, you can get that done through my custom service of $11 per customization.

      Regards,
      Bilal
      levisinside0@gmail.com

      Delete
  47. that's very helpful, thanks a lot

    ReplyDelete
  48. Thank you, but this also changed my outer colors (already had "framed" body). I only want to change the side bar or menu area on the left.
    Thanks.

    ReplyDelete
    Replies
    1. Hi Cynthia, which template are you using? Have you customized it? These tutorials have been tested to work on all default Blogger templates.

      Regards,
      Bilal

      Delete
  49. Wow, this actually worked!! Thanks!

    ReplyDelete
  50. I'm having the same problem as some of the others. The option shows up but it does not reflect a color change on the blog. Did I miss a piece of code?

    Thanks!

    Keri

    ReplyDelete
  51. I can't find the Variable definitions code in my blog. I'm on the ereathral template. Thanks! (passthefresh.com)

    ReplyDelete
  52. Hi Deb,

    This code is present in your template. I've just checked and found this:

    /* Variable definitions
    ====================

    You just need to find it using Ctrl + F keys or by scrolling down in your template code.

    Regards,
    Bilal

    ReplyDelete
  53. I have looked several times and can't find anything that says variable definitions :( my blog is adecentliving.blogspot.com please help

    ReplyDelete
    Replies
    1. Hi Brenna, sorry for replying late. This tutorial needs to be updated. You can find the above code by going to Template then click Edit HTML button. After that, expand the code blocks by clicking arrow on the left side of <b:skin>...</b:skin>. You can then simply scroll down a bit and see the variable definitions code.

      Delete
  54. The colour isn't showing up on my blog also.
    I'm wanting to use a light blue, the same as the post footer background.

    ReplyDelete
    Replies
    1. Hi Chocolate, what is the address of your blog? Are you using a custom template?

      Regards,
      Bilal

      Delete

Copyright@2014 : All Rights Reserved
Powered by: Blogger