As you see 'NEW Ribbon' in my Latest post.  Let us know How to Add NEW Ribbon To Your Latest Blog Post. Which might be very helpful to Visitors to identify your Latest Posts in blog.

How-To-ADD-NEW-Ribbon-To-Your-Latest-Blog-Post

How To ADD FEATURED or NEW Ribbon To Your Latest Blog Post?

  • Open Dashboard.
  • Click on Template.
  • Backup your Templete.
  • Choose 'Edit HTML'
  • Find ]]></b:skin> in your template. (You can find the code by Ctrl+F)
  • Just above it paste the subsequent code and save it.
.wrappera2z
{
  margin: 50px auto;
  width: auto;
  height: auto;
  background: transparent;
  position: relative;
}
.ribbona2z
{
  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);
}
.ribbona2z-wrapper12
{
  width: 86px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -4px;
  right: -4px;
}


  • Now Find <b:include data='post' name='post'/> in your template.
  • Replace the above code with the below code
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='wrappera2z'>
<div class='ribbona2z-wrapperaz'><div class='ribbona2z'>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>

  • The word 'NEW' can be replaced with FEATURED there.
  • Save the Template and See your Blog :)
I hope this post is helpful to you, please do comment if you liked it or any other suggestions.
Thank you.

Post a Comment Blogger Disqus

 
Top