1 de junio de 2013

5 Estilos de Etiquetas para Blogger con CSS

Por Síguenos en Twitter Hazte fan en Facebook Añadenos en Google+
Guardar una copia de seguridad de tu plantilla antes de comenzar a editarla, ahorraras muchos inconvenientes

En este tutorial veremos como agregarles CSS a nuestras etiquetas, muchos me han pedido mas estilos para nuestras etiquetas por eso para entra entrada no mostraremos un estilo si no
5 para que muchos tengan la posibilidad de elegir el mas compatible para su blog

Comencemos 

  • Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML>> 
  • Paso 2: Buscamos la siguiente linea despegable
]]></b:skin>

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

Estilo de Etiqueta 1 






/*-----Etiquetas con CSS de www.tutoriales-blogger.info----*/
#Label1 a{float: left;
    font-size: 11px!important;
    line-height: 1em!important;
    display: block;
    margin-right: 7px;
    margin-bottom: 7px;
    padding: 7px;
    background: #ffd964 url(http://1.bp.blogspot.com/-RDR_7KpQdY4/UVHGMTNoZ9I/AAAAAAAABRs/wX3rK8TRpdg/s1600/yellow-btrix.png);
    border: 1px solid #F9B653;
    color: #9C6533!important;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
    webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#Label1 a:hover{background: url(http://3.bp.blogspot.com/-gGx35EnLtls/UVHGMahuryI/AAAAAAAABRk/wmUqPUHxMNA/s1600/yellow-btrix-hover.png);}
#Label1 a:active { background: url(http://3.bp.blogspot.com/-LWGrYIKfFxk/UVHGMXN71iI/AAAAAAAABRo/yP2mm8CfBug/s1600/yellow-btrix-active.png); }

Estilo de Etiqueta 2






/*-----Etiquetas con CSS de www.tutoriales-blogger.info----*/
#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed;
    border: 1px rgba(0,0,0,0.3) dashed;
    padding: 4px 10px 4px 20px;
    text-decoration: none;
    color:#000000;
    white-space: nowrap;
font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    position: relative !important;
    background: #8dc63f;
    float: left;
    padding: 5px 3px;
    margin: 0 5px 5px 0;
   border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover{color: rgba(0,0,0,0.5);}
.label-size{line-height:1.5;align:left;}

Estilo de Etiqueta 3 






/*-----Etiquetas con CSS de www.tutoriales-blogger.info----*/
#Label1 a{
outline:1px dotted #FEB380;border: 1px rgba(0,0,0,0.2) solid;padding: 6px 8px 6px 14px;text-decoration:none;
color:black;white-space: nowrap;
font-family: arial,serif;text-transform:capitalize;
font-size: 12px;font-weight: bold;
position: relative !important;background: #aa00ff;
-moz-opacity:0.75;
-khtml-opacity:0.75;opacity:0.75;
filter:alpha(opacity:75%);
float:left;padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:8px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover {
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
background:#A55A27;color:white;
-webkit-transition:all ease-in-out .5s;
-moz-transition:all ease-in-out .5s;
-o-transition:all ease-in-out .5s;
transition:all ease-in-out .5s;
}
#Label1 a:active {
background:#B24700;color:#80FFFE;
-webkit-transition:all linear .5s;
-moz-transition:all linear .5s;
-o-transition:all linear .5s;transition:all linear .5s;
}

Estilo de Etiqueta 4






/*-----Etiquetas con CSS de www.tutoriales-blogger.info----*/
#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#E95D0C;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#ff8c00;font-size:11px;}
#Label1 .label-size-2 a {background:#556b2f;font-size:13px;}
#Label1 .label-size-3 a {background:#cd5c5c;font-size:14px;}
#Label1 .label-size-4 a {background:#B32A32;font-size:16px;}
#Label1 .label-size-5 a {background:#66CC00;font-size:18px;}
#Label1 .cloud-label-widget-content span a:hover {background:#B32A32;}

Estilo de Etiqueta 5 





/*-----Etiquetas con CSS de www.tutoriales-blogger.info----*/
.label-size a {
font-size: 14px!important;
padding: 1px 6px;
border-top: 1px solid #CACACA;
border-left: 4px solid #00A8FF;
margin-bottom: 5px;
float: left;
margin-right: 5px;
background: #F5F5F5;
border-right: 1px solid #CACACA;
border-bottom: 1px solid #CACACA;
}
.label-size a:hover {
border-left: 2px solid #222222;
border-right: 3px solid #222222;
background: #fff;
}
  • Paso 4: Guardamos los cambios realizados en la plantilla



8 comentarios:

  1. @Lucy Lee Malik::::^^
    Lucy el nuevo editor HTML de Blogger a cambiado ahora aparece de la siguiente manera <b:skin></b:skin> con una flecha negra del lado izquierdo. Expandelo y aparecera la linea ]]></b:skin> y justo por encima pega el código CSS de la etiqueta elejida.

    Espero que me hallas entendido.

    ResponderEliminar
  2. De lujo gracias todo lo que busco para mi blog lo encuentro aqui y me sirve gracias por todo amigo

    ResponderEliminar
  3. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  4. @DANIEL RIVEROS Gracias ti por tu comentario, todo aquí se comparte :)

    ResponderEliminar
  5. Hola amigo, tome el primer estilo y me fuciono pero quiero que queden en linea y no en nube,, y si la coloco en lonea se desorganizan todas,, que puedo hacer, y quisiera cambiarle el color, saludos,,http://graphicsonlinedg.blogspot.com/

    ResponderEliminar
Con dudas, Deja tu comentario

Antes de comentar recuerda;

-No se permite spam
-No permitimos un vocabulario inapropiado
-Se se lo mas especifico

Nota:

Para introducir el código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
Para crear el efecto de un uso intensivo <b> SU TEXTO AQUÍ ... </b>
Para crear el efecto del uso de la etiqueta cursiva <I> SU TEXTO AQUÍ ... </i>

Para convertir tu comentario en HTML

Ver
Recordatorio
Recuerda seguirnos en nuestras Redes Sociales para estar al tanto de los tutoriales
Foto Fernando
Mi Foto