Awesome CSS3 Folded Ribbon For Blogger/Blogspot

This is a best example for showing the power Css. This is a Css3 ribbon designed by tutsplus. I bloggerized this.It takes only 2-5 minutes for adding it on your blog. See demo at my demo page.

View Demo

How To Add Ribbon To Blogger

You have to add only the CSS code above ]]></b:skin>

Addind The Css Code

• Go to Blogger Dashboard > Design > Edit HTML.
• Back Up Full Template and find for  ]]></b:skin> using CTRL+F function.
• Paste below code just above/before  ]]></b:skin>

.ribbon {
     font-family: 'Montez', cursive;
padding: 0 25px;
height: 80px;
  color: #301607;
  background-color: #c94700;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100));
    background-image: -webkit-linear-gradient(top, #c94700, #b84100);
    background-image:    -moz-linear-gradient(top, #c94700, #b84100);
    background-image:     -ms-linear-gradient(top, #c94700, #b84100);
    background-image:      -o-linear-gradient(top, #c94700, #b84100);
    background-image:         linear-gradient(top, #c94700, #b84100);
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    
 position: relative;
 float: left;
 clear: left;
  font-family: 'Montez', cursive;
 font-size: 32px;    line-height: 80px;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -moz-box-shadow:        -7px 7px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:     -7px 7px 0px rgba(0, 0, 0, 0.3);
    box-shadow:             -7px 7px 0px rgba(0, 0, 0, 0.3);

    border-bottom-right-radius: 20px 5px;
 }
 .ribbon:after {
 content: "";  display: block;
 width: 40px;
 height: 0px;
  position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 20;
  border-bottom: 80px solid #de6625;
 border-right: 80px solid transparent;
  -webkit-transform: rotate(90deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: right bottom;
    transform: rotate(90deg);
    transform-origin: right bottom;
 }  .ribbon:before {
 content: "";  display: block;
 width: 20px;
 height: 0px;
  position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 10;
     border-bottom: 80px solid rgba(0, 0, 0, 0.3);
 border-right: 80px solid transparent;
  -webkit-transform: rotate(80deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(80deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(80deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(80deg);
    -ms-transform-origin: right bottom;
    transform: rotate(80deg);
    transform-origin: right bottom;
 }  /*let's solve the unusual display problem caused by firefox*/ .ribbon#ff-proof:after {  width: 0px;
 height: 40px;
  position: absolute;
    right: -160px;
  border-left: 80px solid #de6625;
 border-bottom: 80px solid transparent;
  -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
 }

How To Show It In Blogger Posts

If you want to show it in your blogger posts,then follow these steps.

• While writing post Goto Edit HTML section.
• Add this code  <h1 class="ribbon"> YOUR_TEXT_HERE </h1>1>

Customization

If you want to change the font then add below code just before </head> tag.

<link href='http://fonts.googleapis.com/css?family=Segoe Print' rel='stylesheet' type='text/css'/>

Note -  If you want to change font then replace Segoe Print with another font name...