How to Add Featured Post in Blogger Homepage?
How to Add Featured Post in Blogger Homepage? you can add a Featured Post gadget, which highlights an important post on your front page and allows you to keep the most relevant information on top of your blog even as you add new content. how to add featured post on blogger? Blogger customize layout, Blogger add gadget, important post Blogger, post widget Blogger, Featured Post Widget, Blogger adding section?
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 -> Theme -> 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 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
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).
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.
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.
Step #4: Now Click on orange color Save button. And again click on orange color Save arrangement button from Layout page.
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.
6 comments
:magnify :magnify :magnify :magnify :magnify :magnify