How to add Featured post in your Blogger

Image result for How to add Featured post or Sticky post in Blogger Homepage

So you have 20 or more post in your blogs, GREAT! and your spending more time to create some awesome content for your readers, all the best with that, But do you think of your Older posted article which having a decrease in page view and engagement with your readers since they spend more time to read more new article that posted over them. How to solve this problem? How to make sure your favorite never got missed by your readers. Its solution is quite simple for you now.

To sort it out, it’s now time to re-think your strategy for blog posts you created, since you are creating more and more new content the older post become less and less recognize in your blogs. These posts push backwards in older pages.

What’s more, in some of the case you have given more time than others post and you put your heart in creating this post, this tutorial is way to make sure your hard work on that particular post you have created never got wasted.

So how to show your favorite post only in Homepage? In this tutorial we will learn to put your favorite post in homepage as Featured post and give some ribbon to it. Before proceeding make sure you backup your template as necessary precaution.

Adding Featured post in Homepage:

I am using Google Chrome as my browser. Open your blog page where other post can also be seen with your Favorite post. Right click on page title and click “Inspect element”.

You will see in my example I have four post-outer since my demo blog contains only four post in my homepage. Click on post-outer of your favorite post-outer HTML and right click over it to choose “Edit as HTML”.

Press “Ctrl+A” to select the entire HTML within the post-outer and then press “Ctrl+C” to copy it. Save this code in text file in your desktop say “feature.text”. Now you have to edit this HTML in notepad. Open this HTML in notepad and add a class “featuredpost” in post-outer.

.
Now just below it add this following code to put ribbon on it. See in the end for more ribbon’s size and color options.

<div class="ribbon ribbon-color">
    <div class="banner">
        <div class="text">Featured Post</div>
    </div>
</div>

And finally the code will look like as shown in below image.

You can change the text of Featured Post to anything you like. For example like “Must Read” and so on. Now save this “feature.text”.

Now you have your final HTML code of Featured post, all you have to do is to add this to HTML widget in your Blogger layout. Go to Blogger >> Layout. Add a HTML gadget and in content paste that edited post-outer code that you have saved in text. Save it and Drag this HTML gadget to place it above Blog Gadget in layout. Save this Arrangement.

Adding CSS style to template.

Now go to "Template >> Edit HTML" just before ]]></b:skin> add this style.

.featuredpost{
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow: 0px 0px 2px rgba(175, 175, 175, 1), -1px 1px 1px rgba(204, 204, 204, 1);
background-color: #F8F8F8;
margin-bottom: 26px;
}
/* RIBBON BANNERS */

.ribbon {
 position: relative;
 top: 0;
 right: 0;
}
.ribbon a {
 color: #fff;
 text-decoration: none;
}
.ribbon .banner {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 color: #fff;
 -webkit-font-smoothing: antialiased;
 display: block;
 float: right;
 position: relative;
 right: -14px;
 top: 22px;
 width: 100px;
}
.ribbon-small .banner {
 right: -8px;
 top: 15px;
 width: 65px;
}

.ribbon-large .banner {
 right: -20px;
 top: 32px;
 width: 150px;
}
.ribbon .banner::after,
.ribbon .banner::before {
 content: '';
 display: block;
 height: 12px;
 position: absolute;
 width: 30px;
}
.ribbon-small .banner::after,
.ribbon-small .banner::before {
 height: 6px;
 width: 20px;
}

.ribbon-large .banner::after,
.ribbon-large .banner::before {
 height: 18px;
 width: 45px;
}
.ribbon .banner::before {
 -webkit-transform: skewY(-45deg) translate(50%,15px);
 -moz-transform: skewY(-45deg) translate(50%,15px);
 -ms-transform: skewY(-45deg) translate(50%,15px);
 -o-transform: skewY(-45deg) translate(50%,15px);
 -webkit-transform-origin: 100% center;
 -moz-transform-origin: 100% center;
 -ms-transform-origin: 100% center;
 -o-transform-origin: 100% center;
 left: -45px;
}
.ribbon-small .banner::before {
 top: -5px;
 left: -30px;
}
.ribbon-large .banner::before {
 top: 9px;
 left: -68px;
}
.ribbon .banner::after {
 -webkit-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -moz-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -ms-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -o-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -webkit-transform-origin: 0 center;
 -moz-transform-origin: 0 center;
 -ms-transform-origin: 0 center;
 -o-transform-origin: 0 center;
 right: -17px;
}
.ribbon-small .banner::after {
 top: 18px;
 right: -12px;
}
.ribbon-large .banner::after {
 top: 45px;
 right: -26px;
}
.ribbon .text {
 position: relative;
 z-index: 2;
 padding: 6px 0;
 font-size: 12px;
 font-weight: bold;
 min-height: 18px;
 line-height: 18px;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20);
 white-space: nowrap;
 text-overflow: ellipsis;
}
/* small text */
.ribbon-small .text {
 padding: 3px 0;
 font-size: 8px;
 min-height: 14px;
 line-height: 14px;
}

/* large text */
.ribbon-large .text {
 padding: 9px 0;
 font-size: 18px;
 min-height: 28px;
 line-height: 28px;
}
.ribbon .text::before,
.ribbon .text::after {
 content: '';
 display: block;
 height: 30px;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: -1;
}
/* small text */
.ribbon.ribbon-small .text::before,
.ribbon.ribbon-small .text::after {
 height: 20px;
}

/* large text */
.ribbon.ribbon-large .text::before,
.ribbon.ribbon-large .text::after {
 height: 46px;
}

.ribbon .text::before {
 -webkit-transform: translateX(-15%) skewX(-45deg);
 -moz-transform: translateX(-15%) skewX(-45deg);
 -ms-transform: translateX(-15%) skewX(-45deg);
 -o-transform: translateX(-15%) skewX(-45deg);
}

.ribbon .text::after {
 -webkit-transform: translateX(15%) skewX(45deg);
 -moz-transform: translateX(15%) skewX(45deg);
 -ms-transform: translateX(15%) skewX(45deg);
 -o-transform: translateX(15%) skewX(45deg);
}
/*--- RIBBON COLORS ---*/
/* red */
.ribbon-color .banner::after,
.ribbon-color .banner::before {
 background-color: #bd362f;
}
.ribbon-color .text::before,
.ribbon-color .text::after,
.ribbon-color .text {
 background-color: #ee5f5b;
}

Click on Go to HTML gadget above Blog Gadget as shown in below image. To make sure this gadget should appear only in Homepage we will add “homepage” condition to it. Proceed as follows.

Click to expand and enclose the content of HTML gadget in homepage condition as shown. And enclose the html content in homepage condition as shown.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>

Now you have finally done, it should have already started appearing in your homepage.

You can change appearance by changing CSS of “featuredpost”. For more style of ribbon add this class of ribbon in previous HTML ribbon code to choose small or larger ribbon in your featured post.

For small ribbon: add “ribbon-small” as shown below.

<div class="ribbon ribbon-small ribbon-color">
    <div class="banner">
        <div class="text">Featured Post</div>
    </div>
</div>

For large ribbon: add “ribbon-large” as shown below.

<div class="ribbon ribbon-large ribbon-color">
    <div class="banner">
        <div class="text">Featured Post</div>
    </div>
</div>

To change color of ribbon search for “ribbon-color” in blogger template editor and choose any color you want.

/* blue */
.ribbon-color .banner::after,
.ribbon-color .banner::before {
 background-color: #0044cc;
}
.ribbon-color .text::before,
.ribbon-color .text::after,
.ribbon-color .text {
 background-color: #0088cc;
}