Rearranging post footer elements (Blogger)

Today I'm gonna teach you how to rearrange your post footer element such as—Labels, author .It is intimate if you are able to make reader read Label or post-date information comfortably.Thus helpful to make money online.


How to do it?
As usual, go to Layout > Edit HTML —— click on expand widget templates
search for <div class="post-footer"> and you'll see something like that

<div class="post-footer">
<div 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></data:post.author></span>
</data:top.authorlabel></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" href="data:post.url" rel="bookmark" title="permanent link"><abbr class="published" title="data:post.timestampISO8601"><data:post.timestamp></data:post.timestamp></abbr>
</b:if>
</data:top.timestamplabel></b:if>
</span>

<span class="reaction-buttons">
<b:if cond="data:top.showReactions">


<table border="0" cellpadding="0" cellspacing="0" width="100%">            <td class="reactions-label-cell" nowrap="nowrap" valign="top" width="1%">
  <span class="reactions-label">
  <data:top.reactionslabel></data:top.reactionslabel></span> </td>            <td><iframe allowtransparency="true" class="reactions-iframe" src="data:post.reactionsUrl" frameborder="0" name="reactions" scrolling="no"></iframe></td></tr></tbody></table></b:if></span></div></div>

span class='post-author vcard' - Posted By
span class='post-timestamp' - Timestamp
span class='post-labels' - Labels
span class='post-comment-link' - Comment link
span class='post-backlinks - Links to this post
span class='post-icons' - Email this post icon and Quickedit icon
span class='reaction-buttons' - Reactions
span class='star-ratings' - Star ratings
span class='post-location' - Post location

You may find most of them by click the “Edit” link for the Blog Posts page element
Note: you might see that some option are not available, just go to draft.blogger.com and click the “Edit” link for the Blog Posts page element then all of them will show up.

So, how to moving or rearrange it? Just cut the whole span class ( from <span> to </span>) and paste it to the place you want.

*I assume that you know how to find the correct place by repeating cut and paste*
In my case, I want it to be in post-header section. What I'm gonna do it to paste it below my title tag. However to edit your label text-font and etc you need to specified a class. We currently have no post-header class defined.Therefore you have to add it:

.post-header {
margin: 0 0 10px 0;
color:#000000;
text-transform:uppercase;
letter-spacing:0px;
font-family:arial;
font-size:10px;
}

Now you have to paste your code similar to this way —— For each new line in post-header, you have to wrap the <span> with <div class='post-header'> and </div>.

<div class='post-header'>
<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'></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if></span>
</div>

Lastly and not to forget, edit your relative css in order to fit your taste.


Thanks for reading, enjoy designing your blog!

Reference article:http://www.blogbulk.com/2009/02/moving-elements-in-post-footer-labels.html