Tutorial Blog

Should you wish to use an image as a background to your Header (just like the one you see above or this colorful one), get an appropriate image and crop it to size, about 660×150 pixels. A photo editing software like Google’s Photo Editing Software Picasa or Photoshop would do the trick.

After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.

Next, go back to “Edit HTML” under Template tab. Scroll to where these lines appear:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;

You want open link in new window or tabs. The links in a Link List and Labels that are normally in the sidebar widget. You would need to change the HTML code in your template. Here, we shall talk about the hack that you can put into your template.

Text Links and Image Links

You change code HTML as follows:

<a href=”URL” target=”_blank” title=”TITLE”>Text</a>

The HTML code of a picture or image link looks like this:

<a href=”URL” target=”_blank” title=”TITLE”><img src=”Image URL” border=”0″ width=”80″ height=”15″ alt=”Description”></a>

The part of the code that tells the browser to open the link in a new browser window or new tab is the target attribute (in blue). If you want the readers to view the link in the same browser window, simply remove target=”_blank” from the code.

We continue from where we left off in Post Footer – Customize Template (I). In the first part, we went through how you can change and customize the appearance of the “Posted by author” link and replace it with another name or picture. You could also remove the timestamp if you want. In this part, we continue with customization of the “Comments”, “Labels” and other icons shown in the Blogger Post Footer.

Comments

1. Settings

If you simply want to enable or disable Comments, login into your Dashboard and under Settings -> Comments, you will see the options for “Comments”. You can either “Show” or “Hide”. You can choose “Hide” so as not to show the Comment link, without deleting existing comments.

2. Change the word “Comments”

Should you want to retain the Comment link but change the word “Comments” to something else, scroll to this part of the template:

<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/> <b:else/><data:post.numComments/> <data:top.commentLabelPlural/> </b:if></a>
</b:if>
</b:if>
</span>