Añade Lazo En Esquina Superior Derecha De Tu Pagina de Tu Blog

En este tutorial te mostrare como añadir un lazo en la parte superior derecha de tu pagina de tu blog de blogger.Con la opcion de poderlo anadir este en un elemento especifico tal como<div id="ejemplo">.
Para añadirlo a un elemto particular solo pega el codigo de abajo al principio de este elemento y si lo vas añadir este widget en tu blog estas son las instrucciones a Seguir.
1.Entra en tu blogger escoje el  Blog  
2. Ve a Diseño
3.Selecciona  Añadir un Widget 
4.Selecciona HTML/JavaScript y pega el siguiente codigo.

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

Cambio la plabra DEMO con tu texto deseado. Despues que edites el codigo guarda la plantilla/Widget.

Todo esta listo Ahora tu y tus visitantes podran ver este elemento de lazo con CSS en la esquina superior derecha de tu  blog.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati