Corner Ribbon for Blogger

Posted On // 7 comments

May bloggers may want to add a ribbon at the corner of their blog and this tutorial will show them how they can easily add a green ribbon at the corner of their blog.

This ribbon is made up of Pure 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 per your convenience. 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.

<div class="ribbon-wrapper-green"><div class="ribbon-green">DEMO</div></div>
.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;
  bottom: -3px;

.ribbon-green:before {
  left: 0;
.ribbon-green:after {
  right: 0;

Change DEMO with your own desired text. After editing the code save the Template/Widget.

You are done now. Now you and your visitors can see this elegant CSS ribbon on the corner of your blog.


Unknown Author
30 July 2013 at 20:59

Cool widget i must say .
visit my blog :

Anonymous Author
29 September 2013 at 03:32

how to add this only for specific pages?

Anonymous Author
22 October 2013 at 22:51

this should be installed above < / body >

ajay Author
5 October 2014 at 19:48

mindblowing dude, just addicted 2 your blog

14 August 2015 at 15:34

nice tip .... i added to my blog... hyderabadmirror

Anonymous Author
24 May 2016 at 15:21

how to add post level(category) as corner ribbon to every post in home page of blogger?

Anonymous Author
5 December 2017 at 04:43
This comment has been removed by the author.

Post a comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Corner Ribbon for Blogger |