JMiur [E]

Leer el post sobre elementos adicionales en el diseño de la plantilla que publica El escaparate de Rosa me permite ampliar un par de respuestas a problemas concretos que, tal vez, nos sirvan a todos.

Empecemos con ese artículo ¿cuál es el tema?

Hay veces en que queremos añadir algún nuevo elemento en alguno de los grandes bloques en que Blogger divide las plantilla y no podemos, algo parece impedirlo. Esos grandes bloques que Blogger llama secciones están entre las etiquetas <b:section> y </b:section> y por defecto son: el header, el área de posts, la sidebar y el footer [más información]


Lo normal es que no tengamos inconvenientes cuando queremos agregar elementos salvo si lo queremos hacer en el header o en el área de posts, allí, hay veces en que la plantilla no lo admite ¿Por qué? Porque el código así lo indica por lo tanto, debemos ir a la Edición HTML, buscarlo y cambiarlo.

Rosa dice:

Para añadir más elementos en el header (cabecera) localizamos esta línea de código:
<b:section  class='header' id='header' maxwidgets="1" showaddelement="no">
y la sustituimos por esta otra:
<b:section  class='header' id='header' maxwidgets="2" showaddelement="yes">
Para añadir más elementos en la sección de entradas (main) localizamos la línea de código correspondiente:
<b:section class='main' id='main' showaddelement='no'>
y la sustituimos por esta otra:
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>
Como se ve, basta cambiar el valor del parámetro showaddelement de no a yes y poner en el parámetro maxwidgets el número máximo de elementos a ubicar.

En realidad, este último parámetro no es obligatorio sino optativo por lo tanto, si directamente no lo ponemos, nos evitaremos el trabajo de tener que cambiarlo y la cantidad será ilimitada:
<b:section class='main' id='main' showaddelement='yes'>
Si tuviéramos problemas con las otras secciones haríamos lo mismo aunque, por lo general no tienen esta restricción y si disponemos de una plantilla con una sección especial llamada crosscol, podemos repetir el mismo proceso.

¿Y si queremos crear otras secciones o nuestra plantilla no las tiene? No es una pregunta retórica, hay algunas que carecen de la sección del footer, por ejemplo. En ese caso, simplemente vamos a Edicion HTML de la plantilla y sin expander los artilugios, buscamos dónde ponerla:
<div id='nombreUnico'>
<b:section id='otroNombreUnico' class='unaClase' showaddelement='yes'>
</b:section>
</div>
Por supuesto, a eso habrá que agregarle las propiedades CSS correspondientes y es por eso que, lo lógico es utilizar los atributos ID y class recordando que el primero, siempre debe ser único, es decir, no puede haber dos elementos con el mismo ID dentro de la misma página. Luego, dentro de <b:skin> </b:skin> colocaremos las declaraciones y propiedades:

#nombreUnico { ....... }
#otroNombreUnico { ....... }
.unaClase { ....... }

¿Cuales son esas propiedades? Dependerá de cada caso. Una alternativa, por ejemplo, es copiar las que tenga alguna de las otras secciones.

Hasta aquí todo perfecto pero, una de las preguntas recurrentes es: ¿por qué no puedo agregar dos elementos de cierto tipo? Blogger no nos deja, nos dice que ya existe uno y no podemos poner otro. El caso más común es el elemento Archivos peor también ocurre con los elementos Header y Profile ¿Y para que quiero tener dos elementos iguales? Eso ya no tiene respuesta pero, por ejemplo, podemos tener uno de tipo desplegable (hierarchy) y otro que sea una caja (drop-menu) para ubicarlos en diferentes partes de la página [más información]

Nuevamente nos topamos con ciertas incongruencias; no nos deja hacerlo desde Elementos de la página pero si vamos a Edición HTML de la plantilla, nada lo impide. Igual que en los casos anteriores, para trabajar con más comodidad dejamos desmarcada la opción Expandir artilugios y buscamos la siguiente línea:
<b:widget id="BlogArchive1" locked="false" title="Blog Archive" type="BlogArchive">
La seleccionamos, la copiamos y la pegamos debajo, luego podremos reubicarla.

Ahora, sólo falta que cambiemos el ID por cualquier otro (lo obvio es BlogArchive2) y el título (para poder localizarla rápidamente). Entonces, quedaría algo así:
<b:widget id="BlogArchive2" locked="false" title="COPIA ARCHIVOS" type="BlogArchive">
Guardamos la plantilla y ya podemos ir a la solapa de Diseño, mover o editar el elemento como cualquier otro.

Trabajar directamente sobre el código HTML no es algo que le guste hacer a nadie pero muchas veces es inevitble porque los ajustes deben hacerse allí. Lo mismo ocurre cuando nos topamos con ciertos errores. Este es el caso de la última de las consultas.

El problema planteado es así: se subió una imagen y se la colocó como fondo en el header del blog. Por el motivo que fuera, se la quiere eliminar, se usan todos los métodos "normales" y no hay caso, la imagen permanece allí, probablemente, por algún error interno el mismo Blogger ¿Qué hacemos?

Como vimos antes, el header, por defecto sólo admite un elemento:
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
Así que lo cambiamos para que admita más elementos:
<b:section class="header" id="header" maxwidgets="3" showaddelement="yes">
Guardamos, vamos a Elementos de la plantilla y hacemos click en Editar.

Sin que nos tiemble la mano, lo eliminamos.

Por fin nos hemos deshecho de la imagen rebelde. Ahora, basta hacer click en Agregar un elemento, seleccionar Header y hacer de cuenta que nada ha pasado.

30 comentarios:

Anónimo  

Que buen aporte, la verdad que Usted es un Indiana Jones de los jeroglíficos de blogger, ya que no entiendo porque complican tanto las cosas.

Saludos y gracias... buen post.

Responder
JMiur  

Jajajaja, si es por edad, ando cerca de Indiana Jones :D

Responder
Aponcho  

JMiur
Espero me puedas dar una mano con este "pequeño" problemilla.
En algún momento (ve tu a saber cuando, ya ni recuerdo) cambie el header y le incruste una imagen (en edición HTML). Hasta ahí ningún problema, puedo verla perfectamente, lo raro comienza cuando entro a un post (cualquiera) y me aparece otra imagen, aparentemente la que me mostraría por defecto la plantilla. Sabes como puedo solucionarlo?
Puedes verlo aquí... www.aponcho.com
Saludos!
Aponcho

Responder
JMiur  

APoncho:

Es difícil darle una respuesta exacta porque sólo puedo ver tu blog online pero no la plantilla. En principio, te diría que seguramente, hay dos lugares donde debería estar esa imagen nueva.

Fíjate si dentro del widget header encuentras algo así:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
LA IMAGEN NUEVA
<b:else/>
<a expr:href='data:blog.homepageUrl'>
AQYUI FALTARIA PONERLA
</a>
</b:if>

Ese IF coloca la imagen del header si estás en la página principal (data:blog.homepageUrl) y si no estás allí sino en otra página cualquiera, debería colocar la misma imagen y un enlace que permite volver a la página principal. Como seguramente falta, muestra un texto u otra imagen.

Allí, en esa parte es donde también debes agregar la nueva imagen; es decir, tiene que estar en ambos lados.

Si no encuentras la ubicación me envias por correo el código del widget del header y te lo indico.

Responder
Aponcho  

Gracias JMuir
Efectivamente es esa la manera de incluir la imagen pero...
...ahora tengo las dos, la mio y la otra.
:p

Responder
JMiur  

Acabo de recibir tu plantilla por mail y ya te he contestado.

Responder
Aponcho  

JMuir
Muchas gracias por tu tiempo.
La solución era simple pero el problema complejo.
Aponcho
Gracias, gracias, gracias, gracias....

Responder
JMiur  

Me alegra que se haya resuelto, aponcho :)

Responder
Anónimo  

tengo un problemita: coloque dos elementos HTML/Javascript en mi blog (uno en el sidebar y el otro en el footer). Son dos imágenes mapeadas en dreamweaver con distintos links. El problema es que atomaticamente los links del primer elemento se copian al segundo, y así los de este segundo desaparecen y se reemplazan por los del primero. Tenés idea de cómo hacer para q cada elemento conserve sus links? (nota: en el código HTML figuran los links correctos q van en cada elemento, pero luego en el blog estos se reemplazan).
Grcias!!!
Lucía

Responder
JMiur  

Debería ver el código y verlo funcionando. En principio, eso no debería pasar. Es raro.

Responder
Anónimo  

una pregunta, como pones los page rank asi?? pero mas que nada lo que me interesaria si me podes ayudar, es en como poner solapas como hiciste vos (inicio, blogger... etc)

muy buena tu pagina!

Responder
JMiur  

Lo del Page Rank no lo comprendí, explicame un poco más a que te referís.

Lo de los menús está explicado en este post.

Responder
Administrador  

Hey muchas gracias. Excelente el aporte.

Responder
no  

hay plantillas que no admite mover un elemento al header, un menu css por ejemplo....
gracias JMiur!

Responder
JMiur  

Todas lo admiten si se colocan los parámetros adecuados:
maxwidgets="5" showaddelement="yes"

o showaddelement="yes" y se elimina el parámetro maxwidgets para no limitar la cantidad.

Responder
AleX  

hola kiero saber como puedo agregar un elemento a mi pagina lo que pasa es que leí eso de arriba y no lo entendi mucho kiero agregar un reproductor de musica y se q se tiene q hacer por el html pero no se en dond hay q copiar el codigo si me pudieras ayudar con eso me serias de bastante ayuda no he podido agregar nada de elementos a mi blog porque nose solo los gadgets q se pueden agregar de google..

Responder
JMiur  

Para agregar un reproductor, primero, debes tener el código. Eso, te lo da el servicio que vayas a usar.

Ese código se debe insertr en un elemento de Blogger. Para eso, hay que ir a Diseño y en la primera ventana, agregar un gadget donde quieras, por ejemplo la sidebar.

De la lista que aparece, seleccionas HTML/JavaScript que abrirá un editor similar al editor de posts. allí pegas el código y luego lo guardas.

Responder
aaroxn  

hola soy algo nuevo en este ambiente quiero saber como hacer para divider elblog en secciones digamos libros musica videos sin que se revuelvan los post

Responder
JMiur  

Lo único que puedes hacer es asignarles etiquetas y de tal forma, poder listar todos los que se correspondan con una de ellas.

Responder
José Quispecahuana Sifuentes  

Hola: No se si alguien me puede ayudar: Hice un post de Slideshare a mi blog, pero no se visualiza, está el logo de animación o imagen pero no da opcion a abrir o visualizar, en el titulo esta el enlace a slidesshare, me digeron que en otra máquina se visualiza bien y con sonido, tengo el IE8. La direccion del blog es: http://iotsalud.blogspot.com

Responder
JMiur  

José: No he visto problemas para visualizarlo ni en Firefox ni en Internet Explorer 8.

Responder
José Quispecahuana Sifuentes  

Jmiur:
Gracias por el comentario.
José.

Responder
JMiur  

Fíjate si no es un problema en la configuración del mismo IE8 que impide que se cargue el archivo de Flash que es el que muestra el Slideshare.

Responder
José Quispecahuana Sifuentes  

JMiur:Baje un componente o algo asi de Flahs y ahora puedo ver bien.
Gracias.

Responder
Anónimo  

jmihur, hola, veo que tú también tienes en el footer "directorios". clicas y se abren los banners. me gustaría enviarte mi plantilla y el widget de los banners para que veas por qué no funciona. si encuentro tu dirección por aquí, te lo envío.

Responder
JMiur  

lk:
Hay un script colocado justo antes de <head>

<script src='http://www.adweblink.com/rot.php?cod=4982'/>

Quitalo de ahi y colócalo antes de </head>

De ese modo se cargará el script que te falta. Antes de <head> no se colocan etiquetas.

Responder
Anónimo  

Hola JMiur estuve probando agregar 3 secciones una al lado de la otra para poner listas de enlaces en cada una pero no he encontrado forma de ponerlas una junto a la otra. Aqui te dejo parte del template http://tinypaste.com/d7f501

Responder
JMiur  

Tendría que verlo fncionando para decirte.

float:center; no existe. Las flotaciones son left right o none y no hay otras.

Responder
Anónimo  

mmm ya lo soluciones dandole a los 3 posiciones absolutas y margen a la izquierda para que no quedaran uno encima del otro.
http://animetopsubs.blogspot.com/ aqui puedes ver como quedo.

Ahora me surge otra idea http://animetopsubs.blogspot.com/p/indice.html aqui tengo un indice usando json para mostrar un listado de entradas con una etiqueta en especifico. Pero quiero agregarle un buscador (que busque dentro de ese indice solamente) por coincidencia de palabras.

Gracias por todo.

Responder
Borja  

Gracias!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR