Monday, June 27, 2011

Change Blogspot Background image and color

Blogspot ( Blogger) is one of the best blogging spot for blogger. Changing appearance of your blogspot.com can be tricky part for some early blogger. There are two ways to change appearances of your blog at blogspot.com

     1. Using Template Designer
     2. Directly Using Edit HTML

Using Template Designer

Using Template Designer is easy and bounded part. You can only use predefined colour and background image given in the system. Screen shot of Template Designer is given below.
Changing Blogspot Background Color
In Blogger Template Designer under Templates tab there is Background tab. You can change Background image Main color theme of the blog. There are hundreds of background images divided in different categories.

Direct Using Edit HTML

Under Edit HTML Tab you get Edit Template Section. In HTML code there You will get.
/* Content
———————————————– */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
To change background of your blog.
You have to change
background: $(body.background);
Where $(body.background) is driven by Blogger Template Designer. You can change the dynamic value changer to static value given below.
background: #FFFFFF url(http://abc.com/image.jpg) repeat-x fixed;
Where #FFFFFF is Hex value for background color
And url(http://abc.com/image.jpg) repeat-x fixed
gives the path of background image used as background picture. repeat-x means image is characterized to show in x or horizontal axis within fixed body width.