How to create corner ribbon in the blogger

Friends, today we will know how to put green ribbon on the corner of your blog. This ribbon has been created with the help of CSS to make loading fast in our blog. By applying ribbon, a new look will appear on the corner of our blog, with the help of which the design of the blog will also look good. You can also write welcome messages in ribbon that your visitors will like. There will be no harm to our blog by applying ribbon. The method of applying ribbon is also easy, so let's know how to put this beautiful corner ribbon in your blog.

How to Create corner ribbon in blogger

How to Make ribbon on blogger's corner
How to Make ribbon on blogger's corner

How to Create A Blog

Step 1: First of all you should be logged into Blogger.com.

Step 2: Then in it you click on "Layout >> Add Gadget".

How To Make Money Online

Step 3: A popup window will open in it, where you select "HTML / JavaScript".

Step 4: Now copy the below code and paste it into HTML / JavaScript.

[su_highlight background="#d7ff3d"] <div class="ribbon-wrapper-green"><div class="ribbon-green">YOUR TEXT</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>
[/su_highlight]

Step 5: Now you replace your TEXT according to your own Word

How To Add santa claus IN Your Blog

How to create corner ribbon in blogger Friends, in this article I taught you how to put ribbon, I hope you have understood this post completely, but if you have any problem or need any help, then you can tell me through comments Will help