// -->

Customizing A Blog Post Widget In A Custom Blogger Template

Customizing the Blog Post Widget

  The blog post widget can be customized to show just the post's title, image, and summary in the Blogger html editor.  Styling the blog post widget to show just a snippet of each post has several benefits.  This can help to make the mobile design friendlier to readers, allows the reader to see many of the posts at the same time to try to capture more of their interest, and prevents the reader from sticking to the blog homepage to provide the author with valuable data on how long a visitor stays on the post page.


  To customize the way posts are shown on the homepage of the blog, use the jump to widget menu option to jump to the Blog1 widget in Bloger's html editor.  Just a little bit down the blog post gadget code, find the div tag with the class of "outer-post" located in the first b:include section of the blog widget. Edit the code to look like the code in the example below. The b:if conditional declaration tells the parsing engine to check to see if the current page is not classified or id'd as an item page. If it's not an item it will place the post title in a heading level 3 tag, the image for the post, the post summary, and a read more link. Then it tells the parsing engine that if the page is an item to put the title in a heading level 1 tag and show the post body.

<div class='post-outer'>

<!--Check if Current Page Is A Post-->

<div class='post-snippet'>

  <b:if cond='data:blog.pageType != &quot;item&quot;'>

<img class='image' expr:source='data:post.thumbnailUrl'/>

<h3><a expr:href='data:post.url'><data:post.title/></a></h3>

<data:post.snippet/>

<a expr:href='data:post.url'>Read more>></a>

</b:if>

</div>

<!--Current Page Is A Post Settings-->

  <b:if cond='data:blog.pageType == &quot;item&quot;'>

<h1>><data:post.title/></h1>

<data:post.body/>

<style type='text/css'>

.image {
 width: 25%;
 }

</style>

</b:if>

  <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>


</div>

  The b:include conditional tag is already in the current blog post widget declarations, and must be included before the end of the div section classed as 'post-outer' so that the comment section will show on the post page. The CSS styling placed before the end of the b:if condition is to tell the parsing engine what size to make the image and should probably be placed in the head of the html document for better style organization.

 With the posts now showing the title as a heading level 3 on the homepage of the blog with an image from the post above it, and the the summary below the title, it's ready to style..

  Set CSS styles to the div section class selectors in the head of the document to make the summary appear to the right side of the image by using the following code in the example below. Place styles in the head of the html document, inside the b:skin CDATA tag.

<style>
    .post-snippet {
 	 display: block;
	 position: relative;
}
    .image {
	 display:inherit;
	 position: relative;
	 float: left;
  	 width: 25%;
	 margin-right: 15px;
}
<style>

  It is easier to set how many posts the blog post gadget shows on the main page, by using the Blogger Layout editor and customizing the number of posts there. It is also easier to edit other settings that the layout editor for the blog post gadget has, such as showing the date header, author, publish time, comment count, labels, share buttons, ads, author profile, and display of all those items there as well.
Current rating:

Rate It!
Current rating:

Up Vote It!

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)