I have chosen to write this article not because there aren't any how to articles already on the net but because they assume quite a bit of knowledge. I have taken a different tack with this post in that I assume you are an absolute beginner with no knowledge of Blogger templates.
For this reason I have provided some sample backgrounds for you to play around with. By just cutting and pasting these images you can see first hand how dramatically adding a different background to your Blogger template can change it. You will see that replacing your background image with these images isn't that difficult and hopefully it will give the confidence to branch out further and change the background of your Blogger template to suit your own needs. All that is needed is to insert a small snippet of code into the CSS styling section of your Blogger template and hey presto your Blogger template will take on a whole new look.
How to Change the Color of a Blogger Background (Default Templates)
If you are using a default Blogger template then you already have the option to change the background color to your own taste by going to Layout > Fonts and Colors. Some third party custom Blogger templates have this option too but by no means all.
For instructions on changing the background color of custom templates see tips and troubleshooting below.
How to Add a Background Image to a Blogger Template
- Log in to Blogger if not already logged in
- Go to Layout > Edit HTML
- Back up your Blogger template as a precaution by downloading the full template to your computer
- Find the following line in your Blogger template
body {
- Add the following line directly after this line
background-image: url(URL address of your image);
Your block of code will now look like this:
body {
background-image: url(URL address of your image);
(existing code in this block)
}
- Now replace the code in red for the URL address of your image. Choose an image from the selection below to practise with or use your own image. Note if using your own image make sure you read the tips and troubleshooting section below.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmjo5jDq9tUnIOcLmrWyYG4qKPo_uEaNFlhEVjoIWEXt2_vRfJXDmRFbZlvMeTP0yHlg4n7O824g_96Wn3zzXbVLtj1-kg4w-_DNx2i1QmjkFRXZE1U72lp0bX3vcXTT1CVTBe5RjuzFs/s320/background_047.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunTFJdNTNic2Znj7PDYULkpuY76X3aCWTPUo6_IpypK4kIdCbRbsAOnvW_0celSIBzKMjPvCAW8hbbybFDJxJMny396mI_jSooSXU4knOQT22JRgVCPgSvxm3uTZWeDSGilEG_UayZX0/s320/background_104.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW16Gtm_Cofq3IrYoFarkNtU6FtbgItR0cIftpTb98ZjKv5KzwGxpS4dzJCs7u_oRPDKZ5ojN5oI3zQlKLgJox6hnZ2zAR3-Y1ElC-WtMGtEEb-eFp-q3AdMgySa9uTpzSAlMKmbNrPOk/s320/background_126.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdofU8LP-IKqv7tqPPqlavgU_bSK23YWZx8w3bUo9nKibYyuk9MgK25DB0_S2ej-wpeKAEoyBjky7Wkhx1VM4sYFxyCmevZUudgSf5VM27FDQq6FYAgHbPvJSe1wPc8V8674CxK8TzWJk/s320/background_073.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-FSUz69ZG9tsmnz2BKKWklouRf4rc5-_uMYYKIc0jWzqP06b25TIMR-GTXtuPFBnq9OkfYJyXkvQ-OV9hTu0JcN8TNuyszK7XWMjJOF965wO-9aNEOa5oJOUqplR3t2KpY1jEQutK5Xc/s320/background_083.gif
Green Paws Background
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj2BjJ7cSA7rE_GoF29WJoMuoauMsXzGzk1WWEeD8Ybu3NcQmf0uT2DgVqtq3nGVGm8z3MtblWSCy1wFPweIWSCLwEOayOfzWRHd3E9dLSbxeJ4cTi5GAE1KHmcE5jJ_zdQDswqzRH-8A/s320/green-paws.gif
Musical Notes Background
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir92nDLOjytmyEjndzcccOitP-nmpep7d3o1iq0r5la1DF7NrFCH5A2inlaYcuJSMTQklN5RpKSj2HhhuKr9iSIyc3IoPLyxiq5XMqAMLJaOxvGH0OGc5pjhKBtRd15R7OXSWpafeaAio/s320/melody.gif
- Use the Preview button to see the effect of these different backgrounds on your template. It will help you get an idea of the kind of possibilities out there.
- You are welcome to use one of the above Blogger backgrounds as they are all free to use without any restriction. If you decide to use one of these simply click on Save Template and you are in business. Alternatively go ahead and find your own background image on the net and follow the instructions below to insert it into your Blogger template.
- To Add Your Own Image to a Blogger Template
There are huge number of backgrounds on the net that are suitable for Blogger. Search under free website backgrounds in your favorite search engine to find these.
Simply download your preferred background and save to an image service like Photobucket, Flickr.
Make sure the file format is either a .jpg, .gif or .png and that its size does not exceed 100kbs. As a rule of thumb an image size of around 30kb or less is about right if loading time speed is not to be compromised. Larger images can be resized quickly by using an online resizing service such as Shrink Pictures.
Follow the instructions above to change the URL to that of your image.
- To Change the Background Color of Your Custom Blogger Template
If there is no option to change the background color of your Blogger template in Layout > Fonts and Colors you can still change the color manually.
- Follow steps 1 to 4 as above
- Find the line beginning with :
background-color: #
- The hex color will be different for each template. We will change the color only
background-color: #change hex color code to your chosen color;
- Replace the existing hex color code with the value of your chosen hex color. List of web safe hex colors. For example insert the following code to change the background color to:
Denim Blue
background-color: #336699;
Black
background-color: #000000;
White
background-color: #ffffff;
- Use the Preview button to see the effect of each color before you save it.
- Once you are satisfied go ahead and click on Save Template
- Follow steps 1 to 4 as above
Also in this Blogger tutorial you have learned how to change the color of your Blogger background if you prefer a plain solid background color rather than a background image. As always if you strike any problems implementing the tips in this tutorial please let me know.
How To Send Free SMS Worldwide With Gmail
24/10/2013 - 0 CommentsSEND FREE SMS directly from your Gmail, Google Mail chat. How to send free sms Gmail has a new feature…
Add CSS Search Box to Blogger
03/10/2013 - 0 CommentsSearch Box in any Site or Blog has very important role it not only help the visitor but also help to increase…
Verified Fb Page tick mark 4 Blogger Author Comments
13/08/2013 - 0 CommentsDo you noticed a tick mark in some Facebook Pages like Actors, Political Leaders. Verified mark is only…
How to Add Missing Quick Edit Wrench to Blogger
29/06/2012 - 0 Commentstype="html">In this Blogger tutorial (Blogspot tutorial) I show you how to add a quick edit wrench to…
Guest Posting - Best Link Building Strategy
09/08/2012 - 76 CommentsLink building strategies have several facets. Several strategies are hailed, one such strategy is guest…
SEO vs SMO – Overview Tips
24/09/2012 - 48 CommentsFew years back no one was able to locate your business on Google if the site was not optimized properly. So…
How to Replace Older Blogger Page Links With Buttons
21/06/2012 - 1 CommentsThe Default Older, Home and Newer Page Links In Blogger looks very unprofessional. You can design that links…
The way to produce a Competitive Advantage for your Blog
10/06/2012 - 0 CommentsEvery single blog should devote itself to produce a sustainable edge so that you can produce a competitive…
Random Posts...!!!
Posted in: Background,blogger,Change,Image,Template
1 comments:
This blog is really knowledgable and gives us so many information related to internet and SEO,Thank you for posting this news. SEO Waterloo
Post a Comment
Please feel free to comment on this topic.