Monday, May 1, 2017

How to Customize Featured Post With Thumbnail in Blogger

Last Update:

Recommended Cloud & Hosting: Cloudways, Hostinger & BlueHost
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.

About me


Elliyas Ahmed
Elliyas Ahmed

Hi, I am Elliyas Ahmed, the founder of ComProMath. I try to share what I learn.

Work With Me - SEO Expert, WordPress, Blogger Theme Developer on Fiverr

Lets Disucss on this Article

Don't try SPAMMING here! Submit your Feedback, Questions or Comment related to this Article. Read our Comment Policy.

No comments:

Submit your COMMENT here