Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jun 13, 2007

Digg This Story

Post Footer – Customize Template (I)

In this tutorial, we discuss the various ways you can customize the Post Footer and change the Blogger template. The steps will cover how to change the “Posted by author”, “Comments”, “Labels” links in the Post Footer, replacing them with other names or pictures.

This is how a typical Post Footer looks like. It includes the author's name, time of the post, number of comments, number of backlinks, icon for readers to email the post, icon for you to edit your post, as well as Labels.

Post Footer – Customize Templat

Update:

If you are looking to change the text, alter some settings or re-arrange the positions of the Post Footer elements,you can go to Template -> Page Elements and click the “Edit” link on the Blog Posts widget. You will see a screen like this:-

Post Footer – Customize Template

You can read our Arrange and Customize Blog Posts Elements article to learn a little about these options. Even though this is a simple way to make minor adjustments, you will not be able to insert pictures, signatures, change the author's name, etc. To do these other things to the Post Footer, you may want to read the rest of our guides here and customize your Footer.

Before we proceed to alter the template, remember to backup the existing template. Go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

Post Footer – Customize Template

Posted by author

1. Change author's name

The name of the author is the name shown in your Blogger Profile. Should you want to keep this name, but assign a pen name or nickname to your postings, go to Template -> Edit HTML and click the “Expand Widget Templates” box.

Post Footer – Customize Template

Scroll to where you see these lines. For most browsers, you can press Control-F to search for this phrase “data:post.author

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>


Replace the part of the code (shown in red) with whatever name you want to call yourself. This is what you will see in your Post Footer:-

Post Footer – Customize Template

2. Remove “Posted by”

What if you do not even want the words “Posted by”? Well, you will have to delete both the codes (shown in blue and in red). Replace them with the words you want to display. The result is this:-

Post Footer – Customize Template

3. “Posted by” below Post title

Some blogs have the “Posted by author” just beneath the Post Title. If you want to do that, cut the entire code in the template and paste it below this line:-

<div class='post-header-line-1'/>

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>


This is what you will get:-

Post Footer – Customize Template

4. Image instead of Name

You can also place an image instead of having a name. However, this image should be small. Crop or resize the image using photo editing tools. There are free ones like Google's Picasa which you can use. Upload the image onto 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 Image URL.

In the above codes, instead of replacing the blue and/or red parts with a name, insert this code instead:-

<a href="URL of your Blog"><img src="Image URL" /></a>


Remember to key in the URL of your Blog as well as the Image URL. This gives you an image link so that when people click the picture, they will be brought to your Blog's main page. If you do not want a link, you only need to insert this code:-

<img src="Image URL" />


The final code will look like this:-

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<a href="URL of your Blog"><img src="Image URL" /></a>
</b:if>
</span>


5. Image AND Name

Let us now combine the above to have BOTH your image and name in the Footer. For example, you may want to have something like this:-

Post Footer – Customize Template

The code will be changed to this. Change the text. The image code can be either before or after the text.

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
Author<img src="Image URL"/>
</b:if>
</span>


Timestamp

If you do not want the time stamp at all, scroll down the template and delete these lines:-

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>


This article continues at Post Footer – Customize Template (II).

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

19 comments:

Janey Loree said...

Good Morning BizWhiz! I love your hands on approach in each of your posts. I would like to add a link to TFNB in all of my blogs.

Do you have a post about changing the user name for a blogger.com blog? I have a friend that has moved out of state and therefore has a new email address and would like to use it as the user name.

BTW...TFNB's is mentioned in the new BLOG VILLAGE Featured Blogger interview!

bizwhiz said...

Hi Janey

Morning and thanks for all the wonderful support.

While the Display name can be changed to a pen name, nickname or pseudonym by editing the User Profile, it seems that there is no way to change the User name (i.e. login name).

A solution may be for your friend to include the other email address as a team member so that posts could be sent from that email address. This does not change the User name but it seems to be the only way I could think of.

Janey Loree said...

You are most welcome BizWhiz! Thanks for the user name info.

Anonymous said...

Your blog is wonderful and so helpful! do you know how can I add an icon in my post title? I'd like to have the same icon for every single title..is it possible? thanks

bizwhiz said...

Hi Anonymous

You referring to something like the title you see in this Blog? You can insert a picture as follows:-

.post h3 {
background:url("Image URL") no-repeat;

We'll probably do up an article on this and discuss the changes to the margin and padding settings as well.

Arsenal For Arsenal Fans said...

Would you like to exchange links with me?

netbobz said...

Hi Bizwiz!

I would like to know how to post a customized message after every post, just like you have this message -'Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!' Please check out my site http://why-corner.blogspot.com . I want this message before the social bookmarks and even before Digg.

Thanks

bizwhiz said...

Hi netbobz

I have addressed that in Pre-formatted text in Blog Posts. While I have shown you the way to insert the text, I noticed that the text you intend to put into your Blog is a duplicate of what I have in this site. Trust that you are aware of copyright laws when displaying contents in your site.

As for your other query, alignment is a question of playing with the margin and padding settings. Every template is different and there is no way we can ascertain exactly how many pixels you should add or subtract in your settings. You may have to use a trial and error method, change some figures and preview the Blog to see if the elements are aligned.

netbobz said...

Hi Bizwiz!

I'm sorry, that you got me wrong! I deliberately mentioned that line of yours to make you understand, where (the position or the place) I want to put my customized text. Got it! Go through my comment again, I guess you'll understand this time. If you see my last post, you could see the text I intend to put in (it's there at the end of the post). Sorry once again that u got me wrong! :(

bizwhiz said...

No problem netbobz. Glad that you've got the solution you are looking for.

DendyD said...

Good nite bizwhiz!
I'm from Indonesia, so I wanna sorry if my english is bad. Thanks for your tips in this blog. I'm newbie and I think this blog is very very helpful.
Once again,.. Thanks!

OCD said...

Hi BizWhiz,

Just wondering if you could explain how to edit the footer to show an author's picture when using the classic templates?

I have a team blog and would like for the author's picture to be shown instead of their name.

Thanks for your help!

www.westernwindbags.com

Is said...

In your next tutorial, oould u plz show us on how to have an IP add of commentors under post-comment section?

TQ

Wesley Moore said...

I'd like to put an Add This button on the bottom of my posts, but the HTML for the template I'm using doesn't appear to contain the post-footer tag. I've experimented and nothing has worked. Any help would be greatly appreciated : )

KahYong said...

thanks for the tips, its really useful!

but i have a question..

how do i move the comments and label link to one line below the image(i replaced the name with image)..

thanks

Aurie Catt said...

Hi!
I know you posted this a while back...but I have been looking for this info for weeks! And no one explained it as good as you...or had the right info.
...so...
Thanks so much ;)

José Oliveira said...

Hello.
Your tips are excellent and very well presented.
I’ve tried to put the author’s name on top, beneath the post title, but with the code you provided or just cutting and pasting the one in the template the result is the author’s name with the text format of the posts.
I’ve corrected that adding costumized code.
However, I can’t correct the position of the author’s name, since it is somewhat distanced from the post title. Although in Portuguese, you can see that in my blog . Any thoughts on that?
Thanks for these wonderful tips.

Ms Hetal Patil said...

Hello,
I would like to know what can we do if there are two authors to change the pen name of both of them. my mail id is hetalpatil@saimail.com

S.T. said...

Hey Bizwhiz, Happy New Year!

Great blog. Really helpful. But I have a problem. I am using the revoultion code grey template (converted for blogger templates), and I cant seem to find these codes in my template. Yet, the "Posted by", post date and time, and author still show up under the post title. I also tried unchecking the boxes on edit blog posts section of the page elements page. But none of it works. I dont know if my template is in a different format? or maybe its something else?

Thanks,
S.T.