How To Add New and Old Ribbon To Latest And older Posts

Everyone Wants to make their blog stylish. Recently I developed a code to add new post and old post ribbon in blog posts. This ribbons will make your homepage more stylish. These ribbons are developed in css3. Everyone wants to make his blog more stylish then anyone else and for that he add so many codes and widgets that will make him so bad that none of other is. So the simple rule is that you have to use that code which is best for user's eyes and mind too. Means that it should not to be so heavy and must should be awesome. In the way to find these type of code we are keeping our journey running and we are creating new codes with lot of features and 0% cons. So this is also a part of these codes that we are going to share in this article below. See the Screenshots given below to understand how does the ribbon looks after adding the codes.

Before adding this code, have a look at its features given below:

1.) Pure HTML Code.

2.) No JQuery Or JavaScript no worries!!!

3.) Quick To Load and Easy To Install.

4.) Will Not affect Your Blog Loading Time

5.) Two Ribbons Are Hosted On Picasa About 2-3Kb/Image.

6.) Blogger Official Conditional Tag Used.

7.) Fully Customizable.

8.) New Ribbon On Latest/Recent Post Of Your Blog.

9.) Old Ribbon On Your All Old Post Automatically.

10.) It Will Repeat Only on your home page.

Now lets begin to add this ribbon.

Adding the Ribbon Style Codes In Blogger Blog

1.) Go to blogger.com

2.) Open Your Blog.

3.) Go To "Template".

4.) Click "Edit HTML".

5.) Now, Search For "]]></b:skin>" 

6.) Add the code given below above "]]></b:skin>"

/*########new old ribbon styles by brain-of-computer.blogspot.com start ########*/
.brain-of-computer-new-ribbon {
width: 56px;
height: 56px;
position: relative;
left: 20px;top: -13px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4O7tDc3BjtUU1M97m16xSwbJxp7Aio9kwi1UVHb0OAWjNFTyNSgRXYPQLBVafK_TZRYkQPaHB7uJXhjKiUQtXGAdArQvzSz2VDLmgBAKWmtnGDVXiyAcDcerlG0TJn-dI2W9EYIwMvafe/s400/New.png") no-repeat scroll 0% 0% transparent;
}
.brain-of-computer-old-ribbon {
width: 56px;
height: 56px;
position: relative;
left: 20px;top: -13px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYUzTa3uRVXGxRWWkmqW2azfDzyIJtxrE6BhFImkwjbQux26SVFZtBUHWY1jMbLM7RYltPVjfc_9rZ33k2NEYU4Eptz3XMtldNYbPqj9Tos9c54vjEZkxMBd6Q9HaF3Nk6rg95G5kTFnIQ/s400/old.png") no-repeat scroll 0% 0% transparent;
}
/*########new old ribbon styles by brain-of-computer.blogspot.com end ########*/

 You may need to change the left margin to align the ribbon correctly.
 7.) Add the code given below above "</head>" tag

<!--ribbon codes by brain-of-computer.blogspot.com-->
<b:if cond='data:blog.url != data:blog.homepageUrl'><style>
.brain-of-computer-new-ribbon  {display: none !important;}
.brain-of-computer-old-ribbon  {display: none !important;}
</style></b:if>
<!--ribbon codes by brain-of-computer.blogspot.com->

 8.) Save your template

Adding the Ribbon HTML Codes In Blogger Blog

1.) Go to blogger.com

2.) Open Your Blog.

3.) Go To "Template".

4.) Click "Edit HTML".

5.) Now Search For <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> 

6.) Now Add The Code given below after <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>" code.

<!--########new old ribbon by brain-of-computer.blogspot.com start ########-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost'>
<span class="new1"></span><b:else/><span class="old1"></span></b:if></b:if>
<!########new old ribbon by brain-of-computer.blogspot.com end ########-->

If you couldn't find <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> code then search for "post hentry" only, there may be two "post hentry" codes in your blog. Add the ribbon html code after "post hentry" code in your entire template.
 7.) Save your template
 Now visit your blog and see if it is working or not.

Copyrights

These codes are created by brain-of-computer and if you want to share this codes, then you may not remove the credits from it. If you are a genius blogger then you will not remove the credits.