How To Add stylish Ribbon In Your Latest Blogger Post without JQuery

Hi friends, i have already posted about Adding a stylish ribbon to blogger template  . But that was with jquery due to which your website may take more time to load.So today i m here to tell you about adding another stylish ribbon to your blogger template but it is done using CSS not JQUERY so it will not take extra time to load.

Add stylish Ribbon In Your Latest Blogger Post without JQuery

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed -->  Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now paste the below code just above it. 

.wrappercbt12
{
  margin: 50px auto;
  width: auto;
  height: auto;
  background: transparent;
  position: relative;
}
.ribboncbt123
{
  font: bold 20px Sans-Serif;
  text-align: center;
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -25px;
  top: 7px;
  width: 160px;
  background-image: linear-gradient(top, #129, #12f);
  background-image: -o-linear-gradient(top, #129, #12f);
  background-image: -ms-linear-gradient(top, #129, #12f);
  background-image: -moz-linear-gradient(top, #129, #12f);
  background-image: -webkit-linear-gradient(top, #129, #12f);
  color: #fff;
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribboncbt-wrapper12
{
  width: 86px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -4px;
  right: -4px;
}

• Now search for 

<b:include data='post' name='post'/>

• and replace it with this code. 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='wrappercbt12'>
<div class='ribboncbt-wrapper12'><div class='ribboncbt123'>NEW</div></div>
<div id='first-post'>
<b:include data='post' name='post'/>
</div></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

• Now Save the template Hope you enjoy the post don't forget to hit share button seen below. 

Like it? Share it.