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 == "true"'>
<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.
Thank you.

Post a Comment Blogger Disqus