How to customized blogger featured post

How to customized blogger featured post

    On How to customize featured post with thumbnail  this has become a huge problem for many in the blogger industry.
    It has gotten worsted to an extend that some even go as far to pay web designer or developers for the great services, while some try as much as possible to seek step by step guilds on how to implement blogger featured post  via Google search or YouTubetrending videos

    By default blogger featured post is designed to show I’m a particular way on blogger templates.

    Base on our research we have Come to realized that a lot of blogger out there find it very difficult to navigation in finding, Way to solve this issue about how to add featured post on blogger blogspot .

    And because of this we have decided to post this article in other to school blogger who find it difficult to find a way to add this great features to their blogger blogspot templates.

    Below are step ways  on how to add featured post to your blogger blogspot template

    Step 1 : How to open a new layout

    It is more effective when is been applied bon a new widget  layout but if you have the featured post already on your websites ,then fine , no problem, follow the step below to get started.

    How to open a new layout? CLICK HERE

    How to customized blogger featured post

    Step 2 : How to add featured post widget

    Add the following code  below to the new layout you have created


    <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 : how to customize with CSS

    Insect the following html CSS  code just before ]]></b:skin> on your template html

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

    After adding the source code above you can  up your style of  design that fut your description

    Step 4 :  How to add specific featured to post

     Login to your blogger ,go to setting then click layout , withing the lines of layouts you will see the featured layout click on it and customized it to fit what you like , then save

    Please of you find this article helpful ,kindly share it as a way to support this blog , and you can also subscribe to my email subscription to get  more meaningful post like this 

    Leave a Comment

    Your email address will not be published. Required fields are marked *

    Scroll to Top