Mostrando entradas con la etiqueta gadget. Mostrar todas las entradas
Mostrando entradas con la etiqueta gadget. Mostrar todas las entradas

4.4.13

Añadir gadgets en cabecera de Blogger


La cabecera de Blogger es una sección que está limitada a un solo gadget. Esto impide que podamos agregar un gadget dentro de ella, encima del título del blog, para poner, por ejemplo, un menú. En este tutorial veremos cómo habilitar la opción Añadir un gadget dentro de la cabecera.

Si vamos a:

Página principal ► Diseño ► Diseño

...veremos la sección correspondiente a la cabecera, sin la opción Añadir un gadget, así:

Sección Cabecera de Blogger

Para habilitar la opción Añadir un gadget:

1.- Vamos a:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>

     El anterior código pone a esta sección las siguientes limitaciones:
  • maxwidgets='1': máximo de widgets (gadgets): uno.
  • showaddelement='no': no permite mostrar en Diseño la opción Añadir un gadget.
3.- Eliminamos del código esas dos limitaciones, debiendo quedar así:

      <b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>

4.- Guardar plantilla.

     Eliminadas las limitaciones habremos habilitado la opción Añadir un gadget.

5.- Vamos a:

Página principal ► Diseño ► Diseño

...y veremos la sección de la cabecera, así:

Añadir gadgets en la cabecera de Blogger

Podremos agregar, ahora sí, un gadget dentro de la cabecera y encima del título. Esa zona es muy apropiada para poner un menú.

Así se verá un gadget agregado encima del título del blog, dentro de la cabecera, habilitando para ésta la opción Añadir un gadget:

Gadget agregado encima del título del blog

 

Añadir un gadget debajo del título

Para añadir un gadget dentro de la cabecera, debajo del título, lo añadimos como ya se explicó, luego vamos a Diseño ► Diseño:

Añadir un gadget debajo del título

...y lo "arrastramos" debajo del título:

Añadir un gadget debajo del título

De esta manera el gadget quedará debajo del título y al lado izquierdo. Para darle otra posición, por ejemplo en el centro o al lado derecho, vamos a Editar HTML, localizamos esta etiqueta ]]></b:skin> y, antes de la misma, pegamos el sigiente código:

#Image1 {
text-align: right;
margin-top: -XXXpx;
}
  • #Image1 es la identificación del gadget. Lo identificamos como se explica en este tutorial, buscándolo en la plantilla por el título que le hayamos puesto.
  • right posiciona el gadget al lado derecho; para ubicarlo en el centro ponemos center.
  • -XXXpx le da un margen superior negativo al gadget en caso de que necesitemos subirlo (cambiando las Xs por el número de pixeles). Si no necesitamos subirlo omitimos esta línea.
33 comentarios
Etiquetas: , , , , ,

23.3.13

Personalizar gadget etiquetas de Blogger



Personalizaremos el gadget de las etiquetas dándole la siguiente apariencia:
  • Lista de dos columnas
  • Un fondo fijo para cada etiqueta.
  • Un fondo con efecto transición, debajo del anterior, para cada etiqueta.
  • Etiqueta activa sin fondo (adquiere el fondo con el cursor encima).
  • Cambio de color del texto al poner el cursor sobre él.
  • Cambio de color del fondo con efecto transición al hacer click.

1.- Añadimos el gadget correspondiente a las etiquetas:

Página principal ► Diseño ► Diseño ► Añadir un gadget ► Etiquetas
    ...con la siguiente configuración:
Configurar etiquetas
  • En Mostrar (el primero) podemos activar cualquiera de las dos opciones. Si escogemos Etiquetas seleccionadas hacemos click en Editar y, en el cuadro que aparece abajo, activamos las etiquetas que queremos mostrar.

  • En Ordenación podemos activar cualquiera de las dos opciones.

  • En Mostrar (el segundo) debemos activar la opción Lista y desactivar la opción Mostrar cantidad de entradas por etiqueta.
2.- Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►
  • Localizamos la siguiente etiqueta poniéndola dentro del rectángulo de búsqueda (Search):
</head>
  • ...y, antes de la misma, pegamos el siguiente código:

<style>
dir {
   margin: 0; padding: 0;
  }
.list-label-widget-content ul {
   width:270px;  /*Ancho del gadget*/
   height: auto;  
   margin:auto;
   padding: 3px 2px;
   border: 1px solid;  /*Grosor del borde*/
   border-color: #000000; /*Color del borde*/
}
.list-label-widget-content li {
   width: 125px;  /*Ancho del fondo transición*/
   height: 20px;
   display: inline-block;
   zoom: 1;
   *display: inline;
   margin: 0;
   padding: 2px 4px;
   line-height:20px;
   background:none;
   -moz-transition: all 2s;
   -webkit-transition: all 2s;
   -o-transition: all 2s;
   transition: all 2s;
  }
.list-label-widget-content li a {
   width: 125px; /*Ancho del fondo fijo*/
   height:20px;
   display: inline-block;
   zoom: 1;
   *display: inline;
   font: normal;
   color: #000000;  /*Color del texto*/
   text-align: left;
   background: #a9d0f5; /*Color del fondo fijo*/
  }
.list-label-widget-content li:hover {
   height: 20px;
   background: #0077E7; /*Color del fondo transición*/
   line-height:20px;
   text-align:center;
   -moz-transition: all .3s;
   -webkit-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
  }
.list-label-widget-content li a:hover {
   text-decoration: none;
   color: #ad0000; /*Color del texto con el cursor encima*/
  }
.list-label-widget-content li:active {
   height: 20px;
   line-height:20px;
   text-align:center;
   -moz-transition: all .3s;
   -webkit-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
   background: #fe4a4a; /*Color del fondo transición al hacer click*/
}
.list-label-widget-content li:nth-of-type(2n+1) {
   text-align: left;
   border-right:1px solid;
   border-right-color: #000000; /*Color de la línea vertical interna*/
   -moz-border-radius:20px 0 0 20px;
   -webkit-border-radius:20px 0 0 20px;
   border-radius:20px 0 0 20px;
}
.list-label-widget-content li:nth-of-type(2n) {
   text-align:left;
   -moz-border-radius: 0 20px 20px 0;
   -webkit-border-radius:0 20px 20px 0;
   border-radius:0 20px 20px 0;
}
</style>
  • Las líneas del código que se pueden modificar, para adaptar el gadget al diseño del blog, tienen el correspondiente Comentario al frente.

  • Si modificamos el Ancho del gadget, tendremos que modificar también, y proporcionalmente, el Ancho del fondo transición y el Ancho del fondo fijo, repartiendo la diferencia, por exceso o por defecto, entre éstos dos últimos, en partes iguales. Por ejemplo (tomando como referencia el código del tutorial):

    • El Ancho del gadget es de 270 pixeles. Si lo aumentamos a 300 pixeles le estaremos agregando 30 pixeles.

    • El Ancho del fondo transición, y el Ancho del fondo fijo es, cada uno, de 125 pixeles. Entonces tendremos que aumentarle, a cada uno, la mitad de la cantidad de pixeles que le aumentamos al Ancho del gadget, que son 15 pixeles. Luego cada uno deberá quedar con un ancho de 140 pixeles.

    • En caso contario, disminuyendo el ancho del gadget, haremos lo mismo, pero restando pixeles.

    • El Ancho del fondo transición y el Ancho del fondo fijo deben ser iguales, y entre ambos deben sumar 20 pixeles menos que el Ancho del gadget.
10 comentarios
Etiquetas: , , ,

18.1.11

Cambiar color de fondo de gadgets o widgets


Podríamos, para darle un mejor diseño a nuestro blog, ponerle al fondo de los gadgets un color diferente al que nos es dado por defecto. En este tutorial veremos el procedimiento.

1.- Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Localizamos, en las plantillas antiguas, un código como éste:

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='TITULO' type='HTML'/>
<b:widget id='HTML1' locked='false' title='TITULO' type='HTML'/>
<b:widget id='Followers1' locked='false' title='TITULO' type='Followers'/>
<b:widget id='HTML2' locked='false' title='TITULO' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='TITULO' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='TITULO' type='Profile'/>
</b:section>
      </div>

...y en las plantillas nuevas un código como éste:

<b:section-contents id='sidebar-right-1>
<b:widget id='HTML3' locked='false' title='TITULO' type='HTML'/>
<b:widget id='HTML1' locked='false' title='TITULO' type='HTML'/>
<b:widget id='Followers1' locked='false' title='TITULO' type='Followers'/>
<b:widget id='HTML2' locked='false' title='TITULO' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='TITULO' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='TITULO' type='Profile'/>
</b:section-contents>

En los códigos anteriores están identificados los widgets que tenemos en la sidebar. Les ponemos títulos para distinguirlos más fácilmente; después los borramos, si queremos.

3.- Localizamos esta etiqueta: ]]></b:skin>, y antes de la misma pegamos, por cada widget que tengamos en la sidebar (en nuestro ejemplo tenemos seis), este código:

#HTML1{
background: #XXXXXX;
}

El resaltado en verde es la identificación de cada widget, y es donde debemos poner los resaltados en verde del código anterior. El resaltado en rojo es el código del color que le daremos al fondo de cada widget.

4.- En nuestro ejemplo el código que debemos pegar antes de: ]]></b:skin>, debería quedarnos así:

#HTML3{
background: #XXXXXX;
}
#HTML1{
background: #XXXXXX;
}
#Followers1{
background: #XXXXXX;
}
#HTML2{
background: #XXXXXX;
}
#BlogArchive1{
background: #XXXXXX;
}
#Profile1{
background: #XXXXXX;
}

Debemos ser cuidadosos con las identificaciones de los widgets (resaltado en verde); Éstas deben ser exactamente iguales en los códigos de los puntos 2 y 4, teniendo en cuenta mayúsculas y minúsculas. Si no es así, los colores no serán interpretados.


14 comentarios
Etiquetas: , , ,
Suscribirse a: Entradas ( Atom )