LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets » How To Add New Ribbon To Latest And Old Ribbon To Previous Posts?

How To Add New Ribbon To Latest And Old Ribbon To Previous Posts?

Add Featured/New Ribbon To Latest And Old Ribbon To Previous Posts?

Everyone wants to make his blog more stylish then anyone else and for that he add soo many codes and widgets that will make him soo 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 soo 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.

We have a new codes that add a featured/new ribbon to latest and old ribbon to previous posts as you have seen in many bloggers but they have a shit of codes to do this. Here as you know that 99% of our code are without JavaScript or jquery because we hate both of them. 🙂

How To Add New Ribbon To Latest And Old Ribbon To Previous Posts?

The eye catching feature is the way they display the old and the new posts with a ribbon at the top right side. Although this gave inspiration but the codes differ a lot. We have added our own spice to make it interesting. We added a lot of features in it without adding extra codes. We just use HTML code with inline css2 and blogger conditional tags that is just about 7 lines long.

Recommended For You:
List View/Grid View Switcher Post With Auto Read More Via Button In Blogger

This will attract your visitor to see what’s hot on your blog and can get more click on your latest or recent post that is better for SEO. You can customize it freely like you can change the New ribbon to Featured, Latest, Recent, Hot etc ribbons. You can also change your Old ribbon with your desired image also. So without any more delay, just move to the live DEMO and have a look on the features list and directly get your ribbons now…

Features:

1.) Pure HTML Code.
2.) No JQuery Or JavaScript Or <Style> Code Added.
3.) Quick To Load and Easy To Install.
4.) Will Not Effect Your Blog Loading Time Even If Image Server Is Not Responding.
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 On Every Page Except Item And Static Page.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search The Below Code.

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

7.) Now Copy The Below Code And Paste It After The Above Code..
8.) Click “Save Template” And Done.

<!-- This Is A Copyrighted Code Of EXEIdeas. It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://lh3.googleusercontent.com/-CmCyzrG1afM/UZ9354KsJMI/AAAAAAAAGE0/S_xjDtT2wP8/s56/New-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/>
<b:else/>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://lh4.googleusercontent.com/-7C4ym_ep0Tw/UZ9359kFn4I/AAAAAAAAGE4/QKy0Shl3XK0/s56/Old-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/>
</b:if></b:if></b:if>
<!-- This Is A Copyrighted Code Of EXEIdeas .It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

Bug: Ribbons Are In A Corner Of Blog:

Some time or even it’s a common bug in this code that it requires a relative position of posts so that the absolute position can easily work. It is a common error that after adding the above code, all ribbons will set in the top right corner of blog and OLD one is displaying. In that case you have to position your blog post in a relative style. So for doing this just add the below code before </head> tag or if you know some basics, find the .post css and add the css of relative position there. From this css, your all ribbons will be at there placed and will looks quit cute.

<style>.post{position:relative;}</style>

Copyrights:

This code is generated and styled by EXEIdeas and can be used under DMCA notice. You are free to use it for any purpose but with HTML design code.

Recommended For You:
How To Create An HTML Hover Button For Your Blog & Website

From The Editors Desk:

This code really makes your blog look professional. You can make customizations if you can understand the flow of the code.The code is not complicated as others have like JQuery or JavaScript. It involves only basic <b:if> conditional tags. If you have any trouble in installing this code , I am always there to help you.Cheers 🙂

You Like It, Please Share This Recipe With Your Friends Using...

18 Responses to “How To Add New Ribbon To Latest And Old Ribbon To Previous Posts?”

  1. Anz Joy says:

    Isn’t this idea a copied one from MBT?? Just asking and no offense !!
    Facebook Pop out Like Box for Blogger Latest !

    • EXEIdeas says:

      Yes, Not Only One But Over 10+ Blogs Including WordPress, But None Of These Are Sharing This. Someone Shared But That Is Too Shit And Also Incomplete. No Idea But Why They All Not Shared What They Have. I Designed It Myself And Shared It At First Because I Have Simple Rule, “Sharing Is Caring”. Anyway, Thanks For Visiting And Commenting. Be With Us To Get More Code Which Other Use But Not Share…
      [+] Code Is Copyrighted To Me…!!!

  2. Anonymous says:

    WoW, Super hot and mostwanted code. You are right Muhammad that many of them are not sharing there code. You are awesome, thanks for sharing..

  3. Thanks hasan vaijan for revealing the secret.great job dude.

    • EXEIdeas says:

      Thanks For Liking And Welcome Here Again, It’s All Because Of Your And Our Visitor Support To Do This And Share This…

  4. Utkarsh Singh says:

    Can you tell me how can I change size of header tags like Minor heading, Heading, small heading. I want to change their size because they appear to small.

  5. Deep Sinha says:

    Nice You have recoded it I have also posted the same Ribbon before your one In my blog

    • EXEIdeas says:

      Nice To See You Here. Actually I Have A Problem That I Hate JQUERY That’s Why I Coded It In CSS Because J-Query Can Create A Bid Mesh In Template And Also Make It Heavy. Which One You Prefare…??? J-Query Or CSS…???

    • Deep Sinha says:

      Ofcourse Css is lot better then Jquery.It is Faster and also looks great.anyways i like your blog.keep it up and hope my new blog will also gain some popularity.
      MyBlog: Skill Blogger

    • EXEIdeas says:

      Thanks For Commenting, Anyway, Welcome Here And Visit Us Daily To Get New Codes Like This…

  6. Adrian Lucernas says:

    Thanks working find on my blog http://www.bloggerheroe.com keep sharing..

  7. Pravin Purohit says:

    Wow I was searching for this from a week.
    btw this ribbon is more sexy right Wow thanks i was looking for this . but this ribbon is more cool > DEMO OF NEW RIBBON

  8. iliyas shaikh says:

    great thanks brother

Leave a Reply to Deep Sinha Cancel reply

Your email address will not be published. Required fields are marked *