So 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.
- Open Blogger > Template > Edit HTML.
- 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);}
- 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 == "true"'><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>
- 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 :)
(COMMENTS WILL LOAD AUTOMATICALLY)