Tutoriales Sobre Blogger: 5 Estilos de Etiquetas para Blogger con CSS

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ukjc-qRdnbAO4dcixW6B6dHlX5x6bBd4pbsEgPNU6-5XLCu7hyJD_Ko6j_l3dzywmOhxgk4sQAgsBnp9wzex9mL7e3fKWpccHnzK41ZvYOVi3-nBfHK_WpdLfXqFbTBGfennBsK8iLI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh15OiJUGtIpsNHQEt6lVb64yVMUaqlle2OkbqCgE-MNbf1MABc3rCV3QeS-uo4A3nbyWUMcBs2SBhsX58ZaJtygUUhLtjumST5Y-nttjKQbGdkmc0FSBEg00EtxMWrftCfL5rX3H9vjqI/s1600/yellow-btrix-hover.png);}
#Label1 a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqWSvH5mG8gz7IpivA_aknOo5eDSjb_3OgxMFXr_wwUtcLwNS6DPC9BjAFv45oCbcCDs9c3Xd_nXypAVvmjq2TrzAUBCUo8ktDF2hVzi_Z5Fcfrvt39VsjLPlcMlEdk3OkFVfCp8uKXlQ/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