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.

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>

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