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

Comentarios (8)

  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
:))
:((
: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