Mostrando entradas con la etiqueta gadgets arriba de las entradas. Mostrar todas las entradas
Mostrando entradas con la etiqueta gadgets arriba de las entradas. Mostrar todas las entradas

5.4.13

Añadir gadgets arriba y debajo de las entradas



Podemos añadir pares de gadgets encima o debajo de las entradas, habilitando las secciones correspondientes, ya que, por defecto, Blogger nos permite poner gadgets encima o debajo de las entradas, arrastrándolos desde otra sección, pero únicamente de a uno.

Si vamos a:

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

...veremos la sección correspondiente a las entradas así:

Sección entradas de Blogger

Y habilitando la opción para añadir pares de gadgets encima y debajo, la veremos así:

Añadir pares de gadgets encima y debajo de las entradas


Habilitar la opción Añadir un gadget, por pares

1.- Vamos a:

Diseño ► 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='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>


3.- Para habilitar la opción Añadir un gadget, por pares, encima de las entradas, pegamos, antes del anterior código, el siguiente:

<div id='BlogGadget1' style='width: 50%; float: left;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 50%; float: right;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>


4.- Para habilitar la opción Añadir un gadget, por pares, debajo de las entradas, pegamos, después del código indicado en el punto dos, el siguiente:

<div id='BlogGadget3' style='width: 50%; float: left;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 50%; float: right;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>


5.- Guardar plantilla.

Entrada con un par de gadgets arriba y otro par abajo, todos del tipo Imagen:

con pares de gadgets arriba y abajo

6.- Para añadir tres gadgets (respuesta para Cris García), el código es el siguiente:

<div id='BlogGadget1' style='width: 33%; float: left;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 33%; float: right;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div id='BlogGadget3' style='width: 33%; float: right;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>