How to Choose a Custom Blogger Template to Avoid Problems

So you have downloaded a custom Blogger template from the internet and now you want to customize it to the needs of your Blogger blog (Blogspot blog). Before you expend all that energy check under the hood to make sure the Blogger template isn't a lemon and that you are not going to be wasting your valuable time.

Blogger has been around for some years now and has gone through many changes. Before the most recent default templates were introduced, the choice of default templates was not that great leading many developers to crank out a heap of custom templates to meet the demand of bloggers looking for a theme that matched their blog. The problem was however, that many of these Blogger themes had missing code and many had hard coded fonts, color schemes, gadgets etc requiring coding knowledge to make alterations to the template.

Many of these custom templates are still around to download. Some are good, some not so good. Be aware if you use a custom template on your Blogger blog it will not perform as well as a default template and some may potentially have problems further down the track as Blogger introduces new features. In preference it is usually better to use a default template and customise it to your own specifications. In future posts I will talk a lot about how to go about this so watch this space.

In the meantime if you have downloaded and installed a Blogger custom template and you want to check it out before going ahead with making changes look for these three features immediately on installation of a custom template. If any are missing there are fixes available but it does mean an edit to the template code. Also bear in mind that if gadgets like these are missing the template was probably created a few years ago and it may be better to find something more recent.

1. Check that the Blogger quick edit wrench is working. That is the crossed wrench symbol that appears next to each installed gadget in the Blogger blog sidebar, header and footer when you view your blog and are logged in. The best place to check for this on installation is in the sidebar. Each gadget will have its own wrench symbol if this feature is working properly.
   
   If you really like the template but this feature is not working please check out my instructions to fix this issue Fix the Missing Quick Edit Wrench in Blogger
   
   


2. Check that the Blogger quick edit pencil is working. The quick edit pencil is the pencil that that appears beneath the post in the post footer when you are logged in and viewing your blog. It does not display in post preview mode. It must be enabled under Configure Blog Posts (Go to layout and then click on edit on the blog post gadget). If the quick edit pencil feature in Blogger isn't working once you are sure it has been enabled then try this fix
   
   


3. Check that the Blogger default share buttons are working. These appear in the post footer at the bottom of each post. You can see these in the image above. Make sure these are enabled by going to layout and then clicking on edit blog post gadget and then ticking enable the share buttons option.
   
   
   

Other Blogger Custom Template Checks
Also check that slideshow or image sliders are working first before you do anything else to the template as often template creators do not give instructions about how to get these working. If you are not going to get good support from the template creator think carefully about using the template.

Another factor to keep in mind with custom templates for Blogger is that you may not be able to remove the links below the footer because of copyright reasons. Sometimes template authors put several of these at the bottom of the template which can be annoying.

In this article I have provided a few tips to help you choose a custom Blogger template and hopefully prevent you from investing time and energy in a template that has been poorly coded and may not be worth the effort to customise in the long run.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
No Quick Edit Wrench Problem in Blogger Fix
No Quick Edit Pencil Problem in Blogger Solution

How to Change the Blog Description Font Color in Blogger

Those new to Blogger often ask about how to change the blog description in a Blogger blog. In today's Blogger tutorial I show you how to modify your blog description using the Template Editor to change the color of the font. If you have made changes to the background color of your header you may also want to change the font color of the blog description.

If you want to learn how to change the font style or change the look of the text please see my Blogger tutorial on how to change the font size and font style of the blog description.

How to Change the Color of the Blog Description
Before you start ensure you have blog description enabled on your Blogger blog. This tutorial assumes you have a default Blogger template installed on your blog. If you are using a custom template these instructions may or may not work depending on the coding of your custom Blogger template.

1. Log on to Blogger and navigate to the dashboard of your blog


2. From the left hand menu select "Template"


3. On the Templates page under "Live On Blog" select the "Customize" Button
   
   
   
4. From the left hand menu select "Advanced"
   
   
   
5. Click on "Blog Description" currently the 5th item in the menu

6. Under "Description Color" choose a color from the suggested palette or from the drop-down menu or type in the color code if you know the hexidecimal value eg #FFFFFF for white and #000000 for black.
   

7. Notice that the changes you make can be seen in the live view below. When you are satisfied with the color scheme you have chosen save your changes and click View Blog. Please note that you might not able to see the changes in live view mode if you are using a custom template. In this case you will need to save the changes and then click view Blog to see the applied changes.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change the Font Size and Style of the Blog Description in Blogger

How to Change the Font of the Blog Description in the Blogger Header

In today's Blogger tutorial I show you step-by-step how to change the font style and font size of the blog description. The blog description is the tag line under the Blog Name that appears in the header section of your Blogger blog. If you do not yet have the blog description for your Blogger blog enabled follow these steps:

1. From your Blogger dashboard select "Settings" which is located at the bottom of the left menu
2. Then choose "Basic"
3. Type your blog description in the description box located below the blog name. (Make sure you choose something that describes what your blog is about)
4. Save your changes.
5. Choose View Blog to see the blog description you added now in your blog header.

The main reason you might want to change the font of the default blog description is because the blog description in default Blogger templates is on the small side. Just by increasing it to 16px or even 20px will make a difference. Also you might want to customize the blog description to achieve a particular look. This tutorial will help you customize the blog description to your own individual requirements.

This tutorial assumes you are using a default Blogger template such as Simple or Awesome. If you are using a custom template the template code may be different, however, these instructions should still work in most cases.

Instructions to Change the Font Size and Style of the Blog Description
Unfortunately, the only modification to the blog description Blogger currently allows using the Template Designer is changes to the font color. Changes to the font style and font size of the blog description therefore require a manual insert of a little bit of CSS code into your Blogger template. Follow these steps to change the text style and size in Blogger:

1. Log in to Blogger and go to the dashboard of your blog.

2. From the left hand menu select "Template"

3. On the Templates Page select "Edit HTML" under Live Blog.


4. From the top menu select "Jump to Widget" and then "Header 1" from the drop down menu.


5. Find this line:

   <b:widget id='Header1' locked='true' title='Your Blog Name (Header)' type='Header'>...</b:widget>


6. Now click on the dots that appear between type='Header'> and </b:widget> to expand the section.

7. You should now see the following code

   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Your Blog Name (Header)' type='Header'>
<b:includable id='main'>
<b:includable id='description'>...<b:includable>
<b:includable id='title'>
</b:includable>
</b:widget>
</b:section>


8. Click on the dots between <b:includable id='description'> and </b:includable>

9. Now you will presented with this code:
   

   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p> </div>

10. Find this line:
    

    <p class='description'><span><data:description/></span></p>


11. Now to change the blog description to a different font eg default to verdana change the code to the following
    

    <p class='description' style='font-family: verdana;'><span><data:description/></span></p>

12. To change the blog description font style to italics change the code to the following
    

    <p class='description' style='font-family: verdana; font-style: italic;'><span><data:description/></span></p>

13. To change the font style of your blog description from the default capitalized case to uppercase change the code as follows. Note for lower case use: text-transform: lowercase;
    

    <p class='description' style='font-family: verdana; font-style: italic; text-transform: uppercase;'><span><data:description/></span></p>

14. To increase the size of the blog description font from 12px to 16px for example change the code to the following
    

    <p class='description' style='font-family: verdana; font-size: 16px;'><span><data:description/></span></p>

15. Putting all the changes together from 11 to 14 would need the following code change
    

    <p class='description' style='font-family: verdana; font-style: italic; text-transform: uppercase; font-size: 16px;'><span><data:description/></span></p>

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change the Blog Description Font Color in Blogger

How to Remove the Link from a Single Image in Blogger

By default Blogger creates a link to the image whenever an image is uploaded to a Blogger post. Sometimes, however, you might want to remove the link to prevent the image from being clickable. A common reason would be to safeguard your image. If you are worried about your image being copied you can prevent it from appearing full size by disabling the link.

If you just want to disable the hyperlink from a single image in Blogger try this method. I have found that it removes the link but it will not reinstate it once removed (using the toggle button) so be sure you want to remove the link before you start otherwise you will need to reinstate the link manually. I suggest you backup before you start.

This image has had the link removed

1. Go to the Blogger Post Editor.
2. Ensure you are in Compose mode (toggle between Compose and HTML on the top left corner under your Blog name
3. Upload an image in Blogger or use an existing image.
4. Highlight the image. You will see it gives you the choice of sizes, to add a caption, remove the image etc.
5. While the image is highlighted click on Link from the menu once. This will disable the hyperlink and your image will no longer be clickable.
6. Save your changes.
7. Go to your live blog and try clicking on your image. Your image will no longer be clickable and you will no longer be able to see a larger view of the image.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Remove the Image Border in Blogger Template Simple
How to Change or Delete Image Borders in Blogger Posts

How to Fix Missing Quick Edit Pencil in Blogger Blogspot

Is your custom Blogger template missing its quick edit pencil at the bottom of your Blogger posts (Blogspot posts)? Don't worry. In this Blogger tutorial I discuss how to show a quick edit pencil icon beneath Blogger posts if it is missing. This is a common Blogger problem among custom Blogger templates but fortunately it only takes a couple of minutes to fix.

This Blogger tutorial follows on from my previous Blogspot tutorial about fixing missing Blogger icons. Check out how to show quick edit gadget wrench in Blogger (Blogspot) for help with this issue.

In my previous Blogger tutorials I have also discussed how to fix many other common Blogger problems eg how to fix a missing embedded comment form in Blogger. Take a look at all my Blogger tutorials on how to fix common Blogger problems (Blogspot problems) here

Fix Missing Quick Edit Pencil Blogger Blogspot
The quick edit pencil is a nice Blogger feature that you would not want to be without. A click on this time saving Blogger icon gives you direct access to your Blogger posts without having to go through "Edit Posts"

So if the free custom Blogger template you downloaded from the internet has no quick edit pencil displaying under your Blogger posts when viewing the actual published post then it can be fixed by taking the following the steps below:

1. Login to Blogger
   
   
2. Go to your Design > Page Elements
   
   
3. Click on the Blog Posts edit button located in the bottom right hand corner of the widget
   
   
   
4. A Configure Blog Posts window will pop up displaying a number of different features that can be turned on and off on your blog posts.
   
   
5. Make sure that Show Quick Edit is checked. Tick the box and save if Show Quick Edit is not already checked
   
   
   
   
6. Now navigate to an actual published post and check whether the quick edit pencil is now displaying in or around the footer of your blog post. Remember that you must be logged into Blogger to see the quick edit pencil - it is not displayed to your visitors
   
   If the pencil is there then that is the end of this Blogger tutorial. The pencil just needed to be enabled. So thank you for joining me today and if you have any other issues with Blogger be sure to check out my how to fix common problems in Blogger tutorials or take a look at the list of all the Blog Know How Blogger tutorials
   
   If the Blogger quick edit pencil is still missing it means that some important code has been omitted from your Blogger template and it will need to be added to get the quick edit pencil to show up
   
   
7. Go to Design > Edit HTML
   
   
8. Back up your template
   
   
9. Check the Expand Widget Templates box by placing a tick in it
   
   
10. Find the following line of code by holding down the CTRL key and F at the same time:
    
    

    <b:includable id='postQuickEdit' var='post'>

    
    
    
11. Check whether the following code is under it:
    
    

    <span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </div>
    

    
    
12. If part or all of the code is missing copy and paste it above :
    
    

    <!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

    
    
    
13. Save changes to your Blogger template
    
    
14. Go to an individual published post page and see your new quick edit pencil displayed under your Blogger post

Tips and Troubleshooting
If you want to change the Blogger quick pencil icon you can by changing the image. Simply replace the image as depicted in red with the URL address of your own image. If your image is a different size you may have to change the width and height as shown in blue for the image to display correctly

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> </div>

In this Blogger tutorial (Blogspot tutorial) I have shown you how to fix a missing Blogger quick edit pencil that is not showing. I have demonstrated how to enable the quick edit pencil in Blogger via Page Elements and I have provided you with the missing code in the event that the quick edit pencil code is missing from your custom Blogger template.

Please let me know if this tutorial has been useful for you by leaving your comments and opinions below.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Show a Quick Edit Gadget Wrench in Blogger (Blogspot)
How to Fix a Missing Embedded Comment Form in Blogger
How to Fix Common Problems in Blogger

How to Add Missing Quick Edit Wrench to Blogger

In this Blogger tutorial (Blogspot tutorial) I show you how to add a quick edit wrench to Blogger if it is missing from a Blogger gadget. Check here to find a solution for a missing quick edit pencil not showing in Blogger

The quick edit feature allows you to edit a Blogger gadget directly from the blog itself rather than having to go through the Design > Page Elements screens and then finding the actual widget itself before you can edit it.

Heaps of times I have downloaded custom Blogger templates only to find that there are lots of omissions compared to a default Blogger template. If you are using a custom Blogger template with the quick edit feature missing here is a step by step guide to insert the missing quick edit feature into your Blogger template

The quick edit can be missing from anywhere in your Blogger template. I have chosen to use the sidebar for this tutorial but the solution works wherever the quick edit feature has been removed or never inserted in the first place.

Tutorial Difficulty rating: Easy
Time: Less than 5 minutes
Suitable for all levels of Blogger expertise

How to Add the Quick Edit Wrench to a Blogger Gadget

1. Login to Blogger
   
   
2. Go to Design > Edit HTML
   
   
3. Check the Expand Widget Templates box
   
   
4. Using CTRL + F buttons together bring up the search box
   
   
5. Enter the following search term
   
   

   </b:includable>

   
   
   
6. Scroll through your Blogger template. You will see that every instance of </b:includable> is highlighted in yellow.
   
   
7. Once you come to the sidebar widgets which is the most likely place for the quick edit to be missing from look for something like the following (this will vary from template to template). This is the start of the first sidebar if you had a template with a two column sidebar
   
   <b:section class='sidebar' id='sidebar1' preferred='yes'>
   
   
8. Now look at the picture below. You can see that this is the code for a Javascript/HTML widget as shown in red
   
   
   
   
9. Just identify the widget that has the missing quick edit feature and add the following line of code immediately before the </b:includable>
   
   

   <b:include name='quickedit'/>

   
   
   
   
   
10. Use the Preview button to check your changes before committing to them
    
    
11. Don't forget to click on Save Template

In this Blogger tutorial (Blogspot tutorial) you have learned how to fix a missing quick edit button often missing from custom Blogger templates. No matter where the quick edit button has been omitted (sidebar, footer, header etc) it can be added in to a Blogger template very easily so that a Blogger gadget can be edited without having to go through the Blogger design screen.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Fix the Quick Edit Pencil when it is not Showing Up in Blogger Blogspot
How to Fix a Missing Embedded Comment Form in Blogger
How to Fix Common Problems in Blogger

How to Add Borders to a Blogger Footer Blogspot

In this Blogger tutorial I expand on my previous article about how to add a 3-4 column footer to Blogger by showing you how add border styling to the new footer. You will learn how to add a border around all of your footer columns or around only part of the footer columns. You will also learn how to add different border styles and border colors to customize your 3-4 column footer.

If you have just landed here and need instructions on how to add a 3 or 4 column footer to your Blogger blog then please refer to how to add a 3 or 4 column footer to a Blogger template (Blogspot template)

This is a walkthrough designed to assist bloggers with no experience of CSS styling who want to enhance their Blogger template with borders and other CSS styling. By following these examples you will gain the knowledge you need to make many types of custom changes to the borders of your new Blogger footer. For help with changing the background of your blogger footer please see my article How to Change the Background a Blogger Footer.

How to Add Borders to the Footer of a Blogger Template
To add lines (commonly known as borders) to a Blogger template footer we need to add some CSS styling.

Before beginning to add borders there are 3 values to consider:

• width of the border (line thickness eg 1px, 2px, 3px and so on)
  
• line style of the border (solid, dotted, dashed, double)
  
• color of the border (hex color)

1. How to Add a Border Around the Outside of a Blogger Footer
   First we add the border property and then add the border style, border width and the border color values. In these following examples just by changing these values we can achieve lots of different results.
   
   
   • To Add a Dashed Border Around the Outside of a Blogger Footer
     With the following code a dashed black line 1px thick will be added around the outside of the footer.
     
     

     #footer-columns {
     
     margin:0 auto;
     clear:both;
     }
     
     Change to:
     
     #footer-columns {
     border: 1px dashed #000000;
     clear:both;
     margin:0 auto;
     }

     
     
     
   • To Add a Dotted Border Around the Outside of a Blogger Footer
     By changing the dashed black line to a dotted border it is simple to get a different line style.
     
     

     #footer-columns {
     clear:both;
     margin:0 auto;
     }
     
     Change to:
     
     #footer-columns {
     border: 1px dotted #000000;
     clear:both;
     margin:0 auto;
     }

     
     
     
   • To Add a Solid Border (Blue 3px thick) Around the Outside of a Blogger Footer
     To add extra emphasis we can change the line color and its thickness. Here I have made the line blue rather than black and thickened it from 1px to 3px.
     
     

     #footer-columns {
     clear:both;
     margin:0 auto;
     }
     
     Change to:
     
     #footer-columns {
     border: 3px solid #336699;
     clear:both;
     margin:0 auto;
     }

     
     
   
   
2. To Add a Partial Border to a Blogger Footer
   Sometimes we might want to add a border to only one part of the footer area rather than the whole thing. Again we add the border property but we append it with the following values: (top, bottom, left, right) depending on where we want to place the border.
   
   
   • To Add a Solid Border to the Top of a Blogger Footer
     

     #footer-columns {
     clear:both;
     margin:0 auto;
     }
     
     Change to:
     
     #footer-columns {
     border-top: 1px solid #000000;
     clear:both;
     margin:0 auto;
     }

     
     
     
   • To Add a Solid Border to the Bottom of a Blogger Footer
     

     #footer-columns {
     clear:both;
     margin:0 auto;
     }
     
     Change to:
     
     #footer-columns {
     border-bottom: 1px solid #000000;
     clear:both;
     margin:0 auto;
     }

     
     
   • To Add a Dashed Border to the Top of a Blogger Footer
     

     #footer-columns {
     clear:both;
     margin:0 auto;
     }
     
     Change to:
     
     #footer-columns {
     border-top: 1px dashed #000000;
     clear:both;
     margin:0 auto;
     }

     
     
   • To Add a Dotted Border to Both Top and Bottom of a Blogger Footer
     

     #footer-columns {
     clear:both;
     margin:0 auto;
     }
     
     Change to:
     
     #footer-columns {
     border-top: 1px dotted #000000;
     border-bottom: 1px dotted #000000;
     clear:both;
     margin:0 auto;
     }

     
     
   • To Add a Dotted Border 4px thick to Both Top and Bottom of a Blogger Footer
     

     #footer-columns {
     clear:both;
     margin:0 auto;
     }
     
     Change to:
     
     #footer-columns {
     border-top: 4px dotted #000000;
     border-bottom: 4px dotted #000000;
     clear:both;
     margin:0 auto;
     }

     
     
     
   • To Add a Blue Solid Border 5px thick to Both Top and Bottom of a Blogger Footer
     

     #footer-columns {
     clear:both;
     margin:0 auto;
     }
     
     Change to:
     
     #footer-columns {
     border-top: 5px solid #336699;
     border-bottom: 5px solid #336699;
     clear:both;
     margin:0 auto;
     }

     
     

In this Blogger tutorial (Blogspot tutorial) I have shown you how to make some simple customizations to the borders of a Blogger footer. This tutorial is intended as an extension of my earlier tutorial on adding a three or four column footer to Blogger. However it is also suitable if you are using a custom template and want to enhance the footer styling further. You have learned how to add borders to a Blogger footer and change the position, color, width and styling.

If you want to know more about CSS styling I will be publishing further articles in the future. Look out for my next article in this series How to Add Backgrounds to a Blogger Footer.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add a 3 or 4 Column Footer to a Blogger Template

How to Add a Table to Blogger Blogspot Post

This Blogger tutorial (Blogspot tutorial) explains how to put a table into a Blogger post. You will learn how to create tables in Blogger ranging from a simple table to a more complex table with alternating colors.

We will start with a basic table and gradually add CSS styling to the table to improve the look and functionality until we have built the table pictured directly below. No knowledge of CSS and HTML is assumed so this Blogger tutorial is suitable for absolute blogging beginners.

A Blogger Table Caption

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

Tables are a useful way to display information particularly tabulated information. Tables are good whenever you want to align information so that it is easy to read and understand. You can add text, hyperlinks and even images to a table which makes them very useful for presenting information.

There is no easy way to add tables in Blogger yet. Even if you are using the new editor you will note that no table button is provided. Fortunately it is easy enough to use a bit of CSS styling to spruce up a table and enter this manually into a Blogger post.

How to Add a Table to Blogger Posts
First you will learn how to add a simple table to Blogger. We are going to start with a table with 3 columns and 4 rows including a header row. Then I will show you step by step how to add different features to the table including how to add extra rows, a background color to the header, a border, a caption, change the size of the table, center align the table and more.

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

1. In Blogger open either a new post or an existing post that you wish to add a table to
   
   
2. Click on the Edit HTML tab on your Blogger editor
   
   
3. Copy the following code into your Blogger post which will produce the basic table as shown above:
   
   

   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr>
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
4. Make changes to the table to suit your own Blogger template if necessary by changing the following:
   
   

   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">

   
   
   • Border width (blue)
     
   • Border color (black)
     
   • Background color (red)
     
   • Table width (orange) Can be a percentage or actual width eg 500px
     
   
   
5. Now we are going to fix an annoying problem in Blogger which renders too much white space above the table. We do this by adding the following styling denoted in red directly above the table tag and adding a closing </div> at the end of the table code
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr>
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table></div>
   

   
   
6. Let's add some further styling to our table header to improve the look of our table as denoted in red. Change the background color and color attributes to suit your own color scheme if you wish
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
7. Now let's add another row to our table for Blogger so you can see how this is done
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
8. In this step we are going to center the contents of our Blogger table. This can be done in several ways but we are going to take a short cut here by assigning a style to every table row
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} </style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">

   
   
9. Now we are going to jazz up our Blogger table by adding alternating colored rows to improve readibility and appearance. By far the easiest way to do this is to assign a class.
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;}</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr class="alt">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr class="alt">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
10. It is also easy to add a caption to your Blogger table. For a caption above the table simply add the caption line as shown in red. For a caption below the table add the caption line in red and a style as shown in blue
    
    
    
    
    

    A Blogger Table Caption

    Table Header	Table Header	Table Header
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell

    
    
    

    <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
    <caption>A Blogger Table Caption</caption>
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table>
    

    
    
    
11. One more important property needs to be addressed in our new Blogger table to improve the look. We can reduce the double border into a single one. The easiest way to do this is to change the cellspacing to zero as denoted in red. Or, alternatively we can apply the border collapse property to our table as shown in blue. Note: Border collapse may not be supported by all browsers particularly if the cellspacing attribute is defined also)
    
    
    
    
    
    
    

    A Blogger Table Caption

    Table Header	Table Header	Table Header
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell

    
    
    

    <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
    <caption>A Blogger Table Caption</caption>
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table>
    

    
    
    
12. Now go ahead and add your data to your new Blogger table. Filling in each instance of "Table Header" and "Table Cell" with your own data. The information you add to the Blogger table can be text, hyperlinks or even an image
    
    
13. Save your changes to the Blogger table by saving and publishing your post
    

Please feel free to use this Blogger table as a template whenever you need to add a table to your Blogspot post. If you want to regularly add a table to your Blogger posts that consistently looks the same you could consider adding the table CSS styling to your Blogger template.

In this Blogger tutorial (Blogspot tutorial) I have demonstrated how to build a complex table in HTML and CSS to insert into a Blogger post. You have learned how to manipulate a variety of table properties and attributes to create a table for Blogger that matches the color scheme of your blog and is functional and appealing.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change the Bullet Point Style in Blogger (Blogspot)
How to Remove Image Border in Blogger Template Simple
How to Change or Delete Image Borders in Blogger Posts
How to Add CSS Styling to Blockquotes in Blogger
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
How to Add or Change a Background Image in a Blogger Template

Add a Comments Counter Button to Blogger Blogspot

In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger (Blogspot) to show off the number of comments each of your posts has received.

A comment counter button (bubble) will have the effect of encouraging visitors to comment on your Blogger blog and also help to highlight the credibility of your articles.


Installing this Blogger hack to add a comment counter button only takes a few minutes. The changes needed to add the comment bubble to Blogger while not difficult do involve adding a small snippet of code to your Blogger template in two places. For this reason I strongly urge you to back up your Blogger template before attempting this blogger hack.

Blogger Tutorial Difficulty - easy to medium

How to Add a Comments Counter Bubble to Blogger
A Step-by-Step Walkthrough
The following steps will insert a fully clickable comments counter button on the same line as the post title in Blogger. The comments counter is right aligned by default.

1. Log in to Blogger and the blog you wish to apply these changes to
   
   
2. Select Design > Edit HTML
   
   
3. Click on Download Full Template to back up your template before you make any changes
   
   
4. Check the Expand Widget Templates box
   
   
5. In the CSS Styling section of your Blogger template and just before the ]]></b:skin>
   
   

   .comments-button {
   width : 48px;
   height : 48px;
   background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUmhykgPQzYoyCAZjjEoekVvPRLEFlZckjiBjm7uUnqEyNkL_vYmJEWuRtiUdxVxHu5yfueWAgp0OzoJO5Fk_gRtPdj7C_yiRUwvz8INx5KFln8faDLHmUMfenXvXqwLyo6s8Kvkwrzj1/s200/comment-counter-bubble.png) no-repeat;
   float : right;
   font-size : 18px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   padding-top:10px;
   }

   
   
6. Now find the following block of code using CTRL key + F
   
   

   <b:includable id='post' var='post'>
   <div class='post hentry uncustomized-post-template'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>

   
   
7. Copy this code block:
   
   

   <b:if cond='data:post.allowComments'>
   <a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>

   
   
8. Insert as follows:
   
   

   <b:includable id='post' var='post'>
   <div class='post hentry uncustomized-post-template'>
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.allowComments'>
   <a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>

   
   
9. Save template and then view blog to admire your new comment counter badge.

Tips and Troubleshooting

1. If you prefer you can replace the button image I have provided with your own image. You can find other buttons easily enough by doing a Google search with a term like "speech button icons".
   
   Upload your button to a hosting service such as Photobucket and change the URL address of the image in the CSS styling section. The following example will render a smaller blue button. Note I have reduced the font size to accommodate the change. You may need to play around with the settings to get the font sizing right for your image.
   
   

   .comments-button {
   width : 48px;
   height : 48px;
   background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FTvQ0d8Y1ZRuA6oWDrhK3LDNW7slb5ZXp7D7gm5VqqvwcpoAyCcGfGGH3bSHdPub_STAB45h6ORrTm_Q9_fFNoeLRbX3TpQuMPJZt9jSLBSGm8FmNtb9q9o3Olh8bWj5XcvVbQ1U-WBa/s200/comment-counter-bubble-2.png) no-repeat;
   float : right;
   font-size : 14px;
   margin-top : -15px;
   margin-right : 2px;
   text-align : center;
   padding-top:10px;
   }

   
   
   
2. If you want your comment counter to be left aligned instead of right you will need to change the CSS styling from float:right; to float:left;
   

In today's Blogger tutorial I have covered how to add a comments counter to a Blogger blog (blogspot blog) that will appear to the right of your blog post title. A comments counter is a way to encourage visitors to comment and is a way of showing off the credibility of your blog posts. Good luck! Any comments about installing this blogger hack are most welcome.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Tips to Add Digg Button to Blogger Blogspot
Add Twitter Followers Counter to Blogger
Add Twitter Badge or Button to Blogger
Add a Social Bookmarking Button to Blogger
Add Social Bookmark Buttons to Blogger

How to Change Bullet Point Style in Blogger (Blogspot) Lists

In Part 1 of this three part series of Blogger tutorials I discuss how to change bullet point styles of lists you may want to include in Blogger posts. This first Blogger tutorial deals with unordered lists and how these can be styled using CSS in Blogger (Blogspot). The second part of these tutorials will deal with ordered lists while part 3 discusses bullet point changes you can make to your sidebar, footer and menus.

Today you will learn how to:

• change the style of bullet points in unordered lists
  
• add bullet points to unordered lists if they are absent
  
• add an image instead of a bullet to lists in your Blogger posts

This tutorial is rated easy and is designed so that even Blogger newbies can make the changes they want to their Blogger template. Changing the bullet point style involves changing the CSS styling in your Blogger template (Blogspot template). Join me as I walk you through this step by step guide.

How to Add Bullet Points to a Blogger Post
If you are still using the old Blogger editor you will need to add bullet points manually to any unordered lists you create in Blogger posts. If you are using the new editor the work is done for you. Either way though this is the type of code that generates unordered lists:

<ul><li>Create your own list markers in Blogger</li>
<li>Create unordered lists in Blogger</li>
<li>Create bullet points in Blogger</li>
</ul>

Any text can be placed between the two <li></li> tags. Simply copy this list into a Blogger post and substitute your text for mine and you will have an unordered list.

Circular Bullet Points
Circular bullets (also known as markers or discs) are displayed in Blogger by default whenever unordered lists appear. This means that whenever the <ul></ul> tags are used in Blogger posts a leader dot or disc will appear before each line of text denoted by <li>. (Note I will discuss ordered lists <ol></ol> tags in part two of this tutorial).

An unordered list in a Blogger post using the <ul></ul> tags would appear like this:

• Change Bullet Point Style in Blogger
  
• Add Bullets to Blogger
  
• Changing the look of unordered lists in Blogger
  

We can make lots of changes to the look of these filled discs or filled circles by changing the CSS styling in Blogger. For instance we can have squares, or we can choose to have no bullet point at all. Here's how.

To Add Square Bullet Points to Blogger (Blogspot)
The following code will replace the filled circle bullet points with squares instead:

1. Login to Blogger if not already logged in
   
   
2. From the Dashboard go to Design >Edit HTML
   
   
3. Back up your template
   
   
4. Find the posts section of your CSS stylesheet which will be before ]]></b:skin> tag
   
   
5. For the following default Blogger templates eg "Simple" add the following CSS code to the post section like this
   
   

   .post ul li {
   list-style: square;
   }

   
   
   
6. Save template and view blog post to see the circular bullet points have been replaced by square ones

To Add Circle Bullet Points to Blogger (Blogspot)
To add unfilled circle list markers or bullet points to Blogger posts do the following:

1. Follow steps 1-4 as per square bullets
   
   
2. Add the following code to the posts section of the CSS stylesheet of your Blogger template by entering the following code:
   
   

   .post ul li {
   list-style: circle;
   }

   
   
   
3. Save the changes to your template and view a blog post to see the empty circle bullet points

How To Indent Bullet Points in Blogger
There are two ways to increase the indentation of list style markers or bullet points.

1. Using the Inside or Outside Element
   The indentation of bullet points can be varied using the "inside" element. By default the list will be "outside" unless the "inside element" is used. The following code shifts the indentation of the list further to the right.
   
   

   .post ul li {
   list-style: circle inside;
   }

   
   
   
   
2. Custom Indentation CSS Styling
   It is also possible to add custom indentation styling to lists. For instance here I have added a 2.5em indent using the following code to the circles example:
   
   

   .post ul li {
   list-style: circle;
   margin-left: 2.5em;
   }

   
   

How To Replace Bullet Points with an Image in Blogger (Blogspot)
Sometimes you may prefer to have an image list marker or icon instead of a bullet point. You will need to host your image somewhere such as a free image hosting service eg Flickr or Photo Bucket. Follow the steps below to replace bullet points in your Blogger posts with an image

1. Follow steps 1-4 as per square bullets
   
   
2. In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:
   
   

   .post ul li {
   list-style: url("http://URLaddressofImage.gif");
   }

   
   
   
3. Replace URLaddressofImage with the URL address of the image you have uploaded to an image hosting service. Note in most cases the file will have a .gif extension. If the extension is anything other than .gif you will need to change this too.
   
   
   
4. Save the changes to your Blogger template and navigate to a post page to see your image list marker installed

How to Remove the Bullet Points from Blogger Posts
If you are going for a minimalist look you may prefer to have no bullet points in the lists in your Blogger posts. In this case:

1. Follow steps 1-4 as per square bullets
   
   
2. In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:
   
   

   .post ul li {
   list-style: none;
   }

   
   

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add CSS Styling to Blockquotes in Blogger
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
How to Add or Change a Background Image in a Blogger Template

Remove Image Border in Default Blogger Templates Simple and Awesome Inc

In this Blogger tutorial I show you how to remove the border around images in Blogger posts (Blogspot posts) when using one of the latest default Blogger templates Simple or Awesome Inc.

If you are using an older generation Blogger template or a custom template the solutions contained in this article may work for you however it is more likely that you will need to follow the methods to remove image borders outlined in my previous Blogger tutorial Change or Remove Blogger Image Borders (Part 1)

Below I explore two methods of removing or deleting image borders in the Blogger template Simple. The first method shows you how to remove the image border using Template Designer and the second method outlined describes how to remove the image border manually by changing the code.


Method 1 - Use Template Designer to Remove Image Border in Blogger

1. From the Blogger Dashboard go to Design > Template Designer
   
2. Then select Advanced > Images
   
3. Under Border Color use the drop down arrow to open the color palette
   
4. Change the setting to transparent by checking the small box on the bottom right hand side marked "transparent"
   
   
   Note: If you are using the black version of the Awesome Inc template you will need to change the Background Color to transparent too. Click on the down arrow of the color palette and select transparent.
   
   
5. Click Apply to Blog to save your changes to the template
   
6. Navigate to any post page to view images in posts without the border

Method 2 - Change Template Code to Manually Remove Image Border from the New Default Blogger Templates

1. From the Blogger Dashboard go to Design > Edit HTML
   
2. Back up your Blogger template
   
3. Find this line amongst the declared variables at the top of your template
   
   

   <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="#cccccc"/>

4. Change to the value of the border color to transparent like so
   
   

   <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>

5. Save your changes to the template
   
6. Navigate to any post page that has an image and see that the border around the image is no longer visible

In this Blogger tutorial (Blogspot tutorial) I have shown you how to remove or delete the border around images in Blogger posts for the newest generation of default Blogger templates Simple and Awesome Inc. I have discussed two different methods to remove the border around the images either by adjusting the settings in the Blogger Template Designer or by manually changing the code of the variable in the CSS styling section of the default Blogger template


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change or Remove Blogger Image Borders (Part 1)
How to Change the Blog Title Border in Blogger Minima Template
How to Add CSS Styling to Blockquotes in Blogger
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template
How to Remove the Link from a Single Image in a Blogger Post