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

1. Log in to Blogger if not already logged in
   
   
2. Go to Layout > Edit HTML
   
   
3. Back up your Blogger template as a precaution by downloading the full template to your computer
   
   
4. Find the following line in your Blogger template
   
   

   body {

   
   
5. 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)
   }

   
   
6. 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/AVvXsEhUI3YCtWplx_f4fd9jvdJCfzggjIET0mA8FUFLIatR9R9yXtX6s2Q4zliX5jFfd2YKcb1F6fIgWco5x3qDkU6pdIm7AzQnc2Z5AI0qJFn_7NexHceoiwoidmjU1ZsJRXMfk9XuP0GeFdg/s320/background_047.gif
   
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihNWEcquFlfKg-UeyP0bV1efolLsPo3cq59REuO6LZSkvsgxX3nVomJW12yLr9QmA6VsBQ0nDEcwiVDaTrbJSOVtj_fcs9wSLb5hW1cbpbtJf4yQnVumDo_-AxaD_d45TSa-d-FHb7J8/s320/background_104.gif
   
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJ1Am87PxwbBsuiewFu1NiLdarQZ_97qDg_KxAUxAelzbtcjyq0eEHAltpYve50uH2c5fhZYFyscFLwciqRKVPWA_nqrtCFQe7SMR8DP_GHDezcCMwYtHVdx-6zUF8KD7bBc5K4M-zLA/s320/background_126.gif
   
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHy_cNdNtj7rxAqgujha6f00Jq2x71fd0xg7iJWCsz3uxqdFAUyZ1O9C1y8G1TPP3O5Qvk85XSu2WYT9WXm3k5YR3JJypeIdDtkES0xmNkvQShDD_F02e27kvS4_6wS-4cZNpHvy15rZ4/s320/background_073.gif
   
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRse3S-x9_WL5EMz54_N5zw60HXPPlvpRbve9BIQDk7evp95nwVZ3ync5DljJbYXlCu8CS5wOJYdaMXNMakuv6Vhxqfo41UuGvfbnZ9gvQYKjGRswCBsX6SioM9_ONSy-vRAb2pj0LCCY/s320/background_083.gif
   
   Green Paws Background
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGbegVd51FLt7lBtBduZshX0NuLFINcOKJelDH6XnwaclSiC_9IQA8y_Rb1RjVZUuvXTHbNxy_pZ9nJuwcuXC6Qr4Xi4WhwchVxNdTvV4ZTB7bIXChqbw-bc3Lf_Wmo-vAhOoiQuRQr0/s320/green-paws.gif
   
   Musical Notes Background
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY34eKSXBb-E8epMMEHGCNQgnNY0nT0km46oDyCepispj2IgY-8aBViiruFl-V6S0CSXyfp2PATEINw9c67PAOLliFYPCiOpfHU39LwkikVHE-i7WzLEhH5Jt8TAKU6wPRm1E5vnkaFqM/s320/melody.gif
   
   
7. 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.
   
   
8. 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.


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/AVvXsEgYe-3_G1ORFiaDq_AQpHryMGkWlt6ROFkBYqHgR7Xi1DcO-h0-fa0PVLr9zfV7C5Vi3b5PDFdgtYwYe_zkSG4OWRJYgT7AdmorC2jsICvOM5Z607wLG1pD9lregkRVBEOpxiNeGIellC8/s400/ribbon.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirxiUMhxAdM5BLqBzzDxSoDTHQ8FsjZn7bKcljP3TjQ7A0mXMa0uyaizKgAuewiU1AC-i3YsA0gib2Eg2RFiD08bYvVKkuxKBzF-hynx-SVOhH1JF7Kj-IlLUSwFtAw5-pMdN3-c3Hc5Y/s400/bar1.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6sdBBAKd5GZpL-6hyF6aBZROrhuF2VB8oCX4QR6dynjskTCoIzx9a4RtveNrJ2SezEyxx9fBGkvAVtyMvarptqdtq5RO_xWUXV2I9gxC0FzXDx1v1EzjDh9rWpMnLNDiqgi1Rjl_jPX4/s400/barbsmpl.jpg


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

How to Add a Divider Between Posts in Blogger

1. Login to Blogger if not already logged in
   
   
2. From the Dashboard navigate to Layout > Edit HTML
   
   
3. Back up your Blogger template as a precaution by downloading it to your computer
   
   
4. 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;
   }

   
   
5. 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/AVvXsEgYe-3_G1ORFiaDq_AQpHryMGkWlt6ROFkBYqHgR7Xi1DcO-h0-fa0PVLr9zfV7C5Vi3b5PDFdgtYwYe_zkSG4OWRJYgT7AdmorC2jsICvOM5Z607wLG1pD9lregkRVBEOpxiNeGIellC8/s400/ribbon.gif);
   background-repeat: no-repeat;
   background-position: bottom center;
   margin:.5em 0 1.5em;
   padding-bottom:1.5em;

   
   
6. If any lines are duplicated remove them.
   
   
7. Remove any line beginning with: border-bottom: eg
   
   

   border-bottom:1px dotted $bordercolor;

   
   
8. 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/AVvXsEgYe-3_G1ORFiaDq_AQpHryMGkWlt6ROFkBYqHgR7Xi1DcO-h0-fa0PVLr9zfV7C5Vi3b5PDFdgtYwYe_zkSG4OWRJYgT7AdmorC2jsICvOM5Z607wLG1pD9lregkRVBEOpxiNeGIellC8/s400/ribbon.gif);
   background-repeat: no-repeat;
   background-position: bottom center;
   margin:.5em 0 1.5em;
   padding-bottom:1.5em;
   }

   
   
9. Click on Save Template to save your changes
   
   
10. 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

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

1. Go to Twitter Widgets and sign in
   
   
   
2. 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.
   
   
3. Choose Settings and make sure that your username is correct
   
   
4. 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
   
   
5. 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
   
   
6. Click on Test Your Settings to ensure your new widget looks the way you want it to
   
   
7. Click the Finish and Grab Code button
   
   
8. Copy the code by right click the mouse in the code box and choosing Select All. Right click again and choose Copy
   
   
9. Sign in to Blogger. From the Dashboard go to Layout | Page Elements
   
   
10. In the sidebar choose Add a Gadget and then a HTML/Javascript widget
    
    
11. Paste the Twitter code into the gadget content box and click Save
    
    
12. Your Twitter Profile Widget will now be showing in your Blogger sidebar so click on View Blog to admire it
    

In this Blogger tutorial I have showed you how to add a Twitter Profile Widget to the sidebar of your Blogger blog (Blogspot blog). This Twitter widget will encourage your blog readers to visit your Twitter Profile and with luck you may get some new Twitter followers out of it.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add a Twitter Updates Widget to Blogger
Add Twitter Button or Twitter Badge to Blogger
Add Twitter Followers Counter to Blogger
Add a Social Bookmarking Button to Blogger
Add Social Bookmark Buttons to Blogger
Best Free Social Bookmark Icon Sets for Blogger

Add a Simple Drop Down Menu to Blogger

In today's Blogger tutorial I show you how to add a simple drop down menu widget sometimes called a select box to the sidebar of your Blogger blog (Blogspot blog). If you want to add lots of links to your Blogger blog but are worried about the amount of space this will take up on your blog this tutorial is for you. A drop down widget is a neat solution to the cluttered sidebar problem as it is both space saving and easy to install. The convenience of a drop down menu widget can be seen on many blogs where it is used for lists like a long Blogroll, Categories list, Labels list or a Recommended Posts list.

How to Add a Drop Down Menu Widget to Blogger
Adding a drop down menu to Blogger is well within the capabilities of even beginner bloggers. Most of the work is in cutting and pasting the links which is not difficult for anyone with basic computer skills. So let's get started but first here is a working drop down menu list with links to various posts in my blog:

- Blog Know How Tutorials -Twitter Badge or ButtonTwitter Retweet ButtonTwitter Updates Widget

1. Log in to Blogger if not already logged in
   
   
2. Navigate from the Dashboard to Layout > Page Elements.
   
   
3. Click on Add a Gadget in the sidebar or other location if you wish
   
   
4. Select a HTML/JavaScript gadget from the list of gadgets
   
   
5. Paste the following code into the content box of the widget:
   
   

   <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
   size=1 name=menu>
   <option>- Your Menu Title -</option>
   
   <!-- Change the following links to your own -->
   
   <option value="http://URL of link1">Link 1</option>
   <option value="http://URL of link2">Link 2</option>
   <option value="http://URL of link3">Link 3</option>
   <option value="http://URL of link4">Link 4</option>
   <option value="http://URL of link5">Link 5</option>
   
   <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
   </select></form>

   
   
6. Replace _blank as follows:
   
   
   • To have a new window open leave the same
     
     
   • To have the new page appear in the same window replace _self
   
   
   
7. Replace - Your Menu Title - with a title of your own
   
   
8. For each instance of the option values highlighted in red substitute your own links and link names. For example:
   
   <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
   
   
9. Click Save
   
   
10. Use drag and drop to position the drop down menu widget in the location you want it within your sidebar and save any changes
    
    
11. Click View Blog to admire the new drop down menu in the sidebar of your blog
    

In today's Blogger tutorial I have provided you with instructions to create and insert a simple drop down menu widget in the sidebar of your Blogger blog (Blogspot blog). This widget is ideal for reducing clutter on your Blogger sidebar and excellent for displaying long lists of links such as labels in a convenient, neat and space saving way. A drop down menu gadget is easily installed from the Layout > Page Elements page and can be customized to your own specifications. Any problems with this Blogger tweak please let me know. Enjoy!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add Breadcrumb Navigation to Blogger
Add Horizontal Links Menu Navigation to Blogger

Blogger Read More Links in Posts with Jump Breaks Feature

In this Blogger tutorial you will learn how to insert jump breaks into your Blogger posts (Blogspot posts) as an aid to quick navigation for your visitors. Jump Breaks in Blogger provide an easy way to show only a snippet of your whole post on the home page of your blog with a read more link below it for the rest of the story.

I have already written about a Blogger expandable post summaries hack which provides a read more feature for a Blogger blog homepage. For most Blogger webpublishers (Blogspot webpublishers) this hack is no longer necessary because Blogger as part of its 10th birthday celebration introduced a new feature called Jump Breaks. I cover several methods to insert jump breaks depending on whether you are using a Blogger default template or a customized Blogger template.

The advantage of adding jump breaks to your Blogger posts is that your readers can quickly and easily skim your most recent posts for what interests them rather than having to scroll through a whole bunch of long articles. This is definitely a big help for those of us like me who often write articles longer than 500 words. If your posts are short and sweet you may find that adding this read more feature is unnecessary however you can still apply it when you do have a longer post. Below is an example post which illustrates the Jump Break feature in action.


How to Insert Jump Breaks (Read More Links) in Blogger
It is easy to insert a Jump Break into your Blogger posts (Blogspot posts) at any point of your choosing.

There are two methods of inserting the Jump Breaks in Blogger. Which method you choose depends on which post editor you are using. If you are not sure which editor you are using check this out by going to Settings > Basic and scrolling to the bottom of the page. Under Global Settings you will see a radio button next to old editor or updated editor.

1. Method 1
   Insert Jump Breaks - New Blogger Post Editor Only
   In order to use this method you need to be using the updated editor in Blogger or have Blogger in Draft enabled.
   
   
   • When creating a new post in the Blogger Post Editor position the cursor in the editor at the point you wish the Jump Break to be inserted
     
     
   • Click on the insert Jump Break icon (currently the last option on the menu)
   
   
   
   • A jagged dividing line will appear to mark the insertion point
   
   
   
   • Publish your post as normal
   
   
   
2. Method 2
   Insert Jump Breaks - Old Blogger Post Editor Only
   If you are using the old post editor rather than the new post editor you can still insert jump breaks into your Blogger posts.
   
   
   • When creating a new post in the Blogger Post Editor make sure you are in the Edit HTML mode rather than compose mode
     
     
   • Insert the following code at the point where you want to break the Jump Break to occur:
     
     

     <!-- more -->

     
     
   • Publish post as normal

Tips and Troubleshooting

1. To Add Jump Breaks to New Posts Automatically
   To save time it is possible to automatically add Jump Breaks to posts with the following method:
   
   
   • Go to Settings > Formatting and scroll to the bottom of the page
     
     
   • Under Post Template paste <!-- more --> into the box and save. The next time you create a new post the <!-- more --> will automatically appear. Make sure you are in the Edit HTML mode to see <!-- more --> appear.
   
   
   
2. To Change the Read More Text
   If you want to change the Read More text for something like Read Full Story or Continue Reading you can easily do this by:
   
   
   • Go to Design > Page Elements
     
     
   • Edit the Blog Posts widget
     
     
   • Change the post page link text (Read More text) which appears at the top of the page to your preferred text and save
   
   
   
3. To Manually Add Jump Breaks to Blogger For Users of Customized Templates
   If you are using highly a customized template or have customized your Blog Posts widget you may experience a problem in getting the Blogger Jump Break feature to work. In this event you can edit your Blogger template to enable Jump Breaks.
   
   
   • As a precaution back up your template by downloading full template to your own computer
     
     
   • Tick the Expand Widget Templates checkbox
     
     
   • Using CTRL + F find the following line of code:
     
     

     <data:post.body/>

     
     
   • Directly below this line insert the following code into your Blogger template:
     
     

     <b:if cond='data:post.hasJumpLink'>
     <div class='jump-link'>
     <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
     </div>
     </b:if>

In this tutorial you have learned how to create expandable post summaries using the new Blogger feature Jump Breaks. You now have the option to easily insert Jump Breaks into your Blogger posts so that longer posts appear with only an introduction followed by a Read More link.

I have shown you 2 methods to insert the Jump Breaks and Read More links into your Blogger posts depending on whether you are using the new or old post editor features. I have also given you some tips to make sure you get the most out of the Blogger Jump Break feature including what to do if the Jump Breaks feature does not work with your customized Blogger template. As always I would welcome your feedback about your experiences with the expandable post summaries Blogger feature (Blogspot feature) or any other feature you may be having an issue with.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogger Buzz - You Might as well Jump!