Add or Change Background Image of a Blogger Template

In today's Blogger tutorial (Blogspot tutorial) I will show you how to both add a background image to a Blogger template if you don't have one already or change the existing background of your Blogger template.

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/AVvXsEiDwydpxpd5xYOTAj3eX7Mwt3G5NFcNNRoxk9KUpef2kaFWY9FyNw8cW1GvOQjQBWbqJjzJ5cyGGvHN6Ym3htyAdieTvJTmMKaO0d2hIgTOGqBhn-PTshncvo_UyQpJhyUfZfsl31254Wo/s320/background_047.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaIuIJbTDzklfVokcF3M4KLucLSR3Bm-rflfuTFyHyZCUQHW2Pz2ONSNdGCtm8ZW4XgIH3_CAyjPASxOs0IDIml2OGJO5gBzCNY9Ze0X_pBVZ2zFYW55hhwq_Hy6X_ghGsmNiX5QI9lvQ/s320/background_104.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5p5sRfYhrwkv4iW0R_-tVwNBdDEHuzPuFIZ_u6r7R9_gdUHIPeCP-N7JJZhII5qUPcZqLxQTBxiJOvl3qiwUv_vris45DZcJamKvFGx-LI3q1pF17naCz0_qttaq1iA9OcVo3qEDLho/s320/background_126.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijqOnBqmErLjXsQe10zhJQTSUfaBcJy8fQXtwDqaZlWLM_2bkxxDerlJq4I2BlKtglaQuBKYPVPPCwtJDM2EswutIfQdh94refKJ6LaGZiJfl21OC7oBAPGqACvFvFgEotTvyI-M2j5u8/s320/background_073.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUvww2U3fMiIM2AQzx9pzWk8hR9PvWn0xPXBfBombOMD4TOCV9_5USFcb0d-BD2lwUXrtlJwBkt9Kw79Oh2WTOo6P-i6aFDQev_38UTr54zdJfoRbiM6Zdb4kH0wObS9VUZrP8MYXCHi8/s320/background_083.gif

Green Paws Background

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOy3PDfeswmQbRuLECZYSegjussHKa7TLs8Y18qKRqrviPXFnLf9cyZDl3GPeHQWqTlx7GtqPwqWgSgJvijBbJJ7cahHJ22oIKG2fPZxXZrk1N7FEaCGW_m7-AZKB_3-7wEe_Bo1UhKDg/s320/green-paws.gif

Musical Notes Background

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioKSSvJJdVDCOgj42PHsIK_LEl7Zg7NnEk4JnDzTC_XO-dg9w_lUWvkqLSanBXsRnWIqGRMCw7WKPV9TnKtF7h7vVY7c3IigGZKUmRdb6UOCZDVlXp97w9T0BncnvPOArS46n5H9zB0C4/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.

Tips and Troubleshooting

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.
1. Follow steps 1 to 4 as above
2. Find the line beginning with :
  
  background-color: #
3. 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;
4. 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;
5. Use the Preview button to see the effect of each color before you save it.
6. Once you are satisfied go ahead and click on Save Template

Today's Blogger tutorial (Blogspot tutorial) aimed at Blogger beginners continues the series on CSS styling for Blogger. You have learned how to add the background image to your Blogger template or change the existing background image. To help you gain confidence in changing the background image I have provided some sample images for you to practise with. 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.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts

Add a Post Divider Between Blogger Posts

In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create.

This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.

How to add a post divider between posts in Blogger

By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics. Here are some sample dividers you can use to get started:

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdgD5J-oiLm-fYMy-dknn3-uGOjVtH6mWm8Wkr9efIrnCny1VkoRmZ0GFK1a2Zi2UkyANcAenbQCB3Lt4ujmsKp1Nz5zC4OBk3dIEWewBoUQW4ij-XUT_CYgSmqWgpL8Y6x_uoDc5FrfE/s400/ribbon.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9tWqPusCI59haqoagyUF7p_djy6UI6VpUtXHrm6ZuO5UfbmsqLAGv9mT_X7ktCUilk0669wAew11M7Y-sG9wu6zUTFMP10lS96Vm_mw6QABJ4Rkezvw1c0azhYvut-_rio8uZjn-rIW8/s400/bar1.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDMGXMaTUqPvXmE8QdHNmKsPzGx8s4U-SpGjOe2m7h7678VMFDwxEevLYWK4Pj_hC5rYDZgdjXLDKZTVAEkWOPxLsd2f9BIBl7KRB99YjMn83NyQV_LV0qnH09iHDlNOv3LJoIc-XSeok/s400/barbsmpl.jpg

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYS1zo1NGsCCvPa924UDAJHAb9b1fpWyvoegxyHVG2G93YhvtWJLvdtec73if2Qe23qvJ-DePnq1ilTnOzpNnF16y1oeQXYqCkjpVQrm_kEojy4E0VNKMgCUKFZ_CWrgcx1OoDwhEvtI/s400/bar47.gif

How to Add a Divider Between Posts in Blogger

Login to Blogger if not already logged in
From the Dashboard navigate to Layout > Edit HTML
Back up your Blogger template as a precaution by downloading it to your computer
Find the following line of code in your template:

.post {

You are likely to have something like this in your template already:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Paste the following lines of code to this block making sure you paste them before the closing curly bracket:

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdgD5J-oiLm-fYMy-dknn3-uGOjVtH6mWm8Wkr9efIrnCny1VkoRmZ0GFK1a2Zi2UkyANcAenbQCB3Lt4ujmsKp1Nz5zC4OBk3dIEWewBoUQW4ij-XUT_CYgSmqWgpL8Y6x_uoDc5FrfE/s400/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
If any lines are duplicated remove them.
Remove any line beginning with: border-bottom: eg

border-bottom:1px dotted $bordercolor;
You will now have a block of code which looks like this plus any extra lines from the existing code in this block:

.post {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdgD5J-oiLm-fYMy-dknn3-uGOjVtH6mWm8Wkr9efIrnCny1VkoRmZ0GFK1a2Zi2UkyANcAenbQCB3Lt4ujmsKp1Nz5zC4OBk3dIEWewBoUQW4ij-XUT_CYgSmqWgpL8Y6x_uoDc5FrfE/s400/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
Click on Save Template to save your changes
Click on View Blog to see your new post divider between posts

Tips and Troubleshooting

To change the divider to one of the above replace the URL address of the image (in red) with the URL address of the new image you want to use.
To use your own divider image download to your computer from the internet and then save the image to a photo image service like Photobucket. Replace the divider image URL address (in red) with the URL address of your new image
To increase the padding around the divider change the following line of code:

padding-bottom:1.5em;

to

padding-bottom:2.5em;

In today's Blogger tutorial you have learned how to insert a divider between your Blogger posts to enhance the look of your Blogger template (Blogspot template). You can either make your own post divider or download one from the myriad of free website dividers available on the net.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger

Highlight Blogger Article Background

If u want 2 highlight ur Blogger Post Article Background in ur blogger u have 2 use the below Highlighter Code.Follow the below steps for Highlight ur Blogger Post Article Background.

Ur Desire Text Here

? Write a new post.
? Copy given code below and add ur part of article u want 2 Highlight in given place in between code.

<div style="width:450px;height:200px;background-color: #F2F2F2;">Ur Desire Text Here</div>

Note:- If u wish u can change the width & height.

EnJoY.......

Highlights Blogger Article

If u want 2 highlight ur Some Part of ur article in uR blogger u have 2 use Highlighter.It is convenient for readers and also its make your blog beautiful and People will impress with ur writing Style. Follow some steps for make ur Article beautiful.

Preview

Ur Desire Text

? Write a new post.
? Copy given code below and add ur part of article u want 2 Highlight in given place in between code.

<div style="width:200px;height:300px;border-top: 2px solid #000;border-bottom: 2px solid #000;border-right: 2px solid #000;border-left: 2px solid #000;">Ur Text Here</div>

Note:- If u wish u can change the width & height.

EnJoY.......

Text Decoration For Blogger

The text decoration is a stylistic effect that the user may apply to visually rendered text that does not affect the layout of the document.Text decoration mechanisms include underline, overline,line-through,blink,& none.

Preview

Blogger Tips And Tricks
Blogger Tips And Tricks
Blogger Tips And Tricks
Blogger Tips And Tricks
Blogger Tips And Tricks

Code

For Blogger Post

<a target="_blank" href="Ur Address
"><span style="font-size: 8pt; text-decoration:blink">Ur Text
</span></a>

Note :- If u want to add the text decoration code In HTML/JavaScript
Ur Code Will Be

</li><a target="_blank" href="Ur Address
"><span style="font-size: 8pt; text-decoration:blink">Ur Text
</span></a></li>

Possible Values

--------Value-------------------------------Description-------------------------

?none ----------------- Defines a normal text. This is default
?underline ------------ Defines a line below the text
?overline ------------- Defines a line above the text
?line-through --------- Defines a line through the text
?blink ---------------- Defines a blinking text
?inherit -------------- Specifies that the value of the text-decoration property should be inherited from the parent element

Browser Support

?The text-decoration property is supported in all major browsers.
?No versions of Internet Explorer (including IE8) support the property value "inherit".
?The "blink" value is not supported in IE, Chrome, or Safari.

Enjoy...

Email/Contact Me Button For Blogger

Preview

It Is Very Helpful For The Visitors Who Wants 2 Contact u that The "Email Me" Button To ur Site .It Will Increase The Visitors Interactivity 2 Contact with u.Its Very Simple To Creat An "Email Me" Button For Blogger.

? Click Layout Tab
? Then Click Add a Gadget Tab
? Now Click HTML/JavaScript Sub Tab
? Copy given code below and Paste it
? Now Save

<form>
<input type="button"
value="Email Me"
onClick="location.href='
Ur Email Address
'">
</form>

Note :-Don't forget 2 change the red color marked Ur Email Address

eNjOy

Add a Twitter Profile Widget to Blogger

If you use Twitter then you are going to want to let your Blogger readers know about it. One effective way to show your Twitter updates on Blogger is to add a Twitter profile widget to the sidebar of your blog. This widget is quite a bit more fancy than the current Twitter Updates Widget available through Blogger which I showed you how to insert into your blog in my recent article Add a Twitter Updates Widget to Blogger. On the minus side the widget may slow your blog down so test it out first if fast loading time is crucial to you.

How to Insert a Twitter Profile Widget into Blogger

Go to Twitter Widgets and sign in
Choose Profile Widget and you will be taken to a default profile widget page where you can customize your Twitter widget according to your needs.
Choose Settings and make sure that your username is correct
Choose Appearance and make any custom color changes you need to so that the widget will blend into your blog. At the very least you will need to change the shell background and the links colors to suit your blog
Choose Dimensions and change the sizing of the widget if it is too large to fit into your Blogger sidebar. The default setting is 250x300
Click on Test Your Settings to ensure your new widget looks the way you want it to
Click the Finish and Grab Code button
Copy the code by right click the mouse in the code box and choosing Select All. Right click again and choose Copy
Sign in to Blogger. From the Dashboard go to Layout | Page Elements
In the sidebar choose Add a Gadget and then a HTML/Javascript widget
Paste the Twitter code into the gadget content box and click Save
Your Twitter Profile Widget will now be showing in your Blogger sidebar so click on View Blog to admire it