How to Add Featured Post in Blogger Homepage?

How to Add Featured Post in Blogger Homepage?

4
data:blog.title
featured post

Featured post is most popular in WordPress site where we can easily make any post as author's choice or Editors pick or featured post. But in Blogger you can easily add this kinds of feature in your Blogger template. To do this just follow the below steps-

Adding CSS Code in Blogger Template

First of all we will add CSS code in our Blogger template. So please follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3
 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>


/* Featured Post By www.bloggerspice.com */
.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;
}
.featured-post-banner .banner {
 right: -8px;
 top: 15px;
 width: 65px;
}

.ribbon .banner::after,
.ribbon .banner::before {
 content: '';
 display: block;
 height: 12px;
 position: absolute;
 width: 30px;
}
.featured-post-banner .banner::after,
.featured-post-banner .banner::before {
 height: 6px;
 width: 20px;
}

.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;
}
.featured-post-banner .banner::before {
 top: -5px;
 left: -30px;
}
.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;
}
.featured-post-banner .banner::after {
 top: 18px;
 right: -12px;
}
.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;
}
/* text */
.featured-post-banner .text {
 padding: 3px 0;
 font-size: 8px;
 min-height: 14px;
 line-height: 14px;
}
.ribbon .text::before,
.ribbon .text::after {
 content: '';
 display: block;
 height: 30px;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: -1;
}
/* text */
.ribbon.featured-post-banner .text::before,
.ribbon.featured-post-banner .text::after {
 height: 20px;
}

.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 ---*/
.ribbon-color .banner::after,
.ribbon-color .banner::before {
 background-color: #5BC3EE;
}
.ribbon-color .text::before,
.ribbon-color .text::after,
.ribbon-color .text {
 background-color: #5BC3EE;
}

Customization

To change the ribbon color please alter the #5BC3EE with different color code.

Step 5 hit the Save template button.

Finding the Post's HTML Code from Blogger Template

In this stage we will find the post's HTML code which one we want to make it Featured.  So..

Step 1  Go to your Blogger Dashboard


inspect element

Step 2 Locate the Post Title and right click on it after that click on Inspect Element option. Now post element will be visible at the bottom of the page. Now fold the post code. Thus it will look like below code-
<div class="post-outer"></div>
Step 3 And Now right click on it and select Edit As HTML. now copy the whole code by using Ctrl+C (Windows) or CMD+C (Mac) . 

And Paste the code in a notepad file in your PC by using Ctrl+V (Windows) or CMD+V (Mac).


Step 4  Now wrap the whole code by below code on text file.

<div class="ribbon featured-post-banner ribbon-color">
    <div class="banner">
        <div class="text">Featured Post</div>
    </div>
</div>
<div style='background:white;padding:10px;margin-top:10px;border-left:5px solid #5BC3EE; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.38);'>

Paste your Post's HTML Code Here

</div>

After wrap up the code it will be look like below image.

wrap up code

Everything is done. Now we will add this code inside a HTML/JavaScript gadget from Blogger Layout section.

Adding wrap up code inside HTML/JavaScript gadget

This is pretty easy task just follow the below steps-

Step 1  Go to your Blogger Dashboard

Step 2  Click on  Now click on -> Layout -> Add a Gadget-> A popup window will appear and now scroll down and select HTML/JavaScript gadget. Again another popup window will appear.  And leave blank the Title field.  

Step 3
 From notepad  copy the whole code and paste it inside Content field on HTML/JavaScript gadget.



JavaScript

Step 4 Now Click on orange color Save button. And again click on orange color Save arrangement button from Layout page.


featured post

Now check your Blogger site and see the Featured post at the top of the posts. I know this tutorial is bit complicated but I have tried with my best effort to make it easy. If you have any question regarding this tutorial then feel free to leave a comment below. Thank you. 
How to Add Featured Post in Blogger Homepage?
4 Stars stars - "How to Add Featured Post in Blogger Homepage?" Featured post is most popular in WordPress site where we can easily make any post as author...

আপনার প্রতিটা পোস্টের একটা সমস্যা আছে ভাই, আপনি সকল তথ্য সুন্দর ভাবে দেন , কিন্তু আসল জিনিসটাই দেন না , সেটা হল প্রতিটা উইজেটের DEMO , যেমন এইটা শুধু একটা ছবি দিয়েই শেষ করে দিয়েছেন , এইটা যদি আলাদা কোন blog এ ডিমো দেখিয়ে দিতেন তাহলে রিডারদের আরো সুবিধা হত এন্ড আপনার পোস্ট গুলি আরো জনপ্রিয় হত ।
:magnify :magnify :magnify :magnify :magnify :magnify

Demo all post a deya somvob na..Karon aai widget je kono template a kaj korbe tai ek ek template er design ek ek rokomer hobe. So Instead of Demo image or animated image is more preferable.

khub sundor ekta widget full wordpress style er babohar tao new tai beshi moja peyechi :bad-angry

Thanks for dropping your comment.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *