How To Change The Background Color/Photo Of Blogger Template

There are many ways on how to change the background image/color of your post-outer,content-outer and sidebar. You can apply Javascript, css, html codes and many others.  In this tutorial, I would share you the most easy way  to do that with or without touching any  codes of your blogger template.


How To Change The Background Color/Photo Of Blogger Template


Step 1. Go to your Blogger Dashboard  >> Template
change background theme of blogger



Step 2. Hit Customize button

change background theme of blogger



Step 3. In the Blogger Template Designer page, click Background

change background theme of blogger


Step 4. Then choose among the background images (click the pointed  arrow from abstract to travel) that would most fit to your blog

change background theme of blogger


Step 5. Click done and hit Apply to Blog button.

change background theme of blogger

You may also change specifically the background color of your blog template.
See your blog with the new image that you had applied.



How to Add Background Image or Color to Sidebar


Step 1. Go to Blogger Dashboard
Step 2. Click Template
Step 3. Hit the Edit HTML button
Step 4. Search for the tag ]]></b:skin> and just above it paste the following code below:

.fauxcolumn-right-outer .fauxcolumn-inner } background-image: url(http://4.bp.blogspot.com/-kYMBW5LcaAs/T4SKihMu6JI/AAAAAAAABto/_Vq778FLVOs/s1600/background+right.png);
border-radius: 16px;
margin-left: 20px;
height:100%;
}
Short Customization (Optional):
a. Replace the orange bolded text(http://4.bp.blogspot.com/-kYMBW5LcaAs/T4SKihMu6JI/AAAAAAAABto/_Vq778FLVOs/s1600/background+right.png )  with your own image URL.
b. If you want to replace the image with a color, erase the word "image" (without the quotation sign) and replace it with a text "color" (without a quotation sign also". Then erase also the image URL including the sign (  ) and replace it with an hexadecimal color that you want.


How to Add Background Color to Post- outer

Step 1. Go to Blogger Dashboard
Step 2. Click Template
Step 3. Hit Edit HTML button
Step 4. Search for the code ]]></b;skin>, and  just  above/before it paste the code below,

.post-outer {
background-color: #FDFCFC;
border: solid 1px #a8cff0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-goog-ms-border-radius: 5px;
padding: 15px 20px;
margin: 0 -20px 20px;
}
.content-outer, .region-inner {
min-height: 0;
margin: 0 auto;
background-color: #f3f2f2;
}
Step 5. Save your template and you are done.
Thank you for your usual patience and Enjoy!





About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
9 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hello Gefjun! Please let me know as to why ads are not showing on my blog. I have associated my adsense account with my blog, but the ads are not showin. Please help! My blog is:

      http://zamaguides.blogspot.com

      Regards,

      Delete
    2. Hello Muhammad Rafiq, I just visited your blog this time and really adsense ads are not showing. Perhaps your account is still in the probationary period, if it will be fully approved that is time adsense ads will be shown.

      Good luck bro!

      Delete
  2. When we use the custom template so we can not change the template through Advance options in Customize section, But we can add some CSS codes inside the template as you did. Taking a backup before applying any code in template is always a good exercise to avoid trouble.
    Nice write up on the whole.

    Regards,
    Divya @smtutorial

    ReplyDelete
  3. Really Nice Information,Thank You Very Much For Sharing.
    Web Development Company

    ReplyDelete
  4. I really like your site - In addition to this I herewith posting an entertaiment site.
    Click Here To images for rakul preet singh hot stills.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...