Un bloguero Practicando

Personalizar la Nube de Etiquetas con CSS (II)

Personalizar la Nube de Etiquetas con CSS (II)

Comparteme :


Hace unos días expliqué como Personalizar la Nube de Etiquetas con CSS en Blogger y compartí con vosotros algunos diseños que hice. Hoy comparto otro diseño muy bonito que he encontrado en Stylifyyourblog. Podéis ver una demo a continuación:

Demostración
  1. Instalar el Gadget de Etiquetas para Blogger. Si no lo tienes instalado explico cómo hacerlo en Personalizar la Nube de Etiquetas con CSS.
  2. Ir a Escritorio Blogger.
  3. En el menú seleccionamos Plantilla.
  4. Hacemos clic en Editar HTML.
  5. En el código buscamos lo siguiente:

    1. ]] ></b:skin>

  6. Encima de ello tenemos que pegar el siguiente código:

  7. .label-size{
     margin:0;
     padding:0;
     position:relative;
     } 
     .label-size a{
     float:left;
     height:24px;
     line-height:24px;
     position:relative;
     font-size:12px;
     margin-bottom: 9px;
     margin-left:20px;
     padding:0 10px 0 12px;
     background:#0089e0;
     color:#fff;
     text-decoration:none;
     -moz-border-radius-bottomright:4px;
     -webkit-border-bottom-right-radius:4px; 
     border-bottom-right-radius:4px;
     -moz-border-radius-topright:4px;
     -webkit-border-top-right-radius:4px; 
     border-top-right-radius:4px; 
     } 
    .label-size a:before{
     content:"";
     float:left;
     position:absolute;
     top:0;
     left:-12px;
     width:0;
     height:0;
     border-color:transparent #0089e0 transparent transparent;
     border-style:solid;
     border-width:12px 12px 12px 0;  
     } 
    .label-size a:after{
     content:"";
     position:absolute;
     top:10px;
     left:0;
     float:left;
     width:4px;
     height:4px;
     -moz-border-radius:2px;
     -webkit-border-radius:2px;
     border-radius:2px;
     background:#fff;
     -moz-box-shadow:-1px -1px 2px #004977;
     -webkit-box-shadow:-1px -1px 2px #004977;
     box-shadow:-1px -1px 2px #004977;
     }  
    
    .label-size a:hover{background:#555;} 
    .label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Eso es todo, si tienes alguna duda acerca de este tutorial déjame un comentario en esta entrada.



Comparteme :
Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?
Personalizar la Nube de Etiquetas con CSS (II).
Comparte

Artículos Relacionados

Tu mensaje sera visible tras la aprobación del administrador