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;'/>



21 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Anónimo #

oye amigo, tengo este problema, cuando entro a edicion html y busco el primer código que pusiste, el buscador no lo encuentra, cómo le hago para encontrarlo?

Comentario escrito por Staff : #

Muchas gracias!!
El tutorial me sirvió muchisimo!

Comentario escrito por ewwew : #

pues yo tampoco tengo ningún código de esos u.u

Comentario escrito por Pedro Pablo Pachón : #

José Raúl, el código que se debe localizar es el primero (punto2), los otros dos hay que ponerlos antes; si no encuentra ese código posiblemente no lo está buscando correctamente.

En el siguiente tutorial se explica cómo buscar un código dentro del editor HTML:

http://bloguermast.blogspot.com/2013/07/nuevo-editor-html-de-blogger.html

Saludos.

Comentario escrito por El Salvador 503 : #

Excelente!! tu blog es lo maximo! me a servido muchisimo, gracias por compartir!!!

Comentario escrito por Pedro Pablo Pachón : #

El Salvador 503 ¡Saludos!

Comentario escrito por ♥♥ \\ ƨσσƒι - кυη // ♥♥ : #

Hola, bueno yo me estoy poniendo nerviosa porque llevo media hora intentando hacerlo y a la hora de guardar me dice algo de que el gadget1 no está en el menú, o algo así *WEJE NO SÉ MUCHO DE INGLÉS* ¿Me podrías ayudar? D: Es urgente>:c

Comentario escrito por Pedro Pablo Pachón : #

♥♥ \\ ƨσσƒι - кυη // ♥♥, el error que te aparece indica que ya hay una sección con la identificación gadget-1. Debido a que esas identificaciones son únicas no puede haber otra sección con la misma identificación. Lo que debes hacer es cambiar, en la primera parte del código, en BlogGadget1 y gadget-1, el número 1 por otro (2, 3, 4, 5, etc.) y en la segunda parte del código poner el número consecutivo correspondiente, y pruebas con la Vista previa hasta que no te salga el error.

Saludos.

Comentario escrito por Patri Caos : #

Muchísimas gracias! Me ha servido de mucha ayuda :)

Comentario escrito por Pedro Pablo Pachón : #

Saludos Patri Caos!

Comentario escrito por Unknown : #
Este comentario ha sido eliminado por el autor.
Comentario escrito por Unknown : #

Hola,segui los pasos que sugeriste pero no logro insertar contenido arriba de las entradas.Sera posible que me ayude,tengo un blog y lo estoy configurando pero no logro hacer ese paso.

Basicamente lo que quiero es tener este diseño
http://veronica-soratemplates.blogspot.com/
Veras que hay dos imagenes bastantes grande y luego 5 de forma pequeña abajo de estas y luego las entradass,me pregunto si me puedes ayudar con esto,

Actualmente mi blog esta en edicion pero asi es como se ve,
http://mangartistscolor.blogspot.com/

Comentario escrito por Pedro Pablo Pachón : #

Manga Artists, en este tutorial se explica cómo poner gadgets por pares, encima de las entradas, no de la sidebar. Para que los gadgets queden encima de las entradas y de la sidebar se deben poner dentro de la cabecera, y el tutorial es éste:

http://bloguermast.blogspot.com/2013/04/anadir-gadgets-en-cabecera-de-blogger.html

Saludos.

Comentario escrito por Unknown : #

Hola. Tengo un problemilla con esto que no se como solventar: Al buscar el código no encuentro donde acaba, es decir no encuentro el . si tengo lo demás pero no ésto. Si quiero poner dos widgets arriba no tengo ningun problema pero si los quiero poner debajo del post, no cosnigo ver donde los tengo que poner. Me podéis ayudar? El código que tengo es el siguiente:



Muchísimas gracias!!

Comentario escrito por Unknown : #

Veo que no sale el codigo. No encuentro donde se acaba el b:section. Después del código donde se tiene que poner arriba o abajo tengo otras un b:includable y un b:if. No sé si ayuda de mucho esto.
Repito muchas gracias por todo !

Comentario escrito por Unknown : #

Veo que no sale el codigo. No encuentro donde se acaba el b:section. Después del código donde se tiene que poner arriba o abajo tengo otras un b:includable y un b:if. No sé si ayuda de mucho esto.
Repito muchas gracias por todo !

Comentario escrito por Unknown : #

¡ Funciona fenomenal! Pero me gustaría poner 3 gadget y que estos no me queden alineados con los banners de la barra lateral

¿Cómo puedo hacer?

Comentario escrito por Unknown : #

¡ Funciona fenomenal! Pero me gustaría poner 3 gadget y que estos no me queden alineados con los banners de la barra lateral

¿Cómo puedo hacer?

Comentario escrito por Unknown : #

Cris García,

Al final del tutorial, en el punto seis, agregué el código para poner tres gadgets.

Saludos.

Comentario escrito por Unknown : #

Tengo problemas con el par de gadgets inferiores. el 3 y 4... los dos de arriba los pude incluir siguiendo sus instrucciones sin ningun tipo de problema. Pero no se que estoy haciendo mal ;(

Comentario escrito por Unknown : #

Pipe Lemus, específicamente ¿cuál es el problema?
Saludos.

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.