Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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: 

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>

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

Comentarios (2)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar