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

how to customize feature post on blogger
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.
Elliyas A.
I am Elliyas Ahmed, Founder of COMPROMATH. Follow me @CSElliyas in Twitter, Facebook, Instagram, LinkedIn.

3 Comments

Announce for Comments: Don't put spam message. We check each comment before publishing.
We allows Videos, Images, GIF in comment.
For Video - Use any YouTube Video link. Example: https://youtu.be/wG8gYDWj-mg
For Image - Use image source link that contains .jpg, jpeg, .png, jpeg, .gif . Example: https://i.imgur.com/7LFytQc.jpeg