Espera unos segundos se esta Cargando...
Inicio » Entradas. Etiquetas
Mostrando entradas con la etiqueta Etiquetas. Mostrar todas las entradas
Mostrando entradas con la etiqueta Etiquetas. Mostrar todas las entradas

Nube de etiquetas con FontAwesome en el blog

4 de agosto de 2016




Blogger predefine el widget de etiquetas o categorías tipo lista, pero también podemos personalizarlo para darle estilo hay que Configurarlo seleccionando tipo Nube 

Luego:

  • Ir a Plantilla.
  • Personalizar y llegaremos hasta el 
  • Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice
  • Avanzado, abajo del todo encontrarán una opción que dice 
  • Añadir código CSS personalizado, en el recuadro



/*- Etiquetas -*/
.Label a{padding-left:10px;background :#ebb499;text-transform: uppercase;padding:0 10px;color: #ffffff !important;height:26px;line-height:26px;text-decoration:none;border:none !important;-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;float:left;margin-left:1px;margin-top:1px;font-size:13px;}
.Label a:before {content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;color:#414141;transition:all .3s ease-out;}
.Label a:hover{background:#a991af;color:#000 !important;border:2px solid #414141}
#Label1 span[dir=ltr]{display: none; /*evitamos mostrar la etiqueta seleccionada*/
}


Para finalizar Aplicamos al blog

► Lo que esta marcado con rojo son los colores que se pueden cambiar.
► Lo que esta marcado con verde es el código FontAwesome que puedes cambiar.


Importante tienes que tener instalado en el HTML de la plantilla FontAwesome.

si no lo tienes ir a
  • Ir a la plantilla ► Editar HTML.
  • En el buscador ► Presionando CTRL+F pegar <head>
debajo de el pegar

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>


Este seria el resultado








Leer más

Etiquetas con efecto hover en el blog

7 de marzo de 2016




Blogger predefine el widget de etiquetas o categorías tipo lista, para darle estilo y dividirlo en dos columnas hay que:
  • Ir a Plantilla.
  • Personalizar y llegaremos hasta el 
  • Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice 
  • Avanzado, abajo del todo encontrarán una opción que dice 
  • Añadir código CSS personalizado, en el recuadro

/*- Etiquetas -*/
#Label1 ul li{
float: left;
width: 45%;
}
#Label1 li{list-style: none;
margin: 0px!important;
padding: 0px!important;
}
#Label1 li a{
display: block;
width: 100px; /* ANCHO DE LINKS */
background: #ccc; /* FONDO DE LINKS */
color: #000000; /* COLOR DE LINKS */
border-left: 0px solid #eee; /* BORDE DE LINKS */
margin-bottom: 3px;
font: 9px verdana;
padding: 7px;
padding-left: 5px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
}
/* LINKS HOVERS */
#Label1 li a:hover{
background: #f4915f;
box-shadow: inset 0 0 16px #f0a882, 0 0 0px #f0a882;
border-left: 10px solid #f0a882; /* BORDE DE LINKS */
color: #000000; /* COLOR DE LINKS */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
letter-spacing: 0px;
}

Para  finalizar Aplicamos al blog

Este es el resultado









Leer más

Mostrar las etiquetas del blog en mayúsculas o minúsculas

11 de noviembre de 2014





Para poner las etiquetas de tu sidebar (barra lateral) en mayúsculas o minúsculas se puede hacer, simplemente añadiendo unas líneas de CSS, sin entrar en la edicion de HTML.



  1. Primero debes tener el Gadget de etiquetas colocado en tu sidebar. 
  2. Debemos ir a Plantilla, ▶ Personalizar y llegaremos hasta el ▶Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice ▶ Avanzado, abajo del todo encontrarán una opción que dice añadir ▶ Añadir código CSS personalizado
    en ese recuadro van a añadir lo siguiente:

  • Para mostrar las etiquetas en MAYÚSCULA:

#Label1 ul {text-transform:uppercase;
text-align:center;
margin:0px;
padding:0px;}
#Label1 ul li {display:inline;}


  • Para mostrar las etiquetas en minúsculas:


#Label1 ul {text-transform:lowercase;
text-align:center;
margin:0px;
padding:0px;}
#Label1 ul li {display:inline;}

lowercase: muestra todo el texto del elemento con letras minúsculas.
uppercase: muestra todo el texto del elemento con letras mayúsculas.



Sintaxis

  • text-transform: permite transformar el texto de un elemento para mostrarlo en mayúsculas, minúsculas o una mezcla de ambas
  • text-align: La alineación de los contenidos (texto, imágenes) que se encuentran dentro de un elemento de bloque.Puede ser: left, right, center, justify, inherit.
  • margin: Establece el ancho de  los márgenes. En px.
  • padding: Para el ancho. En px.
  • display: Es el tipo de caja generada por un elemento, sólo uno de los siguientes valores: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit.


Todo estos datos puedes cambiarlos según el diseño que se ajuste a tu gusto, estos cambios los podrás ir viendo en la pre-visualización del diseño.

Le dan a aplicar al blog y listo.


Leer más

Dividir las etiquetas en dos columnas

10 de noviembre de 2014




Lo primero es saber que Blogger inserta automáticamente (por defecto), al añadir un gadget de etiquetas tipo lista (no nube).

Para dividir el widget de etiquetas o categorías de Blogger tipo lista, en dos columnas hay que:

  • Ir a Plantilla, 
  • Personalizar y llegaremos hasta el 
  • Diseñador de Plantillas, una vez allí nos vamos abajo del todo en donde dice 
  • Avanzado, abajo del todo encontrarán una opción que dice 
  • Añadir código CSS personalizado, en el recuadro


van a copiar y pegar siguiente código CSS

#Label1 ul li{
float: left;
width: 45%;
}
Sintaxis

width: es el ancho, que va a depende de las columnas que quieran, no siempre es exacto, ya que el widget de etiquetas hereda el padding de las listas de la sidebar (.sidebar ul li ).
Para dos columnas; para obtener 3 columnas utilizar 33%.
#Label1: es el selector puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.



Leer más
Suscribirse a: Entradas (Atom)

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger