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.

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...

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top