Google Bloger: How to Customize the Post Footer

The Post Footer contains many elements like the Posted by line, the timestamp, the labels, comments, backlinks and others which you can customize to your blog.

The primary customization can be made by going to Template >> Page Elements >> Click the Edit link in Blog Posts section >> In popup window choose which items you would like to appear in the post footer by putting a check on their names. See picture below (Click on picture to enlarge it)

CHANGE NAME OF AUTHOR

To change the name of the author you can go to Dashboard >> Edit Profile >> dentity  >> Display Name >> Change Name and Save. However if you want to show different names under the posts you can change it in the template. To do this go to Template >> Edit Html >> First backup template using Download Full Template link given on this page.>>Then put a check in Expand Widgets Template text box and scroll down to locate this code in the Blog Posts widget :

<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> 

Delete <data:post.author/> in the fourth line and substitute your nickname. Preview and Save Template.

INSERT AUTHOR PICTURE IN POSTED BY LINE

Delete the same piece of code in the above example and insert this line :

<a href="URL OF BLOG"><img src="URL OF YOUR PICTURE" /></a> 

Preview and save template.

APPEARANCE OF LABELS

To change the appearance of your labels go to Template >> Edit Html  >> First backup template >> Add this code between <b:skin>![CDATA[ and </b:skin> tags in your template :

.Label {
color:#b4h6td;
background:#afafaf;
xxxxxxxxxxxxxx
}

Add other properties instead of line xxxxxxxxxx just as you do in normal CSS. The CSS in old blogger and the new blogger is the same except that it is enclosed in b:skin tags in case of the latter. Preview and save template.

CHANGE THE NAME "LABELS" BELOW YOUR POST

The Labels are indicated below your posts starting with the term "LABELS". If you wish to change this name to something else like "CATEGORIES" locate this piece of code by going to Template >> Edit Html >> Put Checkin Expand Widget Templates check box and >> Scroll down in Edit Template text box till you come to :

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if> 

Delete the line in red in above code and replace with whatever name you want like CATEGORIES for instance.

REPLACE THE NAME "LABELS" BELOW YOUR POST WITH AN IMAGE

First upload your image to a free host like Googlepages and obtain its URL/link. Then locate the code line in red in above code where it was replaced with the word CATEGORIES. Replace that line with this code:

<img src="URL OF IMAGE AT FREE HOST" alt="BLOG TITLE" />

Preview and Save.

CHANGE OLDER POSTS AND NEWER POSTS TEXT

To change the wording of these links go to Template >> Edit Html >> Backup your Template >> Put check in Expand Widgets Template box >> Scroll down in Edit Template text box till you come to this code :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

CHANGE THIS CODE TO :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data: widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>OPEN NEXT POST</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>OPEN PREVIOUS POST</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'
expr:href='data: blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Preview and save

You can also add a forward arrow image and a backward arrow image by adding this code in the same place above

<a href="URL OF BLOG"><img src="URL OF YOUR ARROW PICTURE" /></a> 

For full details see http://betabloggerfordummies.blogspot.com Making Image Links.

DELETE THE OLDER POSTS AND NEWER POSTS LINK

To completely delete the Older Posts and Newer Posts links locate this line of code in the Blog Posts widget after putting a check in the Expand Widgets Template check-box :

<!-- navigation -->
<b:include name='nextprev'/>

Delete this code. Preview and Save.

ADD SUBSCRIBE TO COMMENTS (ATOM)

Below your posts is the link to subscribe to posts Atom feed. You can add a
Subscribe to: Post Comments (Atom) link. To do this go to Template >> Edit Html >> Put a check in box for Expand Widgets Templates and scroll down till you come to this code in the Blog widgets section :

<!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
xxxxxxxxxxxxxxxxxx
</div> 

Add below code at line xxxxxxxxxxxx in above :

<a href='http://YOURBLOGNAME.blogspot.com/feeds/comments/TYPE'>Subscribe to: Post Comments (Atom)</a> 

Change TYPE to summary or full and put actual blogname instead of YOURBLOGNAME. Save Template and you will see the link on individual post pages at the bottom.

CHANGE SUBSCRIBE TO POSTS (ATOM)

To change the line Subscribe to Posts (Atom) locate this code in the Blog Posts widget after putting a check in the Expand Widgets Template check-box :

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/>(<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

CHANGE THIS TO :

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> MY FEED LINKS</a>
</b:loop>
</div>
</b:includable>

Change MY FEED LINKS to whatever you want. Preview and save.

POSTED BY LINE BELOW POST TITLE

A blog reader wants to put the posted by line, usually found at the bottom of the post, above just under the Title of the post. To do this go to Template >> Edit Html  >> First Backup Template. Then put a check in Expand Widgets Template check box and scroll down till you see this code in the post footer :

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

CUT the code and paste it in the same blog widget below this line :

<div class='post-body'>

Save and view blog.

Read more: http://www.blogdoctor.me/2007/01/customize-post-footer.html#ixzz4xXeozxF5
Resource: http://www.blogdoctor.me/2007/01/customize-post-footer.html