Many bloggers would like to customize their Blog Posts so that they appear differently in their blogs. Some would like to have the "Posted By" message to appear below the post title, others do not want "Showing __ posts" message to appear on clicking one of the labels. To customize the Blog Posts it is essential to understand its code and how we can modify it............
Some of the Blog Posts settings can be modified through the WYSIWYG (Graphical) interface provided by Blogger on the Page Elements subtsb of Template tab. To access this login to dashboard and click on Layouts. Then click on Edit link in Blog Posts section and follow the instructions in How to Add Widgets to your Blog.
The Blog Posts Widget Code
The following code is taken from the Minima Layout. I will show the code first and then discuss what it does and how it can be modified. Then I will show with a picture what the code does. To see this code login to your Dashboard and click on Layouts next to your blog name. then click on edit Html subtab of Template tab. Put a check in expand Widgets Template box at the top and scroll down till you come to the Blog Posts widget code in the main section of the Main-wrapper.
The first two lines of the Blog Posts widget are :
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
In the first line 'locked=true' means you cannot delete the Blog Posts widget through the Page Elements tab. If you change this to locked='false' you will be able to remove this widget through the Page Elements tab but then you will not be able to add posts to the blog. The second line is common to all widgets. Widget content is contained in "includable" sections. Each widget must have one includable with id='main'. This will usually contain most or all of the content that will display for this widget.
The next three lines are :
<!-- posts -->
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
This denotes the start of the blog posts and the first include is the status message. The include is used wherever you want to execute the code within the main includable. The code for this is inside another includable with a different id from main further down in this same widget. So we see that the main includable contains other includables with codes. These codes are executed wherever you want in the main includable using includes. The status message appears at the top of your posts when you click on a label. This is what it looks like when you click on a label with no posts :
If you do not like it just delete the line of code with 'status message' in it.
The next lines of code are about the date :
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
The first four lines display the date if you have checked the date box in the Blog Posts - Edit tab on page Elements. After the date comes the post include. The detailed code for the posts is put in a posts includable described further down.
The next two lines are instructions to display the comments on individual post pages. The comments are not displayed on the main page because the continuity of posts will be broken and also it will become too long and slow to load. Notice that the blog posts class is closed in the last line.
NAVIGATION LINKS
The next code displays the navigation links : Previous posts, Next Post and Home link below each post on main and post pages.
<!-- navigation -->
<b:include name='nextprev'/>
Again notice that include is used to execute the code which actually is in an includable further down. If you want to delete them you can delete the above lines. To modify them you have to modify the includable code further down. This is how they look below yourposts :
FEED LINKS
The next code shows the feed links and closes the main includable.
<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>
The feed link displays : "Subscribe to: Posts (Atom)" below the navigation links on the main and posts pages. See What is Subscribe to Posts Atom for more information.
This is the end of the Blog Posts display. The rest of the Blog Posts widget code consist of the includables containing detailed code for the includes within the main includable.
This is the next code in the Blog Posts widget. This code can be modified if you wish to change the appearance of your navigation links. See Making Image Links.
THE POSTS INCLUDABLE
This describes the detailed posts execution. It starts off with the post id :
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
Then continues with the post title :
<b:if cond='data:post.title'>
<h3 class='post-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>
This is the code used to execute Permalinks in post titles.
Then comes the code for the post body :
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
After this is the POST FOOTER LINE 1.
<div class='post-footer'>
<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>
<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: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>
<!-- 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>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</p>
The post Footer Line 1 contains detailed code for Post Author, Post Timestamp, Post Comment Link, Backlinks, Post Email Icons and Quickedit Pencil.
THE LABELS CODE IN THE POST FOOTER
The next block of code executes the labels in the Post Footer Line 2 :
<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>
</span>
</p>
<p class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>
This block of code ends with a provision to add more post footer items under Post Footer Line 3. The posts includable ends here.
THE POST QUICKEDIT INCLUDABLE
This block of code describes the QuickEdit for the posts :
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
See the diagram below for a better understanding of how the include and includables are connected.
The next includables are the commentDeleteIcon, backlinkDeleteIcon, comments, backlinks, feedLinks and feedLinksBody which I will describe in a later post.
