Recently one of popular websites I saw this label tag showing Old posts and new posts, then I decided to add this label tag for my blog and at the same time to share with my readers.
The old and new posts tag works on script based code, Looks very cool and impress readers, professional, displays on home page, well position designed and webmasters don’t need work hard for adding this tag to their blogs. Let’s begin the tutorial for adding old and new posts tags to blogger.
Step One:-
Sign into your blogger account
Select ‘Template’ link tab
Click on ‘Edit HTML’ link tab and proceed
Note: Before you do implement this experiment on your blog better backup template, if anything goes wrong you can reuse it again.
Now, search for code
]]></b:skin>
- After finding code copy the below code and paste above to it
.new1 { width: 56px; height: 56px; position: relative; left: 20px; top: -13px; float: right; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7m-Bq6ynf1SjhyphenhyphentUmy9Kl_rbmTrQlOeHreG-GjwxTkMfnEo1uE0p_bg9YnU7qmfpfxl9ukeQGJI-hyJXn1bqKihiJP53nUohj47dMFFmXjNc4AWGvHbo0Imw2bt3lkPGA08XO1oRz68K_/s400/New.png") no-repeat scroll 0% 0% transparent;} .old1 { width: 56px; height: 56px; position: relative; left: 20px; top: -13px; float: right; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZIkP8iFjGMpHsVadHIHjoEiYuIwQfh20j9L0KznI37dAyKoqVXuhZHZP4vcQNSjYUZQxcCyAT39HBlsDPUpBszDAzimihouqgSsKu0PFbX1_9Uviu9GUNfE9JFHrfd58PY1FD04xvFarD/s400/old.png") no-repeat scroll 0% 0% transparent;}
Step Two:-
Now search for code
<head>
- After finding code copy below code and paste below/after to it
<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>
That’s it you’ve done, save your template and preview your experiment.
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments