Tutoriales Sobre Blogger: Barras de Progresos para Blogger con CSS.

En este tutorial veremos como agregar barras de Progresos en nuestras entradas con CSS para blogger. Estas Barras no ocupan imágenes y son totalmente creadas con CSS para una cargar rápida del Blog.


Antes de Comenzar veremos una demostración: 

Demostración

Comencemos: 

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS

.meter {
height: 20px;  /* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
  -webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
      -moz-border-radius-topright: 8px;
   -moz-border-radius-bottomright: 8px;
          border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
   -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
       -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
           border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0, rgb(43,194,83)),
 color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
 center bottom,
 rgb(43,194,83) 37%,
 rgb(84,240,84) 69%
);
background-image: -moz-linear-gradient(
 center bottom,
 rgb(43,194,83) 37%,
 rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
 center bottom,
 rgb(43,194,83) 37%,
 rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
 center bottom,
 rgb(43,194,83) 37%,
 rgb(84,240,84) 69%
);
-webkit-box-shadow:
 inset 0 2px 9px  rgba(255,255,255,0.3),
 inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
 inset 0 2px 9px  rgba(255,255,255,0.3),
 inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.orange > span {
background-color: #f1a165;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);
        background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
        background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
        background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
}
.red > span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -ms-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -o-linear-gradient(top, #f0a3a3, #f42323);
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
  -webkit-gradient(linear, 0 0, 100% 100%,
     color-stop(.25, rgba(255, 255, 255, .2)),
     color-stop(.25, transparent), color-stop(.5, transparent),
     color-stop(.5, rgba(255, 255, 255, .2)),
     color-stop(.75, rgba(255, 255, 255, .2)),
     color-stop(.75, transparent), to(transparent)
  );
background-image:
-webkit-linear-gradient(
 -45deg,
     rgba(255, 255, 255, .2) 25%,
     transparent 25%,
     transparent 50%,
     rgba(255, 255, 255, .2) 50%,
     rgba(255, 255, 255, .2) 75%,
     transparent 75%,
     transparent
  );
background-image:
-moz-linear-gradient(
 -45deg,
     rgba(255, 255, 255, .2) 25%,
     transparent 25%,
     transparent 50%,
     rgba(255, 255, 255, .2) 50%,
     rgba(255, 255, 255, .2) 75%,
     transparent 75%,
     transparent
  );
background-image:
-ms-linear-gradient(
 -45deg,
     rgba(255, 255, 255, .2) 25%,
     transparent 25%,
     transparent 50%,
     rgba(255, 255, 255, .2) 50%,
     rgba(255, 255, 255, .2) 75%,
     transparent 75%,
     transparent
  );
background-image:
-o-linear-gradient(
 -45deg,
     rgba(255, 255, 255, .2) 25%,
     transparent 25%,
     transparent 50%,
     rgba(255, 255, 255, .2) 50%,
     rgba(255, 255, 255, .2) 75%,
     transparent 75%,
     transparent
  );
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size:    50px 50px;
background-size:         50px 50px;
-webkit-animation: move 2s linear infinite;
  -webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
      -moz-border-radius-topright: 8px;
   -moz-border-radius-bottomright: 8px;
          border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
   -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
       -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
           border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
overflow: hidden;
}

• Paso 4: Guardamos los cambios realizados en nuestra plantilla

Ahora agregaremos nuestras barras de Progreso en una entrada o gadget

Solo tendremos que agregar el siguiente código HTML 

<div class="meter orange nostripes">
<span style="width: 25%;"></span>
</div>

Demostración para mas estilos de Barra

Nota:- Solo tienes que cambiar el siguiente porcentaje 25% ,por el que necesites