Add Corner Ribbon in Blogger

Add a featured/new ribbon to latest and old ribbon to previous posts as you have seen in many bloggers but they have a shit of codes to do this. Here as you know that 98% of our rule are without JavaScript or jquery because we dislike both of them. This ribbons is created up of Genuine CSS and very less amount of coding thus it is fast loading. Unlike other ribbons no images are used as they improve the site fill time. The picture slips appear on a fashionable qualifications with a 'Featured Ribbon' in the top left corner,you can manually add own image by replacing Ribbon image URL with your.You can also add captions and links to your slides.The installation of slider is very simple you just have to put some requirements in your layouts.

Blogger platform, the sidebars and footers of the blog function device places for the inclusion of material and ads. A gadget-placement area is not available by default above the header area of the blog. To add advertisements to this portion of your blog, you must add rule to your blog's design to make the device for the marketing to live in before you can paste in code for individual advertisements. Decorating your photos with ribbon photo corners is a great way to add a little flair to your scrapbook or photo album pages. These ribbon mounts are just what you need for a easy, yet fashionable overall look for your most valuable images. You can personalize it freely like you can change the New ribbon to Featured, Latest, Recent, Hot etc ribbons. You can also modify your Old ribbons with your preferred picture also. So without any more wait, just shift to the live EXAMPLE IMAGE and have a look on the features list and directly get your ribbons now. You can edit the text shown in the ribbon as per your convenience. To add this widget to your blog follow the below steps.

#Add Corner Ribbon in Blogger

Step-1 Go to Your Blogger Dashboard.

Step-2 Click On Layout Button.

Step-3 Click On Add a Gadget.

Step-4 Choose HTML/JavaScript.

Step-5 Paste The Below Code In HTML/JavaScript Box.

<div class="ribbon-wrapper-green"><div class="ribbon-green">EXAMPLE</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>

Step-6 Change EXAMPLE with your own desired text.

Step-7 After Save Widget and Done.

Thanks for visit our Blog.