Conner Ribbon for Blogger

Most of bloggers may require to add a ribbon at the corner of their blog. So this article will teach them how to add a green ribbon at the corner of their blog easily. This ribbon is made up using CSS and very less amount of coding thus it is fast loading. Unlike other ribbons no images are used as they increase the page load time. You can see the demo of this ribbon in the beside image itself. 

You can edit the text shown in the ribbon as your wish. 

To add this widget to your blog follow the below steps.

You may add the ribbon on the blog as a whole or on a specific element like <div id="example">.

To add this on any specific element just paste the below given code just below the elements starting.

To add the widget on the blog as a whole go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the below code in the box.

CSS Codes:

<div class="ribbon-wrapper-green"> <div class="ribbon-green"> DEMO</div> </div> <style> .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; z-index: 99999; } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; } </style>

You can change "DEMO" with your own desired text. After editing the code save the Template/Widget.

Test by changing size of the ribbon

Now you are add a ribbon. Now you and your visitors can see this elegant CSS ribbon on the corner of your blog.