Add new

Want to add a new ribbon at the top right corner of latest post as you have seen in many bloggers but they have a shit of codes to do this. This step by step procedure will show you how to add new ribbon to the latest post in blogger. Many bloggers want to add a ribbon at the corner of their blog post so that the blog visitors can easily find the new post of their blog. Ribbons are now being widely used in websites and blogs. The main reason behind the usage of ribbons is that ribbons are more eye catching than anything else. Yes, it can easily attract the attention of a visitor. These ribbons are created by using pure css styles no any image is used in it. This post is only for to add it in the first post of blogger. But you can also use these code to add this stylish ribbon to your blog, sidebar, any widget, image or anything else you want. Decorating your photos with ribbon photo corners is a great way to add a little flair to your scrapbook or photo album pages. These ribbon mounts are just what you need for a easy, yet fashionable overall look for your most valuable images. The ribbon can be added to your blog by simply copy pasting some codes to your template. It will be shown on the right top of your latest blog post and that too only on the homepage of your blog. The ribbon will work perfectly in all major browsers without any problem.
Live Demo

How to add ribbon to latest post


  • Go to Blogger Dashboard
  • Pointing to your blog click on DropDown Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML
  • Press Ctrl + F and search the code shown below


]]></b:skin>

  • Now Paste the Code Shown Below just above/before it


.howbloggersribbon {
margin:59px auto;
width:auto;
height:auto;
background:transparent;
border-radius:10px;
position:relative;
}

.howbloggersribbon1 {
width:85px;
height:88px;
overflow:hidden;
position:absolute;
top:-3px;
right:-3px;
z-index:90
}

.howbloggersribbon2 {
font:bold 15px Sans-Serif;
color:#fff;
text-align:center;
text-shadow:rgba(255,255,255,0.5) 0 1px 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
position:relative;
padding:7px 0;
left:-5px;
top:15px;
width:120px;
background-color:#434343;
background-image:-webkit-gradient(linear,left top,left bottom,from(#434343),to(#332C2C));
background-image:-webkit-linear-gradient(top,#434343,#332C2C);
background-image:-moz-linear-gradient(top,#434343,#332C2C);
background-image:-ms-linear-gradient(top,#434343,#332C2C);
background-image:-o-linear-gradient(top,#434343,#332C2C);
color:#fff;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.3);
box-shadow:0 0 3px rgba(0,0,0,0.3)
}

.howbloggersribbon2:before,.howbloggersribbon2:after {
content:"";
border-top:3px solid #332C2C;
border-left:3px solid transparent;
border-right:3px solid transparent;
position:absolute;
bottom:-3px
}

.howbloggersribbon2:before {
left:0
}

.howbloggersribbon2:after {
right:0
}

Now find the code shown below


<b:include data='post' name='post'/>

and replace it with the code shown below


<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='howbloggersribbon'>
       <div class='howbloggersribbon1'><div class='howbloggersribbon2'>NEW</div></div>
    <b:include data='post' name='post'/>
  </div>
 <b:else/>
  <b:include data='post' name='post'/>
 </b:if><b:else/> <b:include data='post' name='post'/>
</b:if>

Now save your template and visit your blog homepage. You will find the ribbon at the top right corner of the first post of your blog