Customize metadata of your Blogger posts.

One of the areas most characteristic of a template design, is one in which detailed information on the author, labels and the link to post comments on the blog posts. Often, there is usually very into account when it comes to customize the layout of the page, however, this is one of those little details that make the difference between excellence and mediocrity.

Before we begin with instructions to modify the format, position or appearance of this section is necessary briefly the various parties are divided on which each of the posts published on Blogger. If you walk into your HTML editing pane and active box "Expand templates widgets," to fall by the code blog can be found with a label div class "post", which includes the identification and the title of the inning.

A few lines below, you'll see a label with the class' post-header-line-1 ". As can be inferred by its name, this part of the post is situated just below the title and before the body of the post. In some templates, often contains a link to the comments or information about the author of the inning.

If you continue exploring the code will find the label "post-body", which refers to the body of the post or the text of the inning, and the label "post-footer", which detailed data located at the foot of page on the labels of post or link to send the entry via e-mail (if it is turned). In turn, the post-footer is divided into several subsections bounded by paragraph <p> labels, which are assigned classes "post-footer-line-1", "post-footer-line-2" and "Post-footer-line-3".

Blogger gives their user the ability to edit these types of options in the section of page elements across the bloc of blog posts. When editing this section can customize, activate and replace some options as the date format or text you want to add the link in comments, authors or labels. However, if you want to alter the position of the various blocks, you must also do so through the Template HTML, moving each code of "post-footer-line-1, 2 or 3" to "post - header-line-1 " or viceversa.

Then you can identify the code of each of the elements outlined in the previous image.

Date principal.

In another post you can see how to optimize the date format of your main posts on Blogger and add a background image.

Author.

<span class=’post-author vcard’>
<b:if cond=’data:top.showAuthor’>
<span class=’fn’><data:post.author/></span>
</b:if>
</span>

Date secondary.

Also used to signal when it was published in the post.

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

Liaison comments.

<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 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</b:if>
</span>
<!– backlinks –>
<span class=’post-backlinks post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.showBacklinks’>
<a class=’comment-link’ expr:href=’data:post.url + “#links”‘><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

Tags.

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

Recognized each of the blocks of code-related item, you can modify its location and transported from one area to another post by editing blog posts in the section editing page elements. Later, you'll need to find the relevant code block, cut and paste it into the "post-header-line-1", or the place where you want to display.

Last, you must bear in mind that sometimes the "post-header-line-1", bounded by the labels <div>, is closed as follows if it does not contain any of these components:

<div class="post-header-line-1"/>
Instead of……
<div class="post-header-line-1"> </ DIV>

In that case, you would open it and include the code, so that you would be as follows:

<div class=”post-header-line-1″>

------Code Element ------

</div>

Source : zonacerebral