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 YouTube “trending 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
Step 2 : How to add featured post widget
Add the following code below to the new layout you have created
COPY THE SOURCE CODE BELOW
<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
