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.
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.
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…
1.) Pure HTML Code.
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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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;'/>
<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;'/>
<!-- 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.
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.
From The Editors Desk: