How to Add New Label to Latest - First Post in Blogger

Rishabh Jain• August 25, 2013• 0 Min Read

new-label-bloggerSo this tutorial was requested from one of our reader, well I have applied this on my blog and I was wondering to share this with everyone then I missed somehow, so now using this you can easily add New Label on the first post in blogger. Yes the very first post you add will have a small attractive New label that will tell your users that this post is latest and new. So now if you want to add this to your blog check below.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

    .ribbon-wrapper{margin:-1px -16px 0 0;width: 86px;height: 88px;overflow: hidden;position: absolute;top: -4px;right: -4px;}.ribbon-wrapper-text{letter-spacing: 2px;font: bold 12px arial;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:5px 0;left:-15px;top:7px;width: 160px;background:#0056e3;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);}
  3. Now again search for <b:include data='post' name='post'/> tag and replace this 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='first-post-wrapper'><div class='ribbon-wrapper'><div class='ribbon-wrapper-text'>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>
  4. Now hit Save Template and refresh your blog to see this awesome New label. So now every latest post you add will get this New label :)
Tags: