How To Move Your Post Signature Under Your Post Title

By default, all of your Blogger posts will have your post signature ("Posted by YOUR NAME HERE") appear at the foot of your post immediately before the timestamp and the comments link. You can see an example of this at the bottom of the posts on JDJ Gourmet. However, because I always like to have an ad at the foot of my posts (click here to learn how), I'd rather not have my post signature there, too. Why? Because the post signature can divert the reader's view away from the ad and toward my signature. Basically, I like to get rid of as much as I can down there so my readers will more easily focus on the ads. So, I typically move my post signature underneath the post titles on my blogs. You can see an example on Reagan's Brigade by looking immediately under the post titles. If you put ads at the foot of your posts, you will probably want to move your post signature, too. Or, you may want to move your post signature under the post title just to make your blog look a bit more spiffy. Either way, I will show you how to do it.

First, after you've logged into your Blogger account, select the blog you want to work on and then click on "Layout". After doing so you will be brought to the "Page Elements" page. From there, click the "Edit HTML" tab. Next, download a backup copy of your template in case something goes wrong while you are working with the code. Then, check the "Expand Widget Templates" box. Now you are ready to begin.

(In the following example the code in GREEN will be existing code, code in PURPLE you will need to copy and then paste later.)

Scroll down and find this section of code:

<data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>

<p class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</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' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

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

Now, highlight and copy the code you see in PURPLE above, and then delete it from your template. Then, find this section of code:

<data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<PASTE YOUR COPIED CODE HERE>

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

<div class='post-body entry-content'>
<p>

Where you see <PASTE YOUR COPIED CODE HERE> you should paste the code you copied from your template earlier. After you have pasted the code, simply click "Save Template" and you are done. Enjoy!