Friday, July 30, 2010

How To Change Your Blogspot Background Color

I know I should be posting something for Fortune Friday but AGAIN, I've been busy tweaking this blog.  One thing you might have noticed (or not) is that I've been playing around with the page background.  I've visited different sites that provide free blog backgrounds but I find most of them too distracting or too 'craftsy'-'girly'.  Obviously those themes don't match the character of my site.  I really just want some color on my background instead of just plain white.  Nothing too fancy, nothing too elaborate.  Just simple color.

I don't know why it took me this long to play around with the HTML code of the blog site.  I've been so scared to touch it for so long despite the fact that I know most bloggers play around with that to personalize their sites!  

Anyway, I'd like to share with you what I did to give my background some color.  Hopefully I'd be able to help someone out there who's also been struggling with a plain-looking blogspot page.

Before starting though, please note that changes in the background color will only take effect if you have the original template and have not placed any other backgrounds from other sites such as from 'hot bliggity blog' or 'the cutest blog on the block'.  If you have those in place right now, remove them first and then this should work!

Step One:    
Log in to your account / blogsite and click on 'DESIGN' at the top of the page.

Step Two:
Click on the 'EDIT HTML' tab on the upper left side of the page.

Step Three:
Under 'Edit Template', scroll down a bit to look for the following code:


/* Variable definitions
   ====================
  
             type="color" default="#fff" value="#ffffff">  

Step Four:
Now go to this website for your color slide and select the color of your choice. 
http://www.colorpicker.com/


Step Five:
Once you've selected your color from the color slide, take note of (or cut and paste) the six-digit code that appears on the bottom with the # sign. (ex. # 39672; #CCBB22, etc).  Cut and paste only the code itself and not the # sign.


Step Six:
Paste that six-digit code in place of 'ffffff' where it says 'value="#ffffff'.  Make sure you do not delete any of the quotes or other values, and that you only replace the six f's with your new 6-digit color code.


Click on 'SAVE TEMPLATE'.  Do not forget this step.  Otherwise, the change will not take effect.






There you have it!  I hope it works for you and that you are loving your blog page more with the addition of your personalized background color!  Let me know if you encounter any problems!



No comments:

Post a Comment

Let me know your thoughts!