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>
.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;
}
.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;
}
.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-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).
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.
