How to Add New and old tags to your blogger posts(Updated)

new and old tags for bloggerHi Visitors!! Today we are proudly presenting a very cool and innovative trick for blogger's blog.We all know about MBT and its recent look(MBT V2 Template),the template is so awesome that when i first saw it The first word came to mind after seeing this template was WOW !! I thought that only MBT can do this type of work into blogger blog,but when i was looking through it i saw a interesting piece of great work "The new and old tags To every Post", that moment i thought that how did they manage to do this kind of script and then i inspected it some more,then i tried it on my blog and it is working absolutely fine so,guess what i got the idea to release this widget for the other bloggers too.The widget works on some chunk of codings.So First see some Demo

Live Demo

Features Of new and old tags for blogger

  • Looks Cool and Professional
  • Works Automatically 
  • Only Shows to home pages
  • Easy to position

Recommended:-Stylify your popular post widget in blogger

How to install new and old tags in your blogger blog

These is steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.

  • Go To Blogger.com >> Your Blog >> Template
  • Now Backup your template.
  • Then select Edit HTML >> Proceed
  • Don’t forget to Click/Tick the Expand Template Widgets box.
  • Search for ]]></b:skin> and just above it paste the following  CSS code.

.new1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("http://1.bp.blogspot.com/-w-cH9_Xp_6o/UPxhlmAMpWI/AAAAAAAAIyk/ozIqx5lOk7g/s400/New.png") no-repeat scroll 0% 0% transparent;
}
.old1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -13px;
float: right;
background: url("http://3.bp.blogspot.com/-lpcMFav3uls/UPxhmBrAmHI/AAAAAAAAIyw/-HrZloG5h_Q/s400/old.png") no-repeat scroll 0% 0% transparent;
}

Now let’s add the final and important part of the widget, Search for </head> and just below/after it paste the following coding.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
$('.blog-posts').find($('.post')).slice(1).prepend("<span class='old1'></span>")
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$('.blog-posts').find($('.post')).first().prepend("<span class='new1'></span>")
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>

All Done : Now everything is completed just  Save your Template by pressing Save template button.

From the Editor’s Desk:

Hope you have enjoyed the cool and interesting session  of this Tutorial. we are trying to create more widgets that benefits to you and your users. A very famous blog MBT is using this widget If you would face any problem to add New and old tags feel free to ask till then, blessings and happy sorting.
Note: This New and old tags widget is created by MBT So all the Coding credits goes to MBT. Don't forgot to link back if you want to share this tutorial.otherwise dmca is waiting for some spammers.

Comments

    • Its working fine at my demo blog..
      Try to add jquery in your template. 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
      if it will still not work then send your template to me.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Looking for More Awesomeness?