How To Add A Stylish Ribbon To Your Latest Post

Ribbons are now being widely used in websites and blogs. The main reason behind the usage of ribbons is that ribbons are more eye catching than anything else. Yes, it can easily attract the attention of a visitor. Today let us learn how to add a stylish ribbon to the top of the latest post of a blogger blog. The ribbon can be added to your blog by simply copy pasting some codes to your template. It will be shown on the right top of your latest blog post and that too only on the homepage of your blog. The ribbon will work perfectly in all major browsers without any problem. Let's look into the demo first!

How To Add A Stylish Ribbon To Your Latest Post

1) Go To Your Blogger Dashboard Click > Template > Edit HTML > Proceed:
2) Using Ctrl+F Search For <head> and just above it paste the following Code:

<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')).first().prepend("<span class='new1'/>")
            $("#flagSwitcher").click(function() {
                $(".dropdown img.flag").toggleClass("flagvisibility");
            });
        });

    </script>

3) Now using Ctrl+F Search For ]]></b:skin> and just above it paste the following Code:

.new1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -5px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJO6RwSum0Uj3OHh76k6KC4H205zSFn0KY0C0b-kviJcCroZKIAQOz9_kvy6ulWzfDyvj1LBrO5nn8fwZX6NHZxNlNIa70w7EVPDRvlmvmtOQjZ4Dwz2EHxr6HIlCRZ6dS3D7MnKVmPJk/s1600/New.png") no-repeat scroll 0% 0% transparent;
}

Customization:

You can adjust the position of the ribbon by replacing 20px & -5px accordingly!

That's it! Now you have a cool Ribbon installed in your blog! Feel free to share your thoughts through the comment box below!

Tweak Your Blog

Anything and everything about blogger!