Add NEW Ribbon To Your Latest Blogger Post

You might have seen that “New” named ribbon in the latest post of a blog.
In this article, I will guide you how to implement it in your blog.
It’s useful to interact your visitors with newest updates and releases.

How to add this widget on your blog?

1. Go to your blog dashboard and go to Template tab .
2. Back up your template.
3. After back up click on Edit HTML.
4. Search for ]]></b:skin> and paste this code above it.

  margin: 50px auto;
  width: auto;
  height: auto;
  background: transparent;
  position: relative;
  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);
  width: 86px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -4px;
  right: -4px;

5. Now Search for this :  <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’/>
<b:include data=’post’ name=’post’/>
<b:include data=’post’ name=’post’/>

6. Save the template and Checkout your homepage. The ribbon should be on the latest post of your blog.
Non-Spammy reviews are most welcome in the Comments section below!
If you have any query, suggestion or etc. just comment in the below section.

Share This Now:


Add a Comment

Your email address will not be published. Required fields are marked *