Change blogger background color: How to change background color of a blogger template?
72All the default blogspot templates are not very nice to look. Most people do not like to use the default template. They spent many hours to change them. Moreover, there are many websites which provide several tutorials. But who knows, which tutorials are the best to change the color? I don't know. I have several blogs and many people ask there how to change those. I only reply them through mail. Because, my blogs contents are not related to blog tutorial or blog customization related. Today, I decided that I will write all the tutorials which will be helpful to all both for the beginners or the experts. In this page, I want to describe the process to change the background color of your blogspot template. You do not need deep knowledge of template. You just read this page and I am sure that you are able to change the background color of your blogspot template easily.
Note: This tutorial is made based on Minima template. The process of changing color of background is similar for any of the blog template. Just for simplifying the tutorial, I use Minima template as standard template because if you understand this templates' modification process then you must be able to modify your own blogs template background color. So, if you use other templates, do not worry. The process of changing the background color is the same.
To change the code, you must have to access template code part. After accessing the template code part, you will find all the things which are needed to change. To learn, how to access template code, you may visit: Blogspot template code: How to find and edit blogspot template code?
Actual code for your background color
If you look the actual code of your template then you see there is a line background: $bgColor;. This line is actually represented for the background color. See there is a field $bgColor which is responsible for defining color. You may choose any color value here. So, the actual code segment for background color looks like the following.
body{
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size: small;
font-size: small;
}Look, the second line of the above code. It's the actual line which define the color of your template color.
Change the color of your blog template
Now, we want to change color of our Minima template. Let we want to change the background color to the right hand side rectangle color. To change any color, we have to replace $bgColor field to any color value. For color value of the right-hand side rectangle is #FFCCFF. Now change the code with that value. After changing the color value the code will look like the following:
body{
background: #FFCCFF;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size:small;
font-size: small;
}Look the above code's second line. We just change the second line of the code. After changing that line, your template background color will be changed.
Note:
You may choose any color. To see the color value of several color, you may visit the following link:
Live View
After changing the template code with the above mentioned code segment, the blog's outlook must be changed. To see the above codes result, you may follow the following like:
One thing you will notice that after changing the color value, your whole blog i.e. the background, posts area and sidebars turn to the same color. Do you know the reason? The reason is that the default Minima template has only one definition for background property. So, if you change only it, the whole things (background, comments, posts area, sidebars etc.) turns to the same color. You can also change different colors for others also. In the next post, I will explain how to change the posts area with another color than background.
Blogger Resources
|
ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income
Price: $12.81
List Price: $24.99 |
|
Blogging For Dummies (For Dummies (Computer/Tech))
Price: $12.40
List Price: $21.99 |
|
No One Cares What You Had for Lunch: 100 Ideas for Your Blog
Price: $11.40
List Price: $19.99 |
|
The Complete Idiot's Guide to Creating a Web Page & Blog, 6th Edition
Price: $13.00
List Price: $24.95 |
PrintShare it! — Rate it: up down flag this hub
Comments
nice.. it helped me a lot
background can be changed body{
background: #FFCCFF;
Just you want to change #ffccff to some other color code..
blog's Recent Pages
- Hover Peek-a-boo Blogger Navbar: How to Hide Blogger Navbar and Make It Visible When You Place the Mouse Cursor on It?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 6 months ago
- Remove or Hide the Blogger Navbar: How to Remove or Hide Blogger Navbar?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 6 months ago
- Change the Color of Blogger Navbar: How to Change the Color of Blogger Navbar?
The Blogger Navbar appears by default at the top of every Blogger-powered blog. - 6 months ago
- Blogger Navbar: What Is Blogger Navbar And It's Advantages and Disadvantages
Blogger Navbar appears at the top of every blogger by default. - 6 months ago
- Adding "Top of Page" Icon Link: How to Add "Top of Page" Icon Link on Your Blog or Website
Many of the websites or blogs posts have a small text or image floating at the bottom-right or bottom-left or bottom-center. - 6 months ago
- Adding "Top of Page" Text Link: How to Add "Top of Page" Text Link on Your Blog or Website
Many of the websites or blogs posts have a small text or image floating at the bottom-right or bottom-left or bottom-center. - 6 months ago
- Adding Signature to Blogger Posts: How to Add a Signature under Your Blogger Posts?
You can easily add your own custom signature to your blogger posts. - 6 months ago
- Blogger Falling Rectangles : How to Add Falling Rectangles to Blogger?
You can add falling objects like small rectangles, circles, stars etc. - 6 months ago
rancidTaste's Recent Pages
- New Interface of Google Search: Try Google Search's New Interface Now!!
Google Search is always favourite to all from the starting of Google search. - 3 weeks ago
- Fresh and unique contents for Search Engine Optimization: The secret talks of SEO and generating site contents
Millions of websites with billions of webpages are available in the cyberspace. - 5 weeks ago
- Free malware protection with Portable Anti Trojan Elite: The best malware blocker and malware remover for your compter
Recently malware is spreading very rapidly. - 5 weeks ago
- rundll32.exe - Application Error â The memory could not be "read". Click on OK to terminate the program.
Windows operating system is corrupted due to several virus infections. - 6 weeks ago
- PPV or PPC?: "Pay Per View or Pay Per Click?" - Which One is Better?
Pay per view (PPV) and pay per click (PPC) are two types of marketing advertising solutions which is used by the advertisers to reach targeted group of visitors. - 6 weeks ago
- Make Good Money with Good Articles and Get Quick Cash
Before going to the main content, I want to ask you tow question? - 6 weeks ago
- Hot Secrets Behind Good Articles: How and Why Good Writers Always Write Good Articles?
Before writing to Hubpages, I have no idea about good articles. - 6 weeks ago
- Backlinks And Backlinking: Search Engine Optimization and the Importance of Backlinks And Backlinking
If you do a small research on search engine optimization or high search engine ranking, then you must come across the term backlinks or backlinking. - 2 months ago








Mohd Salman Baig says:
6 months ago
Awesome post but I need info on how to change the background color of posts.
I want only the posts background to be changed not the gadgets that I add below posts
Plz help
Salman
www.tips4blogging.co.cc