How to Customize Featured Post With Thumbnail in Blogger

Including Featured Post option in Blogger makes blogging more professional and practical. As a result we can keep sticky or pinned post to promote specific post with headline, thumbnail, post URL like Wordpress or others platform.
By default the layout and design isn’t so popular to all. We need to customize featured post and this tutorial will help you to do in minute.

To customize your featured post follow the below steps.

Step-1: Create a new section

It would be better to create new section to add Featured Post widget. Then trying to customize would better result. So first create a new section (Recommend: Before main section). Here is the tutorial how to create new section in Blogger template.

Step-2: Add Featured Post Widget

If you have already added Featured Post, then delete this.

Now add the following code within new created section.

<b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1'>
  <b:includable id='main'>
    <!-- Only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:include name='content'/>
    <b:include name='quickedit'/>
  </b:includable>

  <b:includable id='content'>
  <div class='feature-post-summary'>
    <b:if cond='data:showPostTitle and data:postTitle != ""'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    
    <b:if cond='data:showFirstImage and data:postFirstImage != ""'>
      <a expr:href='data:postUrl'><img class='feature_image' expr:src='data:postFirstImage'/></a>
    </b:if>
    <b:if cond='data:showSnippet and data:postSummary != ""'>
      <p>
        <data:postSummary/><br/>
        <span class='feature_readmore' style='text-align:center;'><a expr:href='data:postUrl'>Continue Reading</a>
        </span>
      </p>
    </b:if>
  </div>
  </b:includable>
</b:widget>

Step-3: Customize With CSS

Put the following CSS code just before ]]></b:skin>

 /************Featured Post CSS************/
    .feature_image {}
    .feature-post-summary{}
    .feature-post-summary h3{}
    .feature_readmore{}
    .feature_readmore a{}
    .feature_readmore a:hover{}
    .FeaturedPost1 p{}

And customize with your own choice.

Step-4: Add Specific Post to Feature

Go to Blogger Dashboard → Layout → Edit FeaturedPost1. Select specific post and save.

Recommended: 
Collection of Blogger customization techniques.
Effective SEO tips for Blogger.

Have got this article helpful or not working? Put your comment below.