How To Change The Blogger Blog Post Footer

B efore we continuing discuss about How To Customize The Blogger Blog Post Footer, Let,s look at this picture bellow for the description...

1. Change The "AUTHOR" Text
Actually, this AUTHOR'S name is the name that shown on our blogger profile. To change this name then followed this steps.
Log in to Blogger, in Your Dashboard select your blog (if you have more then one) >> Layout >> Edit HTML and click Expand Widget Templates box. Then find this words data:post.author

<div class='post-footer'>
  
      <div 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>      
        <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>

A. To change your author's name, just replace the <data:post.author/> with whatever name you like.. This is mine when I change Mc4tur (before) with Admin.

Note: We can "decorate" our name with HTML code, I make it bold by adding Tex

B. To change the POSTED BY phrase, replace the <data:top.authorLabel/> with yours. This is mine when I change it into WRITTEN BY

 Note: We can decorate this with HTML Code too..


2. Change The "AUTHOR" Text With An Image
Because this tricks are about "knowing the posistion" of the AUTHOR, and we also know that we can "decorate" it with HTML Code. Instead of Text, we can replace it with our Image, or even combined them.

To do this tricks, of course we must have an Image (small signature will be better) first. Let's just say that we already have the image that we store in a host sever. Please remember the URL of your image.

Note: You can learn how to have free web storage in Using Google Groups and Google Sites as A Web Storage Space and how to use it in Create a Rainbow Colored Link

A. To change the Author text with your Image and blog link, just replace <data:top.authorLabel/> <data:post.author/> with this script.. 

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

If you don't want to insert your blog link, then just deleted it and only insert <img src="Your Image URL" /></a> Then the final script will be like this:

<div class='post-footer'>
  
      <div class='post-footer-line post-footer-line-1'>
       <span class='post-author'>
          <b:if cond='data:top.showAuthor'>
            <a href="Your Blog URL"><img src="Your Image    URL" /></a> 
          </b:if>
        </span>      
        <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. To combined with the text, choose which one will be replaced by the image. <data:top.authorLabel/> or <data:post.author/> . Usually we replace our name with Image. We can also combine with Text Replace (1B.)  either, to make WRITTEN BY "IMAGE NAME".