related_results_labels({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$georss":"http://www.georss.org/georss","id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603"},"updated":{"$t":"2009-12-28T20:07:17.317+01:00"},"title":{"type":"text","$t":"Tuneando el blog"},"subtitle":{"type":"html","$t":"Trucos para blogger"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/posts/default"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/-/plantillas?alt\u003djson-in-script\u0026max-results\u003d50"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/search/label/plantillas"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"24"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"50"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-7043651677113195885"},"published":{"$t":"2009-06-04T13:32:00.004+02:00"},"updated":{"$t":"2009-06-04T13:47:02.070+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"Cambiar de plantilla sin perder nada -Apéndice-"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eHace algún tiempo hice \u003c/em\u003e\u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2008/08/cambiar-de-plantilla-sin-perder-nada-ms.html\" target\u003d\"_blank\"\u003e\u003cem\u003eesta entrada\u003c/em\u003e\u003c/a\u003e\u003cem\u003e explicando cómo hacerlo.\u003c/em\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cem\u003ePero hoy me ha llegado un correo en el que me preguntaban qué se debe guardar para que al colocar una plantilla nueva en nuestro blog, éste se siga viendo igual una vez haya subido dicha plantilla.\u003cbr /\u003eY ésta ha sido mi respuesta.\u003cbr /\u003e\u003c/em\u003e\u003cbr /\u003ePodríamos decir que un blog se compone de dos partes básicas: El continente y su contenido.\u003cbr /\u003e\u003cbr /\u003eLas entradas y todo lo que contengan, texto, imágenes, enlaces, comentarios, etc. no es necesario tocarlo ya que el contenido está guardado en la memoria de blogger y el continente forma parte de la plantilla que vas a colocar.\u003cbr /\u003e\u003cbr /\u003eLa sidebar tiene dos tipos de gagdets, aquellos cuyo contenido está relacionado con las entradas o el blog en si, y aquellos cuyo contenido modificamos/configuramos/insertamos nosotros para que muestren alguna cosa.\u003cbr /\u003e\u003cbr /\u003eSi añades el gadget Archivo, el solito te muestra el archivo del blog, sin que debas hacer nada para que lo haga. Lo mismo sucede con las etiquetas, el perfil, los seguidores, el buscador...en fin, con todos aquellos que simplemente hayamos añadido y aceptado sin tener que modificar apenas nada, como mucho el título y poco más.\u003cbr /\u003e\u003cbr /\u003ePor este motivo, aunque nos diga que se van a eliminar, porqué la plantilla que vamos a poner no los incluye, no importa. Se acepta que se eliminen y una vez subida la plantilla nueva se vuelven a colocar mediante Añadir un gadget y ¡Listo!.\u003cbr /\u003e\u003cbr /\u003ePero los gadgets Texto, Imagen, HTML/Javascript, Listas de Vínculos o de blogs o de cualquier otra cosa, ¡en fin!, todos aquellos gadgets en los que antes de darle a guardar tengamos que añadir alguna cosa o configurarlos de alguna manera, si se eliminan, al colocarlos de nuevo estarán vacios y habrá que volver a colocarle los enlaces, los códigos, etc. Por ésto se ha de copiar el código, \u003cstrong\u003esin expandir,\u003c/strong\u003e del gadget y pegarlo en la nueva plantilla, para que, al subirla, reconozca que los tiene y no los elimine. \u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-7043651677113195885?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/7043651677113195885/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d7043651677113195885","title":"25 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/7043651677113195885"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/7043651677113195885"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2009/06/cambiar-de-plantilla-sin-perder-nada.html","title":"Cambiar de plantilla sin perder nada -Apéndice-"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"25"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-6816957459643333881"},"published":{"$t":"2009-04-21T11:01:00.004+02:00"},"updated":{"$t":"2009-04-21T12:05:39.003+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"código HTML"},{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"Ubicando columnas"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eUna de las columnas de mi blog se cae.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eHe añadido un segunda sidebar pero sale fuera de lugar.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eLa columna que he añadido sale debajo / al final de las entradas.\u003c/em\u003e\u003c/div\u003e\u003cbr /\u003eEstas frases y otras similares me las han enviado varias veces.\u003cbr /\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eTenemos un blog con una plantilla original de blogger, que solo tienen dos columnas, la de las entradas y la sidebar y queremos añadir otra.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSeguimos las instrucciones que encontramos en algún blog de ayuda, (éste o cualquier otro), pero el resultado final no es el esperado ya que, al ver el blog, vemos que una de las dos columnas se ha colocado debajo de la de las entradas.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eNormalmente, salvo rarísimas excepciones, esto se produce cuando la suma de las medidas de todo lo incluido en las 3 columnas supera, aunque solo sea en 1 pixel, a la del total de la zona útil del blog.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eMe explico: La mayoría de plantillas de blogger, excepto la harbor, la snapshot y la herbert, (creo), que usan todo el espacio disponible y de las que os hablaré al final, tan solo utilizan una cantidad concreta del espacio total de una pantalla. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí, si tu pantalla tiene una resolución de 1200 pixels y la zona útil del blog solo usa 960 de esos pixels, verás a ambos lados un fondo distinto. Un ejemplo de esto puedes verlo \u003ca href\u003d\"http://laeulalia-muestra.blogspot.com/\" target\u003d\"_blank\"\u003eaquí.\u003c/a\u003e (Pincha sin miedo, se abrirá en otra ventana).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEn ese blog que enlazo, hay un fondo general, el azul oscuro. La zona útil de ese blog es todo lo comprendido en el fondo rosa.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEse blog tiene un ancho fijo de 1.100 píxels. Si tu pantalla tiene una resolución inferior no llegarás a ver la zona azul oscuro, pero si la resolución es superior si podrás verla, aunque quizá debas abrirlo a pantalla completa.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eComo podrás ver, si has pinchado en el enlace, la zona útil de ese blog está enmarcada, así como las 3 columnas, las cuales están algo separadas entre si.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003ePues bien, en el caso concreto de ese blog, las medidas de las columnas son las siguientes:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eMain, que es la zona de las entradas, mide 440 pixels, una de las dos columnas laterales mide 235 pixels y la otra 225.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSumamos estas 3 cantidades: 440 + 225 + 235 y nos da 900 píxels. ¿Donde están los 200 restantes? \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eBueno, estos 200 se reparten entre los márgenes derecho e izquierdo, los márgenes entre columnas y los marcos.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003ePorqué esos marcos también cuentan. Ocupan unos cuantos píxels cada uno, a derecha e izquierda, que no podemos olvidar.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eA veces, cuando recibo ese tipo de consultas que comentaba al principio, añaden que han seguido las instrucciones al pie de la letra y efectivamente, lo han hecho, pero quizá en el blog de la persona que me consulta ya hay algún marco incluido y las instrucciones no lo tenían en cuenta.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí, al aplicar las medidas standar que dejamos, esos marcos hacen que el blog se descontrole.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eTambién una imagen o gadget colocados en la sidebar, o en una entrada, que ocupe más espacio del disponible puede ser causa de este descontrol.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePorqué si el total de lo incluido en un blog no dispone de suficiente espacio para mostrarse correctamente, el navegador se busca la vida para enseñarlo y, logicamente, lo coloca al final, debajo de las entradas.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eLa solución más habitual en estos casos es reducir algunos píxels alguna de las 3 medidas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eÉstas se encuentran en la línea del width del código CSS de cada columna.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa definición más habitual de cada una suele ser: #main o #main-wrapper para la columna de las entradas y #sidebar o #sidebar-wrapper y #newsidebar o #newsidebar-wrapper, para las columnas laterales.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY revisar que éstas no contengan nada que sobrepase los límites establecidos.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eUn gadget, por ejemplo el feedjit, que mida de ancho más que el espacio disponible en el elemento de la columna donde está colocado, saldrá hacia la derecha, aunque quizá no lo veamos, y empujará al resto del blog.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003ePorqué tampoco miden lo mismo los elementos que las columnas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn el blog de muestra que he enlazado podeis verlo claramente. La zona útil de los elementos es tan solo lo que tiene fondo gris, mientras que cada columna lateral comprende el marco de la columna, el fondo de la misma, el marco del elemento y el fondo del mismo, con lo que lo que contenga ese elemento debe medir menos que el total de la columna. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePor poneros un ejemplo práctico, el feedjit que hay en la columna de la derecha del blog de muestra mide tan solo 205 píxels y ya veis lo justito que encaja. Los 20 píxels que quedan hasta los 225 que mide la columna son el fondo que se ve de la propia columna, los marcos y los, más o menos, dos pixels de padding (separación del contenido a los márgenes) que hay.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEn cuanto a las 3 plantillas de las que os hablo al principio, que ocupan toda la zona disponible, (éste blog en el que estás es un ejemplo de la harbor), dichas medidas vienen expresadas en %.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn estos casos el main ocupa el 48% y cada columna lateral el 24%, pero si se incluyen marcos se debe reducir ligeramente estas cifras, o las columnas quedarán pegadas entre si y cabe la posibilidad de que alguna se caiga. (Sucedió en este blog cuando le añadí la segunda columna).\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-6816957459643333881?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/6816957459643333881/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d6816957459643333881","title":"6 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/6816957459643333881"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/6816957459643333881"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2009/04/ubicando-columnas.html","title":"Ubicando columnas"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-3014951853642007517"},"published":{"$t":"2009-02-01T13:42:00.006+01:00"},"updated":{"$t":"2009-02-01T14:51:57.882+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"código HTML"},{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"post-footer"}],"title":{"type":"text","$t":"El pie de las entradas o ¿porqué no se ve el autor, o los comentarios, o...?"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eEste problema me lo han consultado algunas veces.\u003cbr /\u003eAnte todo hay que asegurarse de que no es problema de configuración. ¿Como? De dos formas:\u003cbr /\u003ePrimera: En Configuración puedes asegurarte de que se van a mostrar estos elementos.\u003cbr /\u003eEl lápiz de edición rápida y el sobrecito de envio de entradas: En el apartado Básico, deja en Si las dos preguntas que hacen al respecto.\u003cbr /\u003eEn el apartado Formato eliges la cantidad de entradas que se van a ver en la página principal, y por ende en las demás páginas, y la forma en que se va a mostrar la fecha y la hora.\u003cbr /\u003eEn el apartado Comentarios, lo primero que aparece es la opción de Mostrar/Ocultar.\u003cbr /\u003eAsegúrate de que está marcada la opción Mostrar. El resto de opciones va a tu gusto.\u003cbr /\u003e\u003cbr /\u003eSegunda: En el gadget de las entradas puedes decidir qué más se va a mostrar, o no, al pie de las entradas. Pinchando en Editar de ese gadget, y marcando o desmarcando las opciones que hay.\u003cbr /\u003e\u003cbr /\u003eSi todo esto está bien, pero sigue sin verse nada o casi nada al pie de la entrada, entonces has de asegurarte de que el código es correcto.\u003cbr /\u003ePara ello, pincha en Edición de HTML y busca esta línea: \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;div class\u003d'post-footer'\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003eDebajo hay tres zonas, post-footer-line-1, post-footer-line-2 y post-footer-line-3.\u003cbr /\u003eEn alguna de estas tres partes ha de haber los códigos correspondientes a las cosas que se muestran al pie de las entradas y que son éstas: (que estén en una u otra de las 3 líneas, depende de la posición de las mismas en el gadget).\u003c/div\u003e\u003cbr /\u003eEl autor de las entradas:\u003cbr /\u003e\u003cspan id\u003d\"fullpost\"\u003e\u003cbr /\u003e\u0026lt;span class\u003d'post-author vcard'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:top.showAuthor'\u0026gt;\u003cbr /\u003e\u0026lt;data:top.authorLabel/\u0026gt;\u003cbr /\u003e\u0026lt;span class\u003d'fn'\u0026gt;\u0026lt;data:post.author/\u0026gt;\u0026lt;/span\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/span\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003cbr /\u003eLa hora de publicación:\u003cbr /\u003e\u003cspan id\u003d\"fullpost\"\u003e\u003cbr /\u003e\u0026lt;span class\u003d'post-timestamp'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:top.showTimestamp'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:post.url'\u0026gt;\u003cbr /\u003e\u0026lt;a class\u003d'timestamp-link' expr:href\u003d'data:post.url' rel\u003d'bookmark' title\u003d'permanent link'\u0026gt;\u003cbr /\u003e\u0026lt;abbr class\u003d'published' expr:title\u003d'data:post.timestampISO8601'\u0026gt;\u003cbr /\u003e\u0026lt;data:post.timestamp/\u0026gt;\u0026lt;/abbr\u0026gt;\u0026lt;/a\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/span\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003cbr /\u003eLos comentarios\u003cbr /\u003e\u003cspan id\u003d\"fullpost\"\u003e\u003cbr /\u003e\u0026lt;span class\u003d'post-comment-link'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:blog.pageType !\u003d \"item\"'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:post.allowComments'\u0026gt;\u003cbr /\u003e\u0026lt;a class\u003d'comment-link' expr:href\u003d'data:post.addCommentUrl' expr:onclick\u003d'data:post.addCommentOnclick'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:post.numComments \u003d\u003d 1'\u0026gt;1 \u0026lt;data:top.commentLabel/\u0026gt;\u0026lt;b:else/\u0026gt;\u0026lt;data:post.numComments/\u0026gt; \u0026lt;data:top.commentLabelPlural/\u0026gt;\u0026lt;/b:if\u0026gt;\u0026lt;/a\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/span\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003cbr /\u003eLos Enlaces a esta entrada:\u003cbr /\u003e\u003cspan id\u003d\"fullpost\"\u003e\u003cbr /\u003e\u0026lt;!-- backlinks --\u0026gt;\u003cbr /\u003e\u0026lt;span class\u003d'post-backlinks post-comment-link'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:blog.pageType !\u003d \"item\"'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:post.showBacklinks'\u0026gt;\u003cbr /\u003e\u0026lt;a class\u003d'comment-link' expr:href\u003d'data:post.url + \"#links\"'\u0026gt;\u003cbr /\u003e\u0026lt;data:top.backlinkLabel/\u0026gt;\u0026lt;/a\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/span\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003cbr /\u003eEl sobrecito de envío de entradas:\u003cbr /\u003e\u003cspan id\u003d\"fullpost\"\u003e\u003cbr /\u003e\u0026lt;span class\u003d'post-icons'\u0026gt;\u003cbr /\u003e\u0026lt;!-- email post links --\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:post.emailPostUrl'\u0026gt;\u003cbr /\u003e\u0026lt;span class\u003d'item-action'\u0026gt;\u003cbr /\u003e\u0026lt;a expr:href\u003d'data:post.emailPostUrl' expr:title\u003d'data:top.emailPostMsg'\u0026gt;\u003cbr /\u003e\u0026lt;img alt\u003d'' class\u003d'icon-action' src\u003d'http://www.blogger.com/img/icon18_email.gif'/\u0026gt; \u0026lt;/a\u0026gt;\u003cbr /\u003e\u0026lt;/span\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003cbr /\u003eEl lápiz de edición rápida:\u003cbr /\u003e\u003cspan id\u003d\"fullpost\"\u003e\u003cbr /\u003e\u0026lt;!-- quickedit pencil --\u0026gt;\u003cbr /\u003e\u0026lt;b:include data\u003d'post' name\u003d'postQuickEdit'/\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003cbr /\u003eLas etiquetas:\u003cbr /\u003e\u003cspan id\u003d\"fullpost\"\u003e\u003cbr /\u003e\u0026lt;span class\u003d'post-labels'\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:post.labels'\u0026gt;\u003cbr /\u003e\u0026lt;data:postLabelsLabel/\u0026gt;\u003cbr /\u003e\u0026lt;b:loop values\u003d'data:post.labels' var\u003d'label'\u0026gt;\u003cbr /\u003e\u0026lt;a expr:href\u003d'data:label.url' rel\u003d'tag'\u0026gt;\u0026lt;data:label.name/\u0026gt;\u0026lt;/a\u0026gt;\u003cbr /\u003e\u0026lt;b:if cond\u003d'data:label.isLast !\u003d \"true\"'\u0026gt;,\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/b:loop\u0026gt;\u003cbr /\u003e\u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/span\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003cp align\u003d\"justify\"\u003e\u003cbr /\u003eAsí que, ya sabes, si te ha desaparecido algo de ésto, mira si estos códigos están en tu plantilla. (Pinchando en Como hacerlo, al final, podrás verlos todos).\u003cbr /\u003eSi alguno no estuviera, cópialo y pégalo debajo de\u003cbr /\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;div class\u003d'post-footer-line post-footer-line-1'\u0026gt;\u003c/span\u003e\u003c/strong\u003e\u003cbr /\u003eHaz vista previa y guarda plantilla.\u003cbr /\u003eLuego podrás reorganizarlo editando el gadget.\u003cbr /\u003e\u003c/p\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-3014951853642007517?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/3014951853642007517/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d3014951853642007517","title":"14 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/3014951853642007517"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/3014951853642007517"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2009/02/el-pie-de-las-entradas-o-porque-no-se.html","title":"El pie de las entradas o ¿porqué no se ve el autor, o los comentarios, o...?"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"14"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-7082801524319444464"},"published":{"$t":"2009-01-29T20:25:00.002+01:00"},"updated":{"$t":"2009-01-29T21:32:49.805+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"fondo"},{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"Poner un  fondo personal en un blog"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eEsta es una pregunta que me hacen a menudo: ¿Como puedo poner mi propia imagen en el fondo de mi blog?\u003cbr /\u003e\u003cbr /\u003eEn algunos blogs he visto un truco para hacerlo usando un gadget HTML, pero a mi entender, este truco no es el mejor y te explicaré porqué creo que eso es así.\u003cbr /\u003e\u003cbr /\u003eCuando entras en cualquier página o blog, lo que ves es lo que \"leen\" los navegadores en el código fuente de esa página.\u003cbr /\u003eY te lo muestran en el mismo orden en que lo leen.\u003cbr /\u003e\u003cbr /\u003eLa prueba más palpable de eso la tienes en este mismo blog. Cuando entras, primero ves el fondo, luego la cabecera, a continuación la menubar, luego la sidebar de la derecha, después las entradas y por último la sidebar de la izquierda.\u003cbr /\u003eY en las dos columnas laterales los gadgets van apareciendo de arriba a abajo.\u003cbr /\u003e\u003cbr /\u003eHay blogs en los que antes no acaban de cargar todos los gadgets, pueden salirte canas. Sobre todo si esos gadgets han de descargar información de otras páginas.\u003cbr /\u003e\u003cbr /\u003eAsí que si tu colocas tu fondo en un gadget HTML debajo de, pongamos por caso, uno de un reproductor, otro de un slide, otro de un contador, otro de... lo que sea, hasta que el navegador no lee el del fondo puede pasar un cierto lapso de tiempo.\u003cbr /\u003eY eso suponiendo que lo lea bien.\u003cbr /\u003e\u003cbr /\u003eSin embargo, si colocas la dirección de la imagen que quieres que se vea, directamente en el código de tu blog, el navegador será eso lo primero que verá y, por ende, lo primero que mostrará.\u003cbr /\u003e\u003cbr /\u003eBásicamente y salvo excepciones que luego te mencionaré, el fondo se coloca en \u003cstrong\u003ebody {\u003cbr /\u003e\u003c/strong\u003e\u003cbr /\u003eEn la pestaña Diseño, Edición de HTML, bajas un poco y después de todas las Variable name etc. verás esto:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e \u003c/div\u003e\u003cstrong\u003e body {\u003c/strong\u003e\u003cbr /\u003e\u003cstrong\u003e varias líneas de código \u003c/strong\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003e}\u003cbr /\u003e\u003c/strong\u003ey en ese grupito de líneas hay una que dice \u003cstrong\u003ebackground\u003c/strong\u003e.\u003cbr /\u003e\u003cbr /\u003ePues ahí es donde has de colocar la dirección de tu imagen. (Porqué la imagen ha de tener dirección, claro está).\u003cbr /\u003e\u003cbr /\u003ePuede ser que quieras poner una imagen pequeñita que se va a repetir a lo largo y ancho del blog hasta formar un todo, como en este mismo blog, en este caso la línea de background será así: \u003c/div\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cblockquote\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003ebackground: url(la direccion de la imagen);\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/strong\u003e\u003cbr /\u003eSi quieres que la parte útil del blog se deslice por encima será así:\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cblockquote\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003ebackground: url(la dirección de la imagen) fixed;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/strong\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003eEsto de que se deslice por encima del fondo no funciona en todas las plantillas. En ésta, (harbor), por ejemplo, no funciona ya que la zona útil abarca toda la pantalla.\u003cbr /\u003e\u003cbr /\u003eSi quieres poner una imagen grande, que ocupe todo el fondo del blog y que no se mueva, el código del background sería así:\u003cbr /\u003e\u003cbr /\u003e\u003c/div\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cblockquote\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003ebackground: url(la dirección) top center no-repeat fixed;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/strong\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003e¿Que le estás diciendo con ésto?\u003cbr /\u003eQue la coloque arriba de todo, centrada, que no se repita y que no se mueva.\u003cbr /\u003e\u003cbr /\u003eQuizá pienses: ¿Porqué le he de decir que no se repita si va a ocupar toda la pantalla?\u003cbr /\u003ePero la pregunta que deberías hacerte es: ¿Va a ocupar realmente toda la pantalla?\u003cbr /\u003e\u003cbr /\u003ePorqué ante todo has de tener en cuenta que la imagen sea lo suficientemente grande como para ocupar toda la pantalla de \u003cspan style\u003d\"font-size:130%;\"\u003ecualquier pantalla, \u003cspan style\u003d\"font-size:100%;\"\u003eno solo de la tuya\u003c/span\u003e.\u003c/span\u003e\u003cbr /\u003e\u003cbr /\u003ePero esto es bastante difícil, ya que las hay de muchos píxels de ancho, así que vamos a pensar en algo razonable.\u003cbr /\u003eLa mayoría de pantallas son de 1024 pixels de ancho, (las de 17\"), y las hay hasta de más de 1600 píxels, así que si pones una imagen que pueda cubrir la pantalla más ancha que exista, en pantallas normales no se verá entera.\u003cbr /\u003e\u003cbr /\u003e¿Como solucionarlo? Muy fácil: Pones una imagen normalita, y cubres lo que pueda verse en esas pantallas más grandes con un color afín al fondo para que no desentone.\u003cbr /\u003e\u003cbr /\u003eCon lo cual el código del background debería ser así:\u003cbr /\u003e\u003cbr /\u003e\u003c/div\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cblockquote\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003ebackground: $bgcolor url(dirección) top center no-repeat fixed;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/strong\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003e\u003cspan style\u003d\"font-size:180%;\"\u003e¡CUIDADO!\u003c/span\u003e ese $bgcolor es una variable, así que antes de colocarla asegúrate de dos cosas:\u003cbr /\u003e\u003c/div\u003e\u003col\u003e\u003cli\u003eQue esta variable existe en tu código. (Es fácil, es la primera de todas).\u003c/li\u003e\u003cli\u003eQue realmente se escribe así. (Puede estar escrita de varias formas: bgColor, mainBgColor, etc.)\u003c/li\u003e\u003c/ol\u003e\u003cp\u003eSi existe, pero se escribe de otra forma, pon lo que veas detrás de name\u003d entre comillas.\u003c/p\u003e\u003cp align\u003d\"justify\"\u003eSi no existe, (y eso lo puedes averiguar facilmente en Fuentes y colores, pues no habrá forma de cambiar el color de fondo del blog), créala o pon el código del color que quieras.\u003c/p\u003e\u003cp align\u003d\"justify\"\u003eEn la entrada anterior a ésta ya expliqué como averiguar el código de un color, y en varias entradas de éste y de otros blogs he explicado como crear variables. (Usa el buscador o las etiquetas si necesitas verlas).\u003c/p\u003e\u003cp align\u003d\"justify\"\u003ePor otro lado está el tema de la altura de la imagen, y ahí si que has de pensar en que cubra la pantalla más alta que exista, pues lo contrario es una chapuza ya que se ve el color del fondo arriba o abajo y no queda bien.\u003c/p\u003e\u003cp align\u003d\"justify\"\u003eEn este caso, lo ideal es que tenga al menos 1100 pixels de altura, así seguro que las cubre todas.\u003c/p\u003e\u003cp align\u003d\"justify\"\u003eY en caso de no poder hacerla más alta, lo que puedes hacer es decirle que la repita, pero solo a lo largo, con lo que el código sería así:\u003c/p\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cblockquote\u003e\u003cp align\u003d\"justify\"\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003ebackground: url(dirección) top center repeat-y fixed;\u003c/span\u003e\u003c/strong\u003e\u003c/p\u003e\u003c/blockquote\u003e\u003cp align\u003d\"justify\"\u003e\u003c/span\u003e\u003c/strong\u003eY, claro está, copiar la dirección de algún sitio donde no reduzcan la imagen. Sky Drive es un buen sitio para esto.\u003c/p\u003e\u003cp align\u003d\"justify\"\u003eSi has llegado hasta aquí, quizá recuerdes que al principio te he dicho que hay excepciones y así es.\u003c/p\u003e\u003cp align\u003d\"justify\"\u003eNo se trata de que no la hayas de colocar en body, sinó que has de asegurarte de que no haya más direcciones de fondo. \u003c/p\u003e\u003cp align\u003d\"justify\"\u003ePlantillas como la de este blog, (harbor), y un par más de las que tiene blogger de serie, tienen imágenes de fondo y no siempre están colocadas en body. En estos casos has de borrar primero todas las imágenes que haya de fondo antes de poner la tuya y si no estás muy segur@ de que una dirección vaya a ser parte del fondo haz lo siguiente: Borras una, Vista previa. ¿Es del fondo? Guarda plantilla. ¿NO es del fondo? Borra cambios. Y así hasta que elimines todas las imágenes que hay en el fondo original del blog. (Esta plantilla, si mal no recuerdo, tenia 4, en varios wrap).\u003c/p\u003e\u003cp align\u003d\"justify\"\u003eYa sabes que suelo tunear plantillas. Si en alguna de ellas he tenido que variar algo así lo he dejado explicado en alguna entrada en el blog tuneado. (Puedes ver una lista de las plantillas que he tuneado \u003ca href\u003d\"http://laeulalia-final.blogspot.com/\" target\u003d\"_blank\"\u003eaquí\u003c/a\u003e).\u003c/p\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-7082801524319444464?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/7082801524319444464/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d7082801524319444464","title":"12 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/7082801524319444464"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/7082801524319444464"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2009/01/poner-un-fondo-personal-en-un-blog.html","title":"Poner un  fondo personal en un blog"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"12"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-3075250856462857496"},"published":{"$t":"2008-08-23T16:45:00.008+02:00"},"updated":{"$t":"2009-11-30T14:47:50.179+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"},{"scheme":"http://www.blogger.com/atom/ns#","term":"trucos blogger"}],"title":{"type":"text","$t":"Cambiar de plantilla sin perder nada (más sencillo todavía)"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eOtro sistema mucho más sencillo para cambiar de plantilla sin que se pierda ningún artilugio ni tengamos que ir copiando enlaces y códigos, es el que nos enseña Fernando en \u003ca href\u003d\"http://blog.randomnessf1.com/2008/08/moviendo-artilugios-widgets.html\" target\u003d\"_blank\"\u003eesta entrada\u003c/a\u003e.\u003cbr /\u003e\u003cbr /\u003e\u003cspan id\u003d\"fullpost\"\u003eSu planteamiento es muy sencillo y su ejecución más todavía.\u003cbr /\u003eAccedes a Diseño/Edición de HTML y SIN expandir artilugios localizas la zona de la sidebar, esa que empieza con \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u003cblockquote\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;div id\u003d'sidebar-wrapper'\u0026gt;\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/blockquote\u003e\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003cbr /\u003eUna vez encontrada, copia todos los elementos que hayas añadido a tu sidebar, excepto los que ya vienen de serie o que puedes añadir sin problemas, como el perfil, el archivo, las etiquetas o el logotipo.\u003cbr /\u003e\u003c/div\u003e\u003cp align\u003d\"justify\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/_8tJQg6r6qto/SLAjJTocFKI/AAAAAAAACPE/uUpF2CtpNO4/s1600-h/seleccionar+widgets.jpg\"\u003e\u003cimg style\u003d\"TEXT-ALIGN: center; MARGIN: 0px auto 10px; DISPLAY: block; CURSOR: hand\" id\u003d\"BLOGGER_PHOTO_ID_5237725009427567778\" border\u003d\"0\" alt\u003d\"\" src\u003d\"http://4.bp.blogspot.com/_8tJQg6r6qto/SLAjJTocFKI/AAAAAAAACPE/uUpF2CtpNO4/s400/seleccionar+widgets.jpg\" /\u003e\u003c/a\u003e Pega lo que has copiado en un documento de word o en el blog de notas, del que recomiendo su uso si tocas a menudo el código, pues te permite guardar cualquier código sin problemas.\u003cbr /\u003eSi vas a efectuar el cambio en ese momento, no hace falta que cierres el documento donde lo has pegado, si no lo vas a hacer todavía, guardalo con un titulo que te recuerde qué contiene.\u003c/p\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/_8tJQg6r6qto/SLAi-3OAXvI/AAAAAAAACO8/enhLddKoLlg/s1600-h/pegar+en+blog+de+notas.jpg\"\u003e\u003cimg style\u003d\"TEXT-ALIGN: center; MARGIN: 0px auto 10px; DISPLAY: block; CURSOR: hand\" id\u003d\"BLOGGER_PHOTO_ID_5237724830001815282\" border\u003d\"0\" alt\u003d\"\" src\u003d\"http://2.bp.blogspot.com/_8tJQg6r6qto/SLAi-3OAXvI/AAAAAAAACO8/enhLddKoLlg/s400/pegar+en+blog+de+notas.jpg\" /\u003e \u003cp align\u003d\"justify\"\u003e\u003c/a\u003eUna vez colocada la nueva plantilla en tu blog, cuando le has dado a subir sale el aviso de que se van a eliminar los elementos que la nueva plantilla no contiene, y que son los que has copiado.\u003cbr /\u003eAntes de aceptar, pega lo que has copiado antes, ahí donde te muestro.\u003cbr /\u003e\u003cbr /\u003e\u003c/p\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/_8tJQg6r6qto/SLAi1DsCq-I/AAAAAAAACO0/mSi5QeS8hoA/s1600-h/pegar+en+sidebar.jpg\"\u003e\u003cimg style\u003d\"TEXT-ALIGN: center; MARGIN: 0px auto 10px; DISPLAY: block; CURSOR: hand\" id\u003d\"BLOGGER_PHOTO_ID_5237724661550328802\" border\u003d\"0\" alt\u003d\"\" src\u003d\"http://1.bp.blogspot.com/_8tJQg6r6qto/SLAi1DsCq-I/AAAAAAAACO0/mSi5QeS8hoA/s400/pegar+en+sidebar.jpg\" /\u003e\u003c/a\u003e Y dale a Guardar Plantilla..\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eComo habrás recolocado todos los elementos que había en la plantilla anterior, ya no te dirá que se van a eliminar.\u003c/div\u003e\u003cbr /\u003e\u003cstrong\u003e¡Atención!\u003c/strong\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi la nueva plantilla contiene una menubar, y tienes listas de enlaces entre los elementos que has añadido, mira a ver qué número de lista has de ponerle a la menubar.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSaberlo es sencillo: ¿cuantas listas de enlaces tienes? ¿3? pues a la menubar le has de cambiar el 1 de LinkList1 por un 4, antes de darle a subir.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY ya está.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa nueva plantilla se colocará en tu blog.\u003c/div\u003e\u003cp align\u003d\"justify\"\u003e\u003cstrong\u003eOpciones:\u003c/strong\u003e\u003cbr /\u003eSi vas a poner una plantilla con dos columnas laterales, puedes aprovechar este truco para que los elementos se recoloquen ya.\u003cbr /\u003eCopia los que quieres que estén en la nueva debajo de estas líneas de código:\u003cbr /\u003e\u003c/p\u003e\u003ccode\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cblockquote\u003e\u003ccode\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;div id\u003d'newsidebar-wrapper'\u0026gt;\u003c/span\u003e\u003c/strong\u003e\u003cbr /\u003e\u003c/code\u003e\u003ccode\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;b:section class\u003d'sidebar'\u003cbr /\u003eid\u003d'newsidebar' preferred\u003d'yes'\u0026gt;\u003c/span\u003e\u003c/strong\u003e\u003cbr /\u003e\u003c/code\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/code\u003e\u003cbr /\u003ey el resto en la otra y cuando acabes ya verás los elementos bien colocaditos.\u003c/span\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-3075250856462857496?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/3075250856462857496/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d3075250856462857496","title":"4 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/3075250856462857496"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/3075250856462857496"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/08/cambiar-de-plantilla-sin-perder-nada-ms.html","title":"Cambiar de plantilla sin perder nada (más sencillo todavía)"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/_8tJQg6r6qto/SLAjJTocFKI/AAAAAAAACPE/uUpF2CtpNO4/s72-c/seleccionar+widgets.jpg","height":"72","width":"72"},"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-8991392022781452149"},"published":{"$t":"2008-07-14T19:53:00.006+02:00"},"updated":{"$t":"2008-12-09T18:41:21.639+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"widebar para rounders"}],"title":{"type":"text","$t":"La widebar en la rounders"},"content":{"type":"html","$t":"\u003ca href\u003d\"http://4.bp.blogspot.com/_8tJQg6r6qto/SHuSwSGJVCI/AAAAAAAABos/CLbtsym_yY4/s1600-h/rounders4-3-8-wide-neutra-1.jpg\"\u003e\u003cimg id\u003d\"BLOGGER_PHOTO_ID_5222929551055213602\" style\u003d\"DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center\" alt\u003d\"\" src\u003d\"http://4.bp.blogspot.com/_8tJQg6r6qto/SHuSwSGJVCI/AAAAAAAABos/CLbtsym_yY4/s400/rounders4-3-8-wide-neutra-1.jpg\" border\u003d\"0\" /\u003e\u003c/a\u003e\u003cbr /\u003e\u003cdiv\u003eEste es el lateral de mi última creación/modificación de la rounders.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eComo puedes ver, además de las dos columnas laterales le he colocado una widebar, que tiene las mismas propiedades que los boxes de las columnas laterales.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv\u003e¿Tienes una rounders? ¿Quieres hacer lo mismo?\u003c/div\u003e\u003cdiv\u003eEs muy sencillo.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePrimero has de colocarle la 2ª sidebar. \u003ca href\u003d\"http://laeulalia-rounders3.blogspot.com/\" target\u003d\"_blank\"\u003eAquí\u003c/a\u003e puedes ver como se hace. Las explicaciones están divididas en entradas en las que vas a poder ver los pasos a dar para hacerlo.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePero si quieres poner la widebar, el código de la nueva sidebar lo has de copiar debajo de main, no encima.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLas medidas y posiciones para que las 3 columnas encajen a la perfección son estas:\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#990000;\"\u003e#outer-wrapper { \u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003ewidth:995px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e#main-wrap1 { \u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003ewidth:485px; \u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003efloat:$startSide;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003emargin:15px 0 10px 10px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003epadding:0 0 10px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e#sidebar-wrap {\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003ewidth:240px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003efloat:$endSide;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003emargin:10px 0 0;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e#newsidebar-wrap {\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003ewidth:240px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003efloat:$startSide;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003emargin:10px 10px 0;\u003c/span\u003e\u003cbr /\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv\u003eCon esto verás que las 3 columnas se colocan de manera equidistante.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eUna vez hecho esto, y cuando veas las 3 columnas en el sitio correcto, pones la widebar.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv\u003eTiene dos partes: la del HTML y la de CSS.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv\u003eLa primera, que has de pegar encima de \u003cspan style\u003d\"color:#990000;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'main-wrap1'\u0026gt;\u0026lt;div id\u003d'main-wrap2'\u0026gt;\u003c/code\u003e\u003c/span\u003e es así:\u003c/div\u003e\u003cdiv\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003c/span\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'widebar-wrapper'\u0026gt;\u003cbr /\u003e\u0026lt;div id\u003d'widebar-wrap1'\u0026gt;\u0026lt;div id\u003d'widebar-wrap2'\u0026gt;\u003cbr /\u003e\u0026lt;b:section class\u003d'sidebar' id\u003d'widebar' preferred\u003d'yes'\u0026gt;\u003cbr /\u003e\u0026lt;/b:section\u0026gt;\u003cbr /\u003e\u0026lt;/div\u0026gt;\u003cbr /\u003e\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/span\u003e\u003cbr /\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv\u003eY la segunda, que puedes colocar donde quieras, aunque yo te recomendaría que lo pusieras encima de \u003cspan style\u003d\"color:#990000;\"\u003e#sidebar-wrap {\u003c/span\u003e por aquello de tener el código organizado, es así:\u003c/div\u003e\u003cdiv\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cblockquote\u003e\u003cp\u003e\u003cspan style\u003d\"color:#000099;\"\u003e#widebar-wrapper { \u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ewidth:485px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003efloat:$endSide;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003epadding-bottom:10px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003emargin-top:0px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003emargin-bottom:0px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003eword-wrap: break-word;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e/* fix for long text breaking sidebar float in IE */\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e}\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e#widebar-wrap1 {\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ewidth:485px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003efloat:$startSide;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ebackground:$sidebarBgColor url(\"\u003c/span\u003e\u003ca href\u003d\"http://www.blogblog.com/rounders4/corners_main_bot.gif\"\u003e\u003cspan style\u003d\"color:#000099;\"\u003ehttp://www.blogblog.com/rounders4/corners_main_bot.gif\u003c/span\u003e\u003c/a\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\") no-repeat $startSide bottom; margin:15px 0 0px 0px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003epadding:0 0 10px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ecolor:$sidebarTextColor;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003efont-size:97%;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003eline-height:1.5em;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003eword-wrap: break-word;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e/* fix for long text breaking sidebar float in IE */ \u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003eoverflow: hidden; \u003c/span\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003c/span\u003e\u003cspan style\u003d\"color:#000099;\"\u003e/* fix for\u003cbr /\u003elong non-text content breaking IE sidebar float */ \u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e}\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e#widebar-wrap2 {\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003efloat:$startSide;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ewidth:100%;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ebackground:url(\"\u003c/span\u003e\u003ca href\u003d\"http://www.blogblog.com/rounders4/corners_main_top.gif\"\u003e\u003cspan style\u003d\"color:#000099;\"\u003ehttp://www.blogblog.com/rounders4/corners_main_top.gif\u003c/span\u003e\u003c/a\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\") no-repeat $startSide top;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003epadding:10px 0 0; \u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e}\u003cbr /\u003e#widebar {\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ewidth:485px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003epadding:5px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003eword-wrap: break-word;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e/* fix for long text breaking sidebar float in IE */\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e}\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e#widebar h2 {\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003emargin-$endSide: 10px;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ecolor: $sidebarTextColor;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003eborder-bottom: 1px dotted $sidebarTextColor;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003emargin-bottom: 0.5em;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e}\u003c/span\u003e\u003cbr /\u003e\u003c/p\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eHas de copiarlo entero, con direcciones y todo, pues son las de las esquinas redondeadas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eCon eso logras que la widebar tenga las mismas características que los boxes de la sidebar, e incluso los mismos colores que uno de ellos.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi quieres rizar el rizo y darle colores independientes, has de crearle variables propias.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eBusca las variables de sidebar que ves aquí y las copias, cambiando \u003cspan style\u003d\"color:#990000;\"\u003esidebar\u003c/span\u003e por \u003cspan style\u003d\"color:#000099;\"\u003ewidebar\u003c/span\u003e, tanto en las variables, como en las definiciones de éste código.\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi además quieres que los enlaces también tengan colores propios, copias las variables de link de la sidebar, cambiando \u003cspan style\u003d\"color:#990000;\"\u003esidebar\u003c/span\u003e por \u003cspan style\u003d\"color:#000099;\"\u003ewidebar\u003c/span\u003e, y añades este código:\u003c/div\u003e\u003cdiv\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e#widebar a:link, widebar a:visited, widebar a:hover {\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ecolor: $widebarLinkColor;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e}\u003c/span\u003e\u003cbr /\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY si quieres que al poner el ratón encima se vea de un color diferente, añades la variable \u003cspan style\u003d\"color:#000099;\"\u003ewidebarHoverLinkColor\u003c/span\u003e, (\u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2007/11/los-variables-fuentes-y-colores.html\" target\u003d\"_blank\"\u003eaquí \u003c/a\u003ete explico como crear variables), borras de arriba lo de \u003cspan style\u003d\"color:#990000;\"\u003ewidebar a:hover\u003c/span\u003e y añades este código:\u003c/div\u003e\u003cdiv\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e#widebar a:hover {\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003ecolor:$widebarHoverLinkColor;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e}\u003c/span\u003e\u003cbr /\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv\u003e\u003c/div\u003e\u003cdiv\u003eSi tienes dudas ya sabes que puedes preguntar.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-8991392022781452149?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/8991392022781452149/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d8991392022781452149","title":"5 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/8991392022781452149"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/8991392022781452149"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/07/la-widebar-en-la-rounders.html","title":"La widebar en la rounders"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/_8tJQg6r6qto/SHuSwSGJVCI/AAAAAAAABos/CLbtsym_yY4/s72-c/rounders4-3-8-wide-neutra-1.jpg","height":"72","width":"72"},"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-5620559945596229477"},"published":{"$t":"2008-06-29T01:45:00.003+02:00"},"updated":{"$t":"2008-12-01T01:25:04.952+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"trucos blogger"}],"title":{"type":"text","$t":"Cambio de plantilla"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eAcabo de cambiar la plantilla de uno de los blogs de muestra.\u003cbr /\u003eEn esos blogs, como son operativos, suelo añadir cosas. Los comentarios visibles, el botón de enlace, a veces un contador, etc.\u003cbr /\u003e\u003cbr /\u003eHe usado el truco que dejé en \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2008/06/cambiar-de-plantilla-sin-perder-nada-y.html\" target\u003d\"_blank\"\u003eesta entrada\u003c/a\u003e, pero mejorado.\u003cbr /\u003eHa funcionado perfectamente.\u003cbr /\u003eLa plantilla nueva se ha colocado en el blog y todas las cosas han continuado en su sitio y no me ha salido el dichoso aviso de: \"Confirme que van a eliminarse los siguientes elementos\" seguido de la lista de todo lo que no está en la plantilla que quieres poner.\u003cbr /\u003e\u003cbr /\u003eSi quieres saber como, en \u003ca href\u003d\"http://laeulalia-tictac3.blogspot.com/2008/06/ms-columnas.html\" target\u003d\"_blank\"\u003eesta entrada\u003c/a\u003e he dejado la explicación. \u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-5620559945596229477?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/5620559945596229477/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d5620559945596229477","title":"1 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/5620559945596229477"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/5620559945596229477"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/06/cambio-de-plantilla.html","title":"Cambio de plantilla"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-8559309147099585065"},"published":{"$t":"2008-06-15T15:45:00.006+02:00"},"updated":{"$t":"2008-12-01T01:55:43.052+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"footer"},{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"El triple footer (2ª parte) Otra manera de ponerlo."},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eHace tiempo hice \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2008/02/tres-columnas-en-el-pie-de-pgina.html\" target\u003d\"_blank\"\u003eesta entrada\u003c/a\u003e en la que explicaba un truco que había visto en \u003ca href\u003d\"http://elescaparatederosa.blogspot.com/\" target\u003d\"_blank\"\u003eEl escaparate de Rosa\u003c/a\u003e, para poner 3 columnas al pie del blog. Copié y pegué el código tal como ella lo daba, y que yo había usado sin problemas para ponerlo aquí y en otro blog.\u003cbr /\u003e\u003cbr /\u003eHoy he querido colocar dos de esas columnas en la Galería de premios, para poner los premios que son más grandes que la medida de la sidebar y he colocado el código, eliminando el de la tercera para que solo quedaran dos.\u003cbr /\u003e\u003cbr /\u003ePero no quedaba bien.\u003cbr /\u003eEl contenido de cada columna se integraba en el footer normal, ya que lo tengo tuneado para que tengan fondo y borde, tanto el contenedor como los elementos que contenga.\u003cbr /\u003e\u003cbr /\u003eHe ido haciendo pruebas con los códigos y finalmente he logrado mi objetivo.\u003cbr /\u003e\u003cbr /\u003eEl doble footer está encima del footer, mantiene las distancias necesarias y tiene las mismas propiedades que el footer. Puedes verlo en directo \u003ca href\u003d\"http://laeulalia-galeria.blogspot.com/\" target\u003d\"_blank\"\u003eaquí\u003c/a\u003e.\u003cbr /\u003e\u003cbr /\u003eLas modificaciones que he hecho son las siguientes (por si estás interesad@ en hacer algo parecido):\u003cbr /\u003e\u003cbr /\u003eEn primer lugar he modificado el código original del footer, que era así: \u003c/div\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer-wrapper'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;b:section class\u003d'footer' id\u003d'footer'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/b:section\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/span\u003e\u003cbr /\u003e\u003cbr /\u003ey lo he dejado así:\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003ccode\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer-wrapper'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003c/span\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer-bottom'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003ccode\u003e\u0026lt;b:section class\u003d'footer' id\u003d'col-bottom'\u003cbr /\u003epreferred\u003d'yes'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/b:section\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u003cspan style\u003d\"color:#000099;\"\u003e\u0026lt;/div\u0026gt;\u003c/span\u003e\u003c/code\u003e\u003c/span\u003e\u003c/span\u003e\u003c/blockquote\u003e\u003c/code\u003e\u003c/span\u003e\u003c/span\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003ccode\u003e\u003c/code\u003e\u003c/span\u003e\u003c/span\u003eSi te fijas, tan solo he añadido la 2ª línea, la identidad del footer normal, llamándolo footer-bottom, para diferenciarlo de los que iba a poner después y el /div de cierre.\u003cbr /\u003e\u003cbr /\u003eA continuación he creado una nueva zona, encima de esta, en la que he colocado el código de las columnas, dos en este caso, y, a diferencia del código original para esta zona, que hay en la entrada que he mencionado, he quitado las definiciones de estilo.\u003cbr /\u003eLa nueva zona ha quedado así: \u003c/div\u003e\u003ccode\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer-wrapper1'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003c/span\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer-columna-contenedor'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003cbr /\u003e\u003c/span\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer2'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003c/span\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003ccode\u003e\u0026lt;b:section class\u003d'footer' id\u003d'col1'\u003cbr /\u003epreferred\u003d'yes'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/b:section\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer3'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003c/span\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003ccode\u003e\u0026lt;b:section class\u003d'footer' id\u003d'col2'\u003cbr /\u003epreferred\u003d'yes'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/b:section\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/span\u003e\u003cbr /\u003e\u003c/blockquote\u003e\u003c/code\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003eLa primera línea define el contenedor.\u003cbr /\u003eLa segunda define la zona.\u003cbr /\u003eEl primer grupo que le sigue define una de las columnas. Al decirle que pertenece a la clase del footer (section class) sé que las propiedades que tenga el footer en el CSS las tendrá también la columna. He mantenido las identidades que tenía en el código original, pero, como he dicho, eliminando las definiciones de estilo.\u003cbr /\u003eEl segundo grupo define la otra columna.\u003cbr /\u003e\u003cbr /\u003eEntonces en el CSS he modificado la definicion del footer añadiendo bottom a su nombre. (\u003cem\u003eEn su momento ya había modificado esta zona para que el footer se viera como yo quería\u003c/em\u003e).\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e#footer\u003cspan style\u003d\"color:#000099;\"\u003e-bottom\u003c/span\u003e {\u003cbr /\u003eclear:both;\u003cbr /\u003ebackground:url(la direccion del fondo) repeat;\u003cbr /\u003eborder: 10px ridge $borderColor;\u003cbr /\u003emargin-top: 10px;\u003cbr /\u003epadding-bottom: 10px;\u003cbr /\u003epadding-top:0px;\u003cbr /\u003e_padding-top:6px; /* IE Windows target */\u003cbr /\u003e}\u003cbr /\u003e#footer\u003cspan style\u003d\"color:#000099;\"\u003e-bottom\u003c/span\u003e p {\u003cbr /\u003eline-height:1.5em;\u003cbr /\u003efont:$sidebarFont;\u003cbr /\u003e}\u003c/span\u003e\u003cbr /\u003e\u003cbr /\u003eLuego he añadido las definiciones de la nueva zona así:\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e#footer-columna-contenedor{\u003cbr /\u003eclear:both;\u003cbr /\u003e}\u003c/span\u003e\u003cbr /\u003e\u003c/blockquote\u003e\u003c/span\u003e(\u003cem\u003eCon esto he logrado que, en los dos navegadores, las columnas ocupen su sitio\u003c/em\u003e)\u003cbr /\u003e\u003cbr /\u003eY las definiciones de cada columna:\u003cbr /\u003e\u003cbr /\u003e\u003c/div\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e#footer2 {\u003cbr /\u003efloat:$startSide;\u003cbr /\u003ewidth: 500px;\u003cbr /\u003ebackground:url(dirección) repeat;\u003cbr /\u003eborder: 10px ridge $borderColor;\u003cbr /\u003emargin-top: 10px;\u003cbr /\u003emargin-bottom: 10px;\u003cbr /\u003epadding-bottom: 10px;\u003cbr /\u003epadding-top:10px;\u003cbr /\u003e_padding-top:6px; /* IE Windows target */\u003cbr /\u003e}\u003cbr /\u003e#footer2 p {\u003cbr /\u003eline-height:1.5em;\u003cbr /\u003efont: $sidebarFont;\u003cbr /\u003e}\u003cbr /\u003e\u003cbr /\u003e#footer3 {\u003cbr /\u003efloat:$endSide;\u003cbr /\u003ewidth: 500px;\u003cbr /\u003ebackground:url(dirección) repeat;\u003cbr /\u003eborder: 10px ridge $borderColor;\u003cbr /\u003emargin-top: 10px;\u003cbr /\u003emargin-bottom: 10px;\u003cbr /\u003epadding-bottom: 10px;\u003cbr /\u003epadding-top:10px;\u003cbr /\u003e_padding-top:6px; /* IE Windows target */\u003cbr /\u003e}\u003cbr /\u003e#footer3 p {\u003cbr /\u003eline-height:1.5em;\u003cbr /\u003efont: $sidebarFont;\u003cbr /\u003e} \u003c/span\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003eComo puedes ver he copiado las del footer, ahora footer-bottom, en cada una de las dos columnas, añadiendo a cada una la medida, posición, y retocando, donde ha hecho falta, los padding o los margin para separarlas entre si y del resto.\u003cbr /\u003eLos elementos que contienen, ya tenían sus propias definiciones, que se las puse al hacer el blog, así:\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e.footer .widget {\u003cbr /\u003ebackground:url(la dirección del fondo del elemento);\u003cbr /\u003eborder: 5px ridge $borderColor;\u003cbr /\u003emargin-top:6px;\u003cbr /\u003emargin-$endSide:15px;\u003cbr /\u003emargin-bottom:12px;\u003cbr /\u003emargin-$startSide:15px; padding: 4px;\u003cbr /\u003etext-align: center;\u003cbr /\u003efont: $sidebarFont;\u003cbr /\u003e}\u003c/span\u003e \u003c/div\u003e\u003cbr /\u003eDe paso, le he añadido definiciones propias al título de los elementos así:\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e.footer h2 {\u003cbr /\u003emargin: 0 0 10px 0;\u003cbr /\u003epadding:5px;\u003cbr /\u003ecolor:$sidebarHeaderColor;\u003cbr /\u003efont: $footerFont;\u003cbr /\u003etext-align: center;\u003cbr /\u003eborder: 2px outset $borderColor;\u003cbr /\u003e}\u003cbr /\u003e\u003c/span\u003e\u003c/blockquote\u003e\u003c/span\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003eY he creado una fuente para el título de los elementos, (el h2), ya que al ser más grandes que los de la sidebar, necesitaban una fuente mayor.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePara la fuente de los elementos había usado la de la sidebar para darle homogeneidad al conjunto, pues de origen el footer no la tiene definida.\u003cbr /\u003e\u003cbr /\u003eSi quieres poner tres columnas, basta con añadir el código de la tercera.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn el HTML copiando el de la segunda, modificando los números que serían footer4 col3 y pegándolo debajo, antes de los dos /div seguidos de cierre de zona.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLuego copias las definiciones del CSS de la segunda y las pegas debajo cambiandole el número y, por supuesto el ancho de cada una. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003eADVERTENCIA:\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLas medidas que ves aquí, tanto los width (ancho) como las que hay en padding y margin, corresponden a las de mi blog, que mide 1100 píxels de ancho total.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-8559309147099585065?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/8559309147099585065/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d8559309147099585065","title":"2 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/8559309147099585065"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/8559309147099585065"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/06/el-triple-footer-2-parte-otra-manera-de.html","title":"El triple footer (2ª parte) Otra manera de ponerlo."}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-179264967743804572"},"published":{"$t":"2008-06-04T23:15:00.010+02:00"},"updated":{"$t":"2008-12-01T01:25:04.966+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"trucos blogger"}],"title":{"type":"text","$t":"Cambiar de plantilla sin perder nada y que todas las cosas se coloquen en su sitio."},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eCuando cambiamos la plantilla del blog por alguna que, aunque originalmente sea de blogger, no esté en su lista de \"Seleccionar plantilla nueva\", al cargar la nueva se eliminan todos los elementos que teníamos, ya que éstos no figuran en la nueva.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eHace tiempo dejé \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2008/03/modificar-tu-blog-sin-perder-nada.html\" target\u003d\"_blank\"\u003euna entrada \u003c/a\u003eexplicando un sistema para hacer este cambio sin perder casi nada, el problema en este caso radica en que al subir la nueva plantilla al blog, todo sale descolocado, algunos elementos se repiten, con lo que nos da error de identidad y acabas desesperándote un poco, (o un mucho, dependiendo de lo que tengas en el blog).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eHace unos días estuve ayudando a \u003ca href\u003d\"http://enbuscadelaarmoniadelalma.blogspot.com/\" target\u003d\"_blank\"\u003eVesta\u003c/a\u003e a cambiar la plantilla de su blog y usamos este sistema, por eso se cual es su resultado.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eTras un domingo de reorganización me puse a darle vueltas a la sesera buscando un método más simple para hacerlo y me di cuenta de cual era el problema.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLos b:widget.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY supe como realizar el cambio sin perder nada, y que además todo aparezca en su sitio.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003ePara realizar este \"truco\" has de tener muy claro lo que ves en el código, como yo digo: \"Saber leerlo\".\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003ePara que os hagais una idea de lo que voy a explicar, teneis que entrar en el código del blog, en el sector del HTML, que es aquel en el que todas las cosas se ven entre estos símbolos \u003c\u003e y sin expandir elementos echarle una ojeda a lo que se ve.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEn \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2008/03/la-plantilla-de-un-blog-4-parte-el-html.html\" target\u003d\"_blank\"\u003eesta entrada\u003c/a\u003e ya expliqué bastante a fondo como interpretar esta parte del código.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEn este caso lo que nos interesa son los widgets.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eCada código b:widget corresponde a uno de los elementos que teneis en vuestro blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi lo mirais bien vereis que todos incluyen una id o identidad. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí, el primer elemento HTML que añadisteis al blog es el HTML1, el siguiente es el HTML2, etc. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLo mismo sucede con las listas de enlaces y con todos los demás elementos que tengais añadidos.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi expandís las plantillas de artilugios y comparais los códigos de dos elementos de la misma categoría, por ejemplo dos HTML, vereis que sus códigos son idénticos, y que lo único que los distingue es la id y el título.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSabiendo esto, vamos a hacer el cambio de plantilla, y vamos a hacer que todas las cosas se recoloquen en su lugar.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eLo primero que teneis que hacer es ponerle títulos a los elementos que no tengan. No os preocupeis si no quereis que se vea el título, ya se lo quitareis cuando el blog tenga la nueva plantilla cargada sin problemas. \u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eLo siguiente es abrir un blog de pruebas, si todavía no lo teneis y hacer una entrada en ese blog, aunque solo diga probando y le cambiais la plantilla por la que vais a poner en el blog que llamaré \"oficial\".\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi usais etiquetas, le poneis una etiqueta cualquiera y añadis al blog el elemento de etiquetas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEl Archivo y el Perfil ya salen de serie, pero si no los teneis en el blog oficial podeis quitarlos.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY ahora empieza el trabajo de artistas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAbris los dos blogs a la vez, cada uno en una ventana.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEl oficial en Diseño /Edición de HTML.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEl de pruebas en Elementos de la página.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY vais añadiendo en el blog de pruebas los mismos elementos que teneis en el oficial EN EL MISMO ORDEN.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eAsí, si el HTML1 es el contador, lo titulais contador.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eComo no puede dejarse en blanco el recuadro del código, escribís en él \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ey guardais cambios.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí tantas veces como elementos HTML tengais en el blog.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi es un elemento Lista de enlaces, le poneis a la que se llama Linklist1 el mismo título que a la del blog y añadis un enlace a vuestro propio blog. (No se copian al hacer el cambio).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi es un elemento Texto, escribid Hola o cualquier cosa rápida.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi es un elemento imagen, añadis la misma, si podeis.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY así con todos los elementos b:widget que tengais, excepto el perfil, el archivo y las etiquetas, que ya tendreis añadidos.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi el nuevo blog es de tres columnas colocad ya los elementos como querais que se vean.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eGuardad los cambios.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEntonces en el blog de pruebas, entrais en Edición de HTML y si tiene menubar, como vendrá como Linklist1, vereis que las listas que habeis añadido van una posición atrás con respecto al blog oficial, así que tendreis que modificar los números de las listas de enlaces para que cuadren con vuestro blog y a la menubar ponerle el número de orden que le corresponda, que será el siguiente de la lista.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eOs pondré un ejemplo práctico: En el blog oficial la Linklist1 se llama Mis amigos. Al haber la menubar, vereis que la lista que lleva por título Mis amigos, del blog de pruebas, es la Linklist2.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eCambiais ese 2 por un 1. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn el oficial la Linklist2 se llama Recomendados. En el de pruebas será la Linklist3.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eCambiais el 3 por un 2\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY así sucesivamente.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAl final, el último número que cambieis será el que corresponderá a la menubar.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi teniais 6 listas de enlaces en el blog oficial, la menubar será la Linklist7 en el de pruebas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e(No se puede poner antes de empezar un número más alto a la menubar, lo he comprobado.)\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi en el blog oficial ya teneis la menubar, le poneis el mismo número que tenga.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa cuestión es que los elementos se vean igual en los dos blogs. id y título.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eUna vez comprobado esto guardais cambios.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi además habiais añadido algún código al blog y quereis conservarlo, si recordais lo que era, copiadlo. Si no estais seguros es preferible no hacerlo y añadirlo luego.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eCuando esteis seguros de que todo está en orden, Guardad plantilla y cuando salga el aviso de que los cambios se han guardado, descargais la plantilla completa.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eGuardadla sin abrirla.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY la poneis en el blog \"oficial\".\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eAl cargarla, como tendreis los mismos elementos en la plantilla nueva que en la antigua, no se os eliminará nada.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY cuando entreis a ver el blog, las cosas estarán practicamente en su sitio.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLas listas de enlaces serán las mismas, los elementos HTML seguirán en su sitio y, como mucho, tendreis que añadir los enlaces que querais a la menubar, si antes no la teniais.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEditado:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eMejoré este truco para hacerlo aún más sencillo. Puedes verlo \u003ca href\u003d\"http://laeulalia-tictac3.blogspot.com/2008/06/ms-columnas.html\" target\u003d\"_blank\"\u003eaquí\u003c/a\u003e.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-179264967743804572?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/179264967743804572/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d179264967743804572","title":"10 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/179264967743804572"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/179264967743804572"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/06/cambiar-de-plantilla-sin-perder-nada-y.html","title":"Cambiar de plantilla sin perder nada y que todas las cosas se coloquen en su sitio."}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"10"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-1966708207811803861"},"published":{"$t":"2008-05-27T23:20:00.004+02:00"},"updated":{"$t":"2008-12-01T01:36:04.082+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"cabecera"}],"title":{"type":"text","$t":"Recolocar la cabecera del blog"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eEsta es una consulta que recibo muchas veces. ¿Como hacer que la imagen de la cabecera se coloque donde quiero?\u003cbr /\u003e\u003cbr /\u003eEn principio os diré que eso depende mucho de la plantilla, pero os explicaré algunos trucos básicos para moverla.\u003cbr /\u003e\u003cbr /\u003eEl código de la cabecera del blog suele tener varias secciones.\u003cbr /\u003e\u003cbr /\u003eBajo el encabezado \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e.Header {\u003c/span\u003e\u003c/strong\u003e o \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e#header-wraper {\u003c/span\u003e\u003c/strong\u003e hay, en primer lugar, el sector que define la cabecera en si, le sigue el sector que define la zona que ocupa el título, el que define sus propiedades como enlace y termina con el sector que corresponde a la descripción del blog.\u003cbr /\u003e\u003cbr /\u003eCada una de estas partes está incluida entre esas dos llaves \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e{ }\u003c/span\u003e\u003c/strong\u003e\u003cbr /\u003e\u003cbr /\u003eLa que nos interesa es la primera parte de ese código.\u003cbr /\u003e\u003cbr /\u003eAllí es donde se puede colocar una imagen que sirva de fondo del título, y donde definimos la separación de la cabecera al resto del blog.\u003cbr /\u003e\u003cbr /\u003eA veces hay pocas órdenes en esta zona, pero podemos añadirle las que queramos.\u003cbr /\u003e\u003cbr /\u003ePara que la imagen que hemos puesto, ya sea a través del código o a través de Editar el elemento, se coloque bien y se vea entera, las órdenes a modificar o a añadir si no las hubiera, serían estas:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003ewidth: XXXpx;\u003c/span\u003e\u003c/strong\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEsto es el ancho de la zona de la cabecera, que haremos coincidir con el ancho de nuestra imagen, si no se viera entera, o fuera más pequeña que la zona destinada a ella.\u003cbr /\u003eLas XXX corresponden a la medida en píxels que ocupará esta zona.\u003cbr /\u003eSi el código ya está incluido, y la imagen es menor que la zona, disminuiremos esta cantidad, si es mayor la aumentaremos.\u003cbr /\u003e\u003cbr /\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003eheight:XXXpx;\u003c/span\u003e\u003c/strong\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEsta es la altura de la zona.\u003cbr /\u003eAl igual que con el ancho, si no figura en el código y la imagen no se ve entera, la añadiremos y cambiaremos las XXX por la altura de la imagen.\u003cbr /\u003e\u003cbr /\u003eEn esta zona suele haber algunas líneas de margin y padding.\u003cbr /\u003eA veces es una sola orden \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003emargin: 0;\u003c/span\u003e\u003c/strong\u003e lo que indica que la cabecera ocupará toda su zona.\u003cbr /\u003eSi la imagen es menor que su zona, ha quedado a la izquierda y queremos centrarla, añadiremos esto: \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003emargin-$startSide: XXXpx;\u003c/span\u003e\u003c/strong\u003e (o \u003cspan style\u003d\"color:#000099;\"\u003emargin-left: XXXpx;\u003c/span\u003e) para moverla hacia el centro.\u003cbr /\u003ePara saber la cantidad que hemos de poner ahí, mirad primero cuan ancho es el blog, o recordad que anchura tenía la cabecera antes de modificarla, si lo habeis hecho, restad a esa cantidad el ancho de vuestra imagen y dividid esa cantidad por 2. El resultado será la cantidad de píxels que han de quedar de margen entre el principio del blog y el principio de la imagen, por la izquierda, para que se vea centrada.\u003cbr /\u003e\u003cbr /\u003eComo digo al principio, eso no sirve para todas las plantillas.\u003cbr /\u003eLa dots, por ejemplo, no dispone de zona de cabecera, propiamente dicha, aunque podeis añadírsela. (\u003ca href\u003d\"http://laeulalia-dots.blogspot.com/2007/10/vamos-tunear-la-dots.html\" target\u003d\"_blank\"\u003eAquí \u003c/a\u003epodeis ver como). Una vez añadido el código ya podreis usar estos parámetros que indico.\u003cbr /\u003e\u003cbr /\u003eEn las moto (son of moto, ms moto) la zona de la cabecera, y por ende sus definiciones, están repartidas en dos partes. En cada una hay una dirección. Una corresponde la la zona del título y la otra a la del subtítulo.\u003cbr /\u003eCuando se añade una imagen de cabecera a esta plantilla, hay que jugar un poco con las dos zonas hasta encontrar el equilibrio para que nuestra imagen se vea entera. (\u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2007/12/imagen-en-la-cabecera-de-la-plantilla.html\" target\u003d\"_blank\"\u003eAquí\u003c/a\u003e podeis ver como). \u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-1966708207811803861?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/1966708207811803861/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d1966708207811803861","title":"4 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/1966708207811803861"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/1966708207811803861"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/05/recolocar-la-cabecera-del-blog.html","title":"Recolocar la cabecera del blog"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-1833074071460869766"},"published":{"$t":"2008-05-14T19:30:00.002+02:00"},"updated":{"$t":"2008-12-01T01:25:04.979+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"menubar"},{"scheme":"http://www.blogger.com/atom/ns#","term":"tic tac"},{"scheme":"http://www.blogger.com/atom/ns#","term":"sidebar"},{"scheme":"http://www.blogger.com/atom/ns#","term":"trucos blogger"}],"title":{"type":"text","$t":"Algúnos trucos más."},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eEstos días, aparte de poner en marcha el diccionario blogger, he estado montando algunas plantillas más, y poniéndole una segunda sidebar a la tic tac. Podeis ver como hacerlo, y como ha quedado \u003ca href\u003d\"http://laeulalia-tictac3.blogspot.com/\"\u003eaquí\u003c/a\u003e.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003ePor otro lado logré un efecto muy chulo en la menubar.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLe cambié la cara al blog de Utilidades, variando la imagen del body, (el fondo del blog) y la del outer-wrapper, (el fondo de la zona útil) y uno de los cambios que hice fue que la menubar se vea igual que el outer-wrapper, pero que se vea el body cuando le pones el ratón encima, truco que ya había empleado pero no explicado.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEs tan sencillo como añadir \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003ebackground: url(la direccion de la imagen del outer-wrapper); \u003c/span\u003e\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003een \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e#menubar li {\u003c/span\u003e\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ey añadir la misma línea pero con la dirección de la imagen de body en \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e#menubar a:hover {\u003c/span\u003e\u003c/strong\u003e\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEl efecto es sorprendente. Puedes verlo en directo \u003ca href\u003d\"http://laeulalia-inicio.blogspot.com/\"\u003eaquí\u003c/a\u003e.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-1833074071460869766?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/1833074071460869766/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d1833074071460869766","title":"0 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/1833074071460869766"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/1833074071460869766"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/05/algnos-trucos-ms.html","title":"Algúnos trucos más."}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-7722838824066231818"},"published":{"$t":"2008-05-01T15:18:00.003+02:00"},"updated":{"$t":"2008-12-01T01:36:04.090+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"dots"},{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"Ponerle una cabecera a la plantilla dots."},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eHace tiempo, cuando empecé a tunear plantillas, creé unos cuantos blogs, cada uno con un modelo distinto y los titulé Tuneando la... y el nombre de la plantilla.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEntre los que abrí había un Tuneando la dots. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEsta plantilla se me atravesó desde el primer momento. No sabía como arreglarla.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePor un lado, quitarle el fondo era dejarla como cualquier otra, cuando su fondo es lo que la distingue de las demás y le da la personalidad. (Y aunque se podría decir lo mismo de la scribe y a esa le quité el fondo, lo hice por una razón particular que explico en \u003ca href\u003d\"http://laeulalia-scribe.blogspot.com/\" target\u003d\"_blank\"\u003eel blog tuneado\u003c/a\u003e).\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTampoco sabía como montármelo para que se viera una cabecera. (Todavía no se me había ocurrido probar a pegar códigos de una plantilla en otra diferente).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eHace unos días, \u003ca href\u003d\"http://www.queelmundogirebajotuspies.blogspot.com/\" target\u003d\"_blank\"\u003eLola\u003c/a\u003e me planteó el reto. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTiene una dots y quería ponerle una cabecera a toda página.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eHoy lo he logrado.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePuedes verla \u003ca href\u003d\"http://laeulalia-dots.blogspot.com/\" target\u003d\"_blank\"\u003eaquí\u003c/a\u003e. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eUna dots con su fondo de redonditas de colores con una cabecera que ocupa todo el ancho de la zona útil del blog.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eHe dejado las instrucciones para modificarla y, de paso, ensancharla al menos hasta el ancho de una cabecera \"normal\", 800 píxels.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí que si tienes una dots y quieres modificarla, allí lo encontrarás.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-7722838824066231818?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/7722838824066231818/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d7722838824066231818","title":"3 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/7722838824066231818"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/7722838824066231818"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/05/ponerle-una-cabecera-la-plantilla-dots.html","title":"Ponerle una cabecera a la plantilla dots."}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-141858361066207422"},"published":{"$t":"2008-04-27T02:18:00.004+02:00"},"updated":{"$t":"2008-12-01T01:36:04.093+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"crosscol"}],"title":{"type":"text","$t":"Aprovechar el crosscol"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"font-size:130%;\"\u003e\u003cstrong\u003e-¿Mande?-\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003e\u003cbr /\u003eSi el título de la entrada te ha provocado esta reacción, una de dos: O en el código de tu blog esto no aparece, (harto díficil, pues aparece incluso en la de Que paren el mundo que me apeo y eso que es el más antiguo que tengo, de los que usan left y right), o, si lo hace, no te has fijado.\u003cbr /\u003e\u003cbr /\u003eHace algún tiempo que lo venía observando en las plantillas de los blogs.\u003cbr /\u003eMe preguntaba que diantres sería eso, pero como no parecía que hubiera cambiado nada en los blogs no me preocupaba.\u003cbr /\u003e\u003cbr /\u003eEl otro día J. Miur de \u003ca href\u003d\"http://vagabundia.blogspot.com/\" target\u003d\"_blank\"\u003eVagabundia\u003c/a\u003e, hablaba del tema.\u003cbr /\u003eResulta que eso del crosscol, es un código que han añadido a todas las plantillas, para poder poner anuncios bajo la cabecera.\u003cbr /\u003ePero si no tienes publicidad en el blog, o no quieres ponerla ahí, esta zona queda libre.\u003cbr /\u003e\u003cbr /\u003eJ. Miur nos dice que podemos configurarla, por si queremos poner alguna cosa ahí, pero yo le he encontrado un uso práctico.\u003cbr /\u003e\u003cbr /\u003eHace unos días preparé una plantilla rounders 4, a la que añadí una segunda sidebar.\u003cbr /\u003eLa rounders se caracteriza por tener la sidebar partida en dos módulos, en cada uno de los cuales puedes añadir elementos, que tienen características propias que los diferencia entre si.\u003cbr /\u003eAsí, a cada uno le puedes poner un color de fondo diferente, y unos colores de letras y enlaces disitintos.\u003cbr /\u003e\u003cbr /\u003eYa, cuando tuneé la rounders 3, logré copiar esos módulos de manera que se repitieran y tener 4 o más módulos, cada uno con su Añadir elemento; de manera que a esa rounders 4 de dos columnas le puse también 4 módulos en cada columna. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eComo la ensanché para poner las dos sidebar, le puse una cabecera integrada en el código.\u003cbr /\u003eLe añadí una menubar, pero no lograba que se colocara bajo la cabecera sin que se cayera una de las sidebar, de manera que la puse encima de la cabecera.\u003cbr /\u003eCon internet Explorer se veia de coña, pero con Firefox se integraba en la zona de la cabecera, aunque no daba problemas. Tuve que bajar un poco el título del blog para que cupiera, pero nada más grave que éso.\u003cbr /\u003e\u003cbr /\u003eHe usado esta plantilla en un blog que he colocado en Utilidades, para hacer un blog-roll con el que cerrar el conjunto. Todo iba bien, hasta que ayer quise ponerle a esta plantilla una cabecera distinta ya que le había cambiado el fondo.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cbr /\u003eLa nueva cabecera, que en Explorer seguía sin darme problemas, en Firefox se veia fuera de sitio, como si la menubar la empujara.\u003cbr /\u003eY por más que modifiqué los paddings y los margins de la cabecera y de la propia menubar, no lograba que se colocara bien.\u003cbr /\u003e\u003cbr /\u003eHasta que me acordé del crosscol y pensé: ¿Porqué no probar a usarlo?\u003cbr /\u003e\u003cbr /\u003eDe manera que coloqué el código del contenido de la cabecera, desde \u003cspan style\u003d\"color:#990000;\"\u003eb:section\u003c/span\u003e hasta \u003cspan style\u003d\"color:#990000;\"\u003e/b:section\u003c/span\u003e, debajo de \u003cspan style\u003d\"color:#990000;\"\u003ediv id\u003d'crosscol-wrapper\u003c/span\u003e...etc. borrando entero el \u003cspan style\u003d\"color:#990000;\"\u003eb:section class\u003d'crosscol'\u003c/span\u003e ... etc. que está incluido.\u003cbr /\u003e\u003cbr /\u003eLuego borré lo que había copiado y en su lugar coloqué el código HTML de la menubar, borrándolo de donde estaba, encima de la cabecera.\u003cbr /\u003e\u003cbr /\u003eY ha funcionado.\u003cbr /\u003eLa menubar ocupa el espacio que ocupaba la cabecera, y la cabecera ocupa el espacio previsto para la publicidad.\u003cbr /\u003e¡Y todos contentos!\u003cbr /\u003eYo, porqué se ve bien en los dos navegadores, la plantilla, porqué por fin pueden acomodarse las cosas sin molestarse y los navegadores porqué pueden dejar de fastidiarme.\u003cbr /\u003e\u003cbr /\u003e¡Ah! por cierto, como podeis suponer, al principio intenté hacerlo al revés, colocando la menubar en el espacio del crosscol, pero en el maldito firefox las tres columnas del blog se veian descolocadas. \u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-141858361066207422?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/141858361066207422/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d141858361066207422","title":"3 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/141858361066207422"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/141858361066207422"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/04/aprovechar-el-crosscol.html","title":"Aprovechar el crosscol"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-830341214215414383"},"published":{"$t":"2008-03-30T17:09:00.007+02:00"},"updated":{"$t":"2008-03-31T21:23:35.616+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"La plantilla de un blog (1ª parte). Composición."},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eLa plantilla de un blog está compuesta de varias secciones que voy a desglosar para que os sea más sencillo localizar algo en ella.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTengamos en cuenta que el blog es una página única aunque luego cada entrada se abra de manera independiente y si hay más entradas de las que se muestran puedas ir hacia atrás para ver las anteriores.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eVeamos, pues, la composición de esta página.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn ella tenemos, debajo de todo, el cuerpo, (\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003ebody\u003c/strong\u003e\u003c/span\u003e), un fondo que, si quitásemos todos los códigos de color y/o direcciones de todos los background y dejásemos solo el de body, veríamos que la cubre entera.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEncima de este body se colocan las tres partes principales. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa cabecera, (\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003eheader\u003c/span\u003e\u003c/strong\u003e), que ocupa todo el ancho de la zona útil del blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEl cuerpo del blog, (\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003eouter-wrapper\u003c/span\u003e\u003c/strong\u003e), que también ocupa toda la zona útil, formado por las entradas (\u003cspan style\u003d\"color:#cc0000;\"\u003e\u003cstrong\u003emain-wrapper\u003c/strong\u003e\u003c/span\u003e) y la columna lateral, (\u003cspan style\u003d\"color:#cc0000;\"\u003e\u003cstrong\u003esidebar-wrapper\u003c/strong\u003e\u003c/span\u003e).\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003e\u003cspan style\u003d\"color:#000099;\"\u003eWrapper\u003denvoltorio, aunque en este caso puede decirse que más que un envoltorio es un contenedor.\u003c/span\u003e\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003e\u003cspan style\u003d\"color:#000099;\"\u003e---\u003c/span\u003e\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEl pie de página, (\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003efooter\u003c/span\u003e\u003c/strong\u003e), que también tiene el mismo ancho que la cabecera y el cuerpo del blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi añades una segunda columna la llamaremos \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003enewsidebar-wrapper\u003c/span\u003e\u003c/strong\u003e e irá incluida en el outer-wrapper. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa suma de las medidas de main-wrapper y sidebar-wrapper e incluso de newsidebar-wrapper, si la has añadido, ha de ser menor que la de outer-wrapper, ya que has de contar con pequeñas separaciones entre zonas. Si la suma de las tres es igual o superior a la de outer-wrapper, la sidebar (columna lateral) se cae y se coloca debajo de las entradas. En el caso de haber dos se cae una de las dos, dependiendo de cual de ellas no cabe en el contenedor general.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePero cada una de estas tres partes, sobre todo las dos últimas, tiene también un sector superpuesto configurable independientemente: los elementos (\u003cspan style\u003d\"color:#cc0000;\"\u003e\u003cstrong\u003ewidgets\u003c/strong\u003e\u003c/span\u003e).\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí en main-wrapper tenemos un fondo diferente del fondo del body y encima de él las entradas, (\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003epost\u003c/span\u003e\u003c/strong\u003e).\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn la columna lateral también tenemos un fondo que podemos diferenciar de los otros y encima los elementos, (\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003ewidget\u003c/span\u003e\u003c/strong\u003e), que añadimos.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLo mismo sucede con el pie de página. Al fondo que podemos ponerle, distinto a todos, encima podemos añadirle elementos que ocuparán todo el ancho.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePuedes ver un ejemplo de las distintas zonas en \u003ca href\u003d\"http://laeulalia-muestra.blogspot.com/\" target\u003d\"_blank\"\u003eeste blog\u003c/a\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn los siguientes capítulos veremos como se desglosa la plantilla y como se le añaden órdenes.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-830341214215414383?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/830341214215414383/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d830341214215414383","title":"1 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/830341214215414383"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/830341214215414383"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/03/la-plantilla-de-un-blog-1-parte.html","title":"La plantilla de un blog (1ª parte). Composición."}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-36747412689074464"},"published":{"$t":"2008-03-30T16:54:00.007+02:00"},"updated":{"$t":"2008-03-31T21:28:43.005+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"La plantilla de un blog (2ª parte). Desglose."},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eUna vez que conocemos la composición del blog vamos a desglosar el código.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTodas las plantillas empiezan con los \u003cspan style\u003d\"color:#cc0000;\"\u003ecréditos\u003c/span\u003e. Le siguen las \u003cspan style\u003d\"color:#cc0000;\"\u003evariables\u003c/span\u003e y tras ellas empieza lo que son las órdenes de estilo o sección \u003cspan style\u003d\"color:#cc0000;\"\u003eCSS\u003c/span\u003e. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eDespués vienen los códigos de las secciones y elementos, el \u003cspan style\u003d\"color:#cc0000;\"\u003eHTML\u003c/span\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLos créditos son como los títulos de las películas, así que pasaremos de ellos. Para lo único que nos sirven es para conocer el modelo de plantilla que estamos usando.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLas \u003cspan style\u003d\"color:#990000;\"\u003evariables\u003c/span\u003e. He hecho varias entradas acerca de ellas. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eHay dos grupos de variables, las que corresponden a los colores y las de las fuentes que se aplican a cada zona del blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eCada modelo de plantilla tiene unas cuantas \"de serie\"; algunas tienen muchas, otras tienen pocas, (la scribe, por ejemplo, adolece de falta de variables), pero eso no es problema pues podemos añadirle casi tantas como queramos. si no las usamos no pasa nada, pero son muy útiles para configurar el blog sin tener que andar tocando el código cada vez que queramos cambiarle la combinación de colores.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSolo hay que tener en cuenta algunas reglas básicas a la hora de crearlas y de aplicarlas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAl crearlas seguir las directivas de las que haya. Si una variable existente se escribe así: \u003cspan style\u003d\"color:#cc0000;\"\u003ebgcolor\u003c/span\u003e, no añadir una así: \u003cspan style\u003d\"color:#3333ff;\"\u003esidebarBgColor\u003c/span\u003e. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eQue en cada definición el nombre que le des se ha de escribir de dos maneras: todo junto y todo separado. Así la variable para el color de fondo de la sidebar sería \u003cspan style\u003d\"color:#cc0000;\"\u003esidebarbgcolor\u003c/span\u003e o \u003cspan style\u003d\"color:#3333ff;\"\u003esidebarBgColor\u003c/span\u003e en su primera definición, que corresponde al nombre, (la diferencia dependerá de como se escriban las ya existentes) y \u003cspan style\u003d\"color:#990000;\"\u003eSidebar Background Color\u003c/span\u003e en la segunda, que corresponde a la descripción, siempre. (Aquí no hay diferencias entre plantillas).\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY al añadirlas a un código hacerlo siempre exactamente como la has nombrado, si está todo en minúsculas o no, precedida del símbolo del dólar y terminando con un punto y coma, así: (siguiendo con el ejemplo del fondo de la sidebar) \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003ebackground-color:$sidebarbgcolor; \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eó \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003ebackground-color:$sidebarBgColor;\u003c/span\u003e\u003c/strong\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e(Si lo que vas a poner es una imagen sólo has de poner background).\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e¡Bien! Vamos a ver qué encontramos en el \u003cspan style\u003d\"color:#990000;\"\u003eCSS\u003c/span\u003e de la plantilla.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e(El orden en que te lo diga puede variar dependiendo de la plantilla que uses.)\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn primer lugar tenemos el \u003cspan style\u003d\"color:#cc0000;\"\u003ebody\u003c/span\u003e o cuerpo del blog. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn él suele haber un background (fondo general) y algunas órdenes que indican que la zona aprovechable estará centrada y otras consideraciones que no se suelen tocar.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePuede seguirle la descripción del blockquote, o no, depende de la plantilla, aunque últimamente suele salir en todas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eA continuación tenemos la descripción de los enlaces. En algunas sale encabezada por un \u003cspan style\u003d\"color:#cc0000;\"\u003eLink styles\u003c/span\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eHay tres o cuatro opciones, \u003cspan style\u003d\"color:#990000;\"\u003ea:link a:visited a:hover\u003c/span\u003e y en algunas \u003cspan style\u003d\"color:#cc0000;\"\u003ea:active\u003c/span\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTodas tienen dos características comunes el color y si el texto se va a ver con o sin subrayado.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi en las variables solo vienen de serie dos posibilidades para los enlaces, habrá un \u003cspan style\u003d\"color:#3333ff;\"\u003elinkcolor\u003c/span\u003e para el enlace normal \u003cspan style\u003d\"color:#990000;\"\u003ea:link\u003c/span\u003e y un \u003cspan style\u003d\"color:#3333ff;\"\u003evisitedlinkcolor\u003c/span\u003e para el resto.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePodemos añadir la variable para el link llamado hover, que es cuando ponemos el ratón encima pero sin pinchar.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn cuanto al subrayado, quitando lo de \u003cspan style\u003d\"color:#6600cc;\"\u003eunderline\u003c/span\u003e y cambiándolo por \u003cspan style\u003d\"color:#000099;\"\u003enone\u003c/span\u003e haremos que desaparezca la raya debajo del enlace.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLe sigue la zona útil ó \u003cspan style\u003d\"color:#990000;\"\u003eouter-wrapper\u003c/span\u003e, en la que hay el \u003cspan style\u003d\"color:#990000;\"\u003eheader\u003c/span\u003e, o cabecera, el \u003cspan style\u003d\"color:#990000;\"\u003emain\u003c/span\u003e ó zona de las entradas y la \u003cspan style\u003d\"color:#990000;\"\u003esidebar\u003c/span\u003e. Suelen presentarlas como \u003cspan style\u003d\"color:#990000;\"\u003ewrapper\u003c/span\u003e, ya que definen la zona contenida. Luego se ven los contenidos aparte. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eSi vas a añadir una sidebar, aquí es donde debes pegar el código de la nueva, preferiblemente debajo de la ya existente, y no por que la colocación del código en el CSS sea importante, sinó simplemente por una razón práctica. Te será más fácil encontrar el código si sigue un cierto orden, en caso de querer modificar algún dato.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003ePor ejemplo, cuando añado una menubar a una plantilla, si la coloco debajo de la cabecera, ahí, debajo del header, es donde pego el código. \u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003e---\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSigamos.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTras las definiciones de las zonas generales empiezan las de sus contenidos; \u003cspan style\u003d\"color:#990000;\"\u003epost\u003c/span\u003e, entradas, que empieza por la fecha, \u003cspan style\u003d\"color:#990000;\"\u003edate header\u003c/span\u003e, sigue con el título. \u003cspan style\u003d\"color:#990000;\"\u003epost h3\u003c/span\u003e, \u003cspan style\u003d\"color:#990000;\"\u003epost\u003c/span\u003e, entradas y con el \u003cspan style\u003d\"color:#990000;\"\u003epost footer\u003c/span\u003e, o pie del post.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTenemos también las definiciones de la sidebar, fondos, márgenes etc.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn algunas hay definiciones de los comentarios, aunque no le he metido mano y no se a qué se refiere, si a lo que vemos cuando entramos en una entrada individual, o al formulario, aunque imagino que es la primera opción.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEl Perfil, \u003cspan style\u003d\"color:#990000;\"\u003eProfile\u003c/span\u003e, en el que podemos quitar el margen y variar la posición de la imagen cambiando el \u003cspan style\u003d\"color:#990000;\"\u003efloat\u003c/span\u003e de \u003cspan style\u003d\"color:#990000;\"\u003e$startSide\u003c/span\u003e a \u003cspan style\u003d\"color:#000099;\"\u003e$endSide\u003c/span\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTenemos también unas definiciones de los elementos. Están encabezadas por la palabra de la ubicación y widget. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí los elementos de la sidebar empiezan con \u003cspan style\u003d\"color:#990000;\"\u003e.sidebar .widget\u003c/span\u003e, las entradas son \u003cspan style\u003d\"color:#990000;\"\u003e.main .widget\u003c/span\u003e y los elementos del pie de página \u003cspan style\u003d\"color:#990000;\"\u003e.footer .widget\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eA veces sidebar y main comparten directrices. Si queremos darle a unos unas órdenes diferentes a los otros, se puede separar, borrando, por ejemplo, \u003cspan style\u003d\"color:#000099;\"\u003e.main .widget\u003c/span\u003e y colocándolo debajo de la llave de cierre \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e} \u003c/span\u003e\u003c/strong\u003ecopiando todas las órdenes que hay para que siga funcionando. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eDe esta manera podemos hacer que los elementos de la sidebar tengan un color diferente del fondo de las entradas, y variar los márgenes de unos y otros independientemente.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa zona denominada \u003cspan style\u003d\"color:#990000;\"\u003eLayout\u003c/span\u003e define la trasera del blog, lo que vemos cuando queremos editar los elementos o añadir alguno.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY finalmente encontramos el \u003cspan style\u003d\"color:#990000;\"\u003eHTML\u003c/span\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEs la zona donde están definidas todas las cosas que contiene el blog y su ubicación exacta; por ello aquí si que importa su colocación. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi quieres poner una nueva sidebar, por ejemplo a la izquierda del blog, de manera que las entradas queden entre ambas, has de pegar el código encima de las definiciones del blog, de lo contrario la colocará en otro sitio.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn otras entradas explicaré más detalladamente el CSS y el HTML.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-36747412689074464?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/36747412689074464/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d36747412689074464","title":"3 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/36747412689074464"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/36747412689074464"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/03/la-plantilla-de-un-blog-2-parte.html","title":"La plantilla de un blog (2ª parte). Desglose."}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-3908233022536765012"},"published":{"$t":"2008-03-30T16:40:00.002+02:00"},"updated":{"$t":"2008-03-31T21:15:19.126+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"La plantilla de un blog (3ª parte) El CSS"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eEn la anterior entrada ya hemos visto las diversas secciones que aparecen en el \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003eCSS\u003c/span\u003e\u003c/strong\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn casi todas ellas puedes modificar los parámetros para reacomodar las zonas del blog, sobre todo cuando añades una sidebar o decides ensanchar la zona útil.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eNo todas las plantillas responden de igual manera a una misma orden, así para equilibrar el reparto de zonas mi consejo sería que primero le pongas un fondo al \u003cspan style\u003d\"color:#990000;\"\u003ebody\u003c/span\u003e o al \u003cspan style\u003d\"color:#990000;\"\u003eouter wrapper\u003c/span\u003e y luego le pongas un color de fondo al \u003cspan style\u003d\"color:#990000;\"\u003emain-wrapper\u003c/span\u003e o \u003cspan style\u003d\"color:#990000;\"\u003emain\u003c/span\u003e y a \u003cspan style\u003d\"color:#990000;\"\u003esidebar-wrapper\u003c/span\u003e y \u003cspan style\u003d\"color:#990000;\"\u003enewsidebar-wrapper\u003c/span\u003e si la tuvieras.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eDe esta manera resultará más fácil reacomodar las tres zonas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSe pueden añadir órdenes tipo \u003cspan style\u003d\"color:#000099;\"\u003epadding-$startSide\u003c/span\u003e o \u003cspan style\u003d\"color:#000099;\"\u003epading-$endSide\u003c/span\u003e para que la separación entre ellos se equilibre.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eUn ejemplo:\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eEstuve añadiendo una sidebar a una tictac y me encontré con este problema. \u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003ePese a que ambas sidebars medían lo mismo, la zona de las entradas tendía a quedarse pegada a la sidebar de la izquierda, en este caso la nueva.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eFui probando con los padding y los margin de las tres zonas, añadiendo y quitando píxels e incluso órdenes, hasta dar con la medida idónea que equilibraba las separaciones.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eOtra cuestión es la separación del contenido al borde.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSuele suceder que las entradas queden muy pegadas al borde del espacio que ocupa. También se soluciona modificando los paddings y margins, en este caso de \u003cspan style\u003d\"color:#990000;\"\u003e.main .widget \u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"color:#000000;\"\u003e---\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eJ Miur de \u003ca href\u003d\"http://vagabundia.blogspot.com/\" target\u003d\"_blank\"\u003eVagabundia\u003c/a\u003e tiene varios tutoriales en los que explica con mucha claridad la diferencia entre ambos y, aunque no tengo ni su habilidad ni su experiencia intentaré explicarlo.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSimplificando mucho, \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003emargin designa la distancia desde el borde hasta el contenido  \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003epadding la distancia del contenido al borde.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí si varías el padding el contenido se alejará o acercará al borde, mientras que variando el margin será el borde el que se moverá.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eA veces es conveniente que sea una cosa, a veces es preferible que sea la otra. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eNo puedo dar un sistema exacto, pues cada plantilla requiere un método, dependiendo de su construcción.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eAfortunadamente disponemos de la vista previa para ir viendo el efecto de los cambios y de Borrar cambios si éstos no son efectivos.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eEs por este motivo que suelo aconsejar guardar plantilla a cada cambio que hagamos que vaya bien. Nos ahorramos repetir cosas que ya hemos arreglado.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003e---\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eCuando añadimos una orden a un código hay que tener en cuenta no olvidar ningún signo.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí siempre cerraremos la línea con un punto y coma, pondremos el símbolo del dólar delante de una variable y la almohadilla delante de un código de color.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi olvidamos alguna de estas cosas puede suceder que no se aprecie cambio alguno o que de error.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003eModificaciones mas habituales\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003eLa cabecera.\u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi añadimos una imagen a la cabecera, ya sea desde Editar o desde el CSS, puede suceder que quede descentrada. En este caso basta con variar la distancia a la izquierda del blog, ya sea mediante la orden padding-$startSide o padding-left, aplicada a #header, .Header o #header-wrapper, depende de la plantilla, que suele ser la primera de las definiciones que hay de header.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa segunda suele corresponder al título y la tercera al subtítulo o descripcion.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn estos últimos podemos variar la posición de las letras, o con las medidas o con su situación, añadiendo, si no estuviera, text-align:$startSide; o text-align:$endSide o text-align:center; dependiendo de donde queramos ponerlo.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePero ¡Cuidado! si la plantilla es de las más antiguas las definiciones serán left, right o center.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"color:#000099;\"\u003ePor plantilla antigua no me refiero a que sea uno de los modelos que hay en blogger, sinó que la tengas desde antes de su modificación, pues ahora todas salen con la nueva definición.\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSucede lo mismo con el footer. También podemos definir como queremos que salgan los elementos, que por defecto saldrán colocados a la izquierda, añadiendo la orden de que los centre.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi queremos que las letras que salen habitualmente en mayúsculas, título, subtítulo, etc, salgan de manera normal, es decir tal como las escribas, has de buscar en cada zona esta línea \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003etext-transform: uppercase;\u003c/span\u003e\u003c/strong\u003e y eliminarla. Verás que a partir de ese momento dejan de salir en mayúsculas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY como he comentado en el post anterior, aquí es donde añades la orden de que una variable se aplique en un sitio concreto, ya sea de color o de fuente.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003ePor ejemplo la scribe tiene pocas variables de fuentes, con lo que todo acaba teniendo una fuente y un color iguales. Añadiendo las correspondientes a las distintas zonas de escritura, puedes diferenciarlas y variar la medida de las letras, el color etc. desde fuentes y colores.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEl CSS permite también añadir códigos completos para una zona en especial. Así, por ejemplo, si en la plantilla no está la disposición de los navegadores, (newer page, older page, y home o home page), se le pueden añadir.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTambién se le puede añadir el código para colocar iconos de autor y de etiquetas, o para definir el blockquote si no lo tuviera.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eComo de casi todo esto hay alguna entrada, no me extiendo más.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi en mis trapicheos con las plantillas descubro algo más que piense que debiera incluir, actualizaré la entrada.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-3908233022536765012?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/3908233022536765012/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d3908233022536765012","title":"10 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/3908233022536765012"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/3908233022536765012"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/03/la-plantilla-de-un-blog-3-parte-el-css.html","title":"La plantilla de un blog (3ª parte) El CSS"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"10"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-6234224899476788393"},"published":{"$t":"2008-03-30T16:20:00.002+02:00"},"updated":{"$t":"2008-03-31T21:20:36.122+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"La plantilla de un blog (4ª parte) El HTML"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eEn ésta zona es donde están las descripciones de todos y cada uno de los elementos del blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn vista normal del código veremos la descripción de las diferentes partes, aquí si que colocadas en estricto orden.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEmpieza con una descripción de las zonas incluidas en el \u003cspan style\u003d\"color:#990000;\"\u003eouter-wrapper\u003c/span\u003e y a partir de ahí puedes ir viendo las que hay.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLas distintas zonas empiezan con esta línea:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;div id\u003d\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003edonde \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003eid\u003c/span\u003e\u003c/strong\u003e significa identidad y, detrás del signo igual, la zona concreta a la que se refiere.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi tomamos como referencia la cabecera, que es la primera que se encuentra, verás que la línea completa es así:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;div id\u003d'header-wrapper'\u0026gt;\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eindicando que la identidad del sector es el contenedor de la cabecera.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eA continuación hay la descripción de la sección que empieza así:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;b:section class\u003d\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eseguido por el tipo de sector del que se trata. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eContinuando con el código de la cabecera la línea es esta:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;b:section class\u003d'header' id\u003d'header' maxwidgets\u003d'1' showaddelement\u003d'no'\u0026gt;\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003edonde nos dice que la sección pertenece a la clase de las cabeceras y que su identidad es header.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTambién nos dice que solo puede contener 1 elemento y que no verás un añadir elemento en el layout.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eFíjate que hay un espacio separando cada definición. Esto es lo que, cuando copiamos un código para añadirlo al HTML, nos suele dar error, pues al copiar es fácil que estos espacios desaparezcan. Hay que mirar bien que estén todos para evitar estos errores. También puedes ver que lo que está detrás de un \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003d\u003c/span\u003e\u003c/strong\u003e está entre apóstrofes \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e'---'\u003c/span\u003e\u003c/strong\u003e\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"color:#000000;\"\u003e---\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi la zona contiene un elemento verás una línea que empieza así:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;b:widget id\u003d\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ey, tras el igual, la identidad del elemento, no su título. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePor ello si se trata de una lista de enlaces pondrá \u003cspan style\u003d\"color:#990000;\"\u003elinkList\u003c/span\u003e seguido de un número. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa primera lista que añadas al blog será la \u003cspan style\u003d\"color:#000099;\"\u003elinkList1\u003c/span\u003e, la siguiente \u003cspan style\u003d\"color:#000099;\"\u003elinkList2\u003c/span\u003e y así sucesivamente. Lo mismo sucede con los elementos HTML/Javascript.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eDos elementos, aunque sean iguales, han de tener una identidad única.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLos elementos únicos llevan el 1, aunque sean irrepetibles.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSiguiendo con la cabecera, como contiene uno nos explica sus características así:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;b:widget id\u003d'Header1' locked\u003d'true' title\u003d'El título del blog (cabecera)' type\u003d'Header'/\u0026gt;\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAquí nos está diciendo que la identidad del elemento es Header1, que está anclado, que su título es el título del blog (entre paréntesis que es la cabecera) y que pertenece al tipo Header.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eEn los elementos que añadimos a la sidebar, si no se les pone título les adjudica como tal el nombre del elemento, con lo que todas las listas de enlaces se llamarán Link List y todos los elementos HTML/Javascript se llamarán HTML. Por eso es importante, siempre que sea posible, ponerles un título para facilitar su localización en caso de tener que usarlos, por ejemplo si queremos ponerles un scroll.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003e---\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTras esto se cierran las explicaciones u órdenes, en sentido inverso al que tienen con esto:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;/b:section\u0026gt;\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;/div\u0026gt;\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eFíjate que se cierran con la barra inclinada \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e/\u003c/span\u003e\u003c/strong\u003e y que sin embargo no parece haberse cerrado la del b:widget. Eso es por que en esta definición ya se incluye la barra al final del código.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAlgunos códigos se cierran ellos mismos, otros hay que cerrarlos aparte.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePero...\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePero si expandes elementos, o plantillas de artilugios, verás que este código, en principio muy simple se expande.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY, siguiendo con la cabecera, encontraremos condicionales \u003cspan style\u003d\"color:#990000;\"\u003eb:if cond\u003d\u003c/span\u003e e inclusibles \u003cspan style\u003d\"color:#990000;\"\u003eb:includable\u003c/span\u003e \u003cspan style\u003d\"color:#990000;\"\u003eid\u003d\u003c/span\u003e o \u003cspan style\u003d\"color:#990000;\"\u003eb:else\u003c/span\u003e que indica que si sucede eso pero no lo otro actue de una forma u otra.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003eUn ejemplo claro de ésto es la zona de los comentarios, donde dependiendo de su cantidad saldrá una cosa u otra.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn el caso que estamos viendo como se trata de la cabecera saldrá todo lo relativo al título y subtítulo de blog, a si has añadido una imagen, si la vas a mostrar debajo del título o en lugar del título y otras muchas cosas, como que el título del blog ha de ser un enlace. Y así un código de apenas seis líneas se convierte en algo mucho más extenso y detallado.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY lo mismo sucede con las demás zonas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn la zona de las entradas, \u003cspan style\u003d\"color:#990000;\"\u003emain-wrapper\u003c/span\u003e, nos define todas y cada una de sus partes, incluidos los dos sistemas de añadir comentarios, el que vemos en la página principal y el que vemos cuando abrimos una sola entrada.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTambién se incluye en esta zona lo referente a la navegación del blog, y lo de suscribirse a entradas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY si añades un elemento a la zona de las entradas, este se verá en el lugar exacto que ocupe. Si lo pones encima, lo verás antes de la descripción de las entradas y si lo pones debajo lo verás después; pues como he comentado antes, en esta zona los diferentes elementos del blog aparecen en el orden exacto que tienen en el blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAntes o después de main-wrapper, dependiendo de si está a la izquierda o a la derecha, veremos la zona de la columna lateral, \u003cspan style\u003d\"color:#990000;\"\u003esidebar-wrapper\u003c/span\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTambién aquí verás todos los elementos que hayas añadido, en el orden en que los tienes en el blog, con su identidad y su título (si se lo has puesto). \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi no lo has hecho tendrá como nombre el mismo que le identifica, pero sin número o su traducción al castellano.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e--- \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003ePor poner un ejemplo, el elemento de las etiquetas tiene como id \u003cspan style\u003d\"color:#000099;\"\u003eLabel1\u003c/span\u003e y como título \u003cspan style\u003d\"color:#000099;\"\u003eEtiquetas\u003c/span\u003e. Si editas el elemento y cambias lo de Etiquetas por otra palabra, ésa será la que aparecerá en el código.\u003c/em\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eCierra la zona (en las plantillas actualizadas) un \u003cspan style\u003d\"color:#990000;\"\u003eend content-wrapper\u003c/span\u003e, le sigue el \u003cspan style\u003d\"color:#990000;\"\u003efooter-wrapper\u003c/span\u003e, para cerrar el código con un \u003cspan style\u003d\"color:#990000;\"\u003eend outer-wrapper\u003c/span\u003e y los cierres de todo el conjunto \u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;/body\u0026gt;\u003c/span\u003e\u003c/code\u003e y \u003ccode\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;/html\u0026gt;\u003c/span\u003e\u003c/code\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY hasta aquí esta colección de entradas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEspero que os haya servido para entender un poco mejor qué hay ahí.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-6234224899476788393?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/6234224899476788393/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d6234224899476788393","title":"1 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/6234224899476788393"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/6234224899476788393"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/03/la-plantilla-de-un-blog-4-parte-el-html.html","title":"La plantilla de un blog (4ª parte) El HTML"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-3493890413245069718"},"published":{"$t":"2008-03-21T17:02:00.005+01:00"},"updated":{"$t":"2008-05-25T16:41:27.331+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"trucos varios"}],"title":{"type":"text","$t":"Modificar tu blog sin perder nada."},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eHoy me han dejado un comentario en Tuneando la tic-tac, planteándome esta cuestión:\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cem\u003e\"Si cambio la plantilla, aunque sea el mismo modelo, ¿se guardan los cambios que he realizado en la mia y los que tengo añadido en la sidebar?.\"\u003c/em\u003e\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEl asunto está en que mi interlocutor tiene una tic-tac que ha estado tuneando y ha visto una plantilla tic-tac con dos sidebars y le gustaría colocarla.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eLa respuesta a su pregunta es No.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eCuando cambias la plantilla, lo primero que te advierte al hacer vista previa es que van a eliminarse una serie de elementos. (Por eliminar, elimina incluso la lista de etiquetas o el botón de Blogger, si la plantilla nueva no los tiene incluidos en el código).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEso es así porqué en nuestra plantilla, cada vez que añadimos un elemento a la sidebar, se añade el código correspondiente al mismo, eso de \u003ccode\u003e\u0026lt;b:widget...\u003c/code\u003e etc. etc. cada uno con su identidad propia, LinkList1, 2, 3, etc. si son listas de enlaces, HTML1, 2 , 3 etc. si son elementos HTML/Javascript, y así todos los demás.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eAl no figurar en el código de la plantilla nueva, estos elementos se eliminan.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEn cuanto a los cambios realizados para personalizar nuestra plantilla, esos se eliminan incluso cambiando la plantilla por otra de blogger, de esas que hay en la pestaña Seleccionar plantilla nueva, aunque sea el mismo modelo. La causa es la misma. Los cambios que hayas realizado no aparecen en el código de la nueva plantilla y se borran. (Te avisan de que esto sucederá en la propia página donde puedes escoger plantilla nueva).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003ePero hay un par de maneras de variar el aspecto de tu blog sin perder nada, aunque lleva algo de tiempo y has de saber \"leer\" el código.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEn primer lugar debes hacer algo que aconsejo a todo el mundo que tiene un blog con muchas cosas, tener un blog de pruebas escondido.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEn él podrías hacer todos los cambios que quisieras, sin temor a perder información importante.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eAsí que vamos a ver las dos maneras de modificar una plantilla sin perder nada.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003ePrimera posibilidad: \u003cstrong\u003eLa plantilla es el mismo modelo que la tuya\u003c/strong\u003e.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi la plantilla es la misma que la que tienes, pero, por ejemplo con dos sidebars, como es el caso de mi amigo y su tic-tac, descargas la plantilla a tu pc. Abres tu blog, en Edición de HTML y abres el código de la plantilla (te la abrirá explorer en una ventana externa).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY vas comparando qué diferencias hay entre ambas. \u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eLas más importantes serán estas: medidas de los wrapper, tanto los width como los paddings y margins y codigo para la newsidebar, en el CSS; y código para la newsidebar en el HTML, prestando especial atención a qué widget hay colocado en ese código para no repetir uno que ya tengas, o te dará error. (Suele ser el perfil o el Archivo, así que con borrarlo del código de sidebar que ya hay en tu blog, es suficiente).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eUna vez estés seguro de haber variado estas cosas, Vista previa.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi lo has hecho bien, tendrás la segunda sidebar en tu blog, sin que haya cambiado nada. (En realidad es como si hubieras visto el truco en algún blog y lo hubieras aplicado).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSegunda opción: \u003cstrong\u003eLa plantilla no es el mismo modelo\u003c/strong\u003e.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEn este caso es cuando echamos mano del blog de pruebas.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eCargas la plantilla que quieres poner, en el blog de pruebas y la guardas.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY añades, a través de Elementos de la página, tantos elementos de enlaces como tengas en tu blog, aunque solo pongas en cada uno de ellos un enlace a tu propio blog. (Cuando la cargues en tu blog, el contenido variará).\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eSi tienes elementos de texto, añade tantos como tengas, aunque solo escribas hola, y si tienes elementos HTML/Javascript, copia los códigos de un blog a otro.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn este caso, lo ideal sería que pusieras cada cosa en el mismo elemento en que lo tienes.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eTe explico como:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAbre el blog de pruebas, y también el que vas a modificar, cada uno en una ventana.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAdemás abre en otra ventana el blog serio y ponte en Edición de HTML, de manera que tendrás el blog \"serio\" abierto dos veces: una en Edición de HTML y otra en elementos de la página.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eComo en el de pruebas aún no habrá ningún elemento HTML, el primero que añadas será el 1, el segundo el 2 y así sucesivamente.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAñades el primer elemento y miras en el código del blog \"serio\" qué tienes en el HTML1.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi has puesto título a los elementos te será fácil verlo.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí que si, por ejemplo, el HTML1 se llama \"comentarios\", en el primer HTML que añadas al blog de pruebas pones lo que haya en el elemento correspondiente del blog \"serio\".\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eRepite esta operación tantas veces como elementos HTML/javascript tengas.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eAsegúrate de que no te dejas nada y descarga la plantilla del blog de pruebas a tu pc, poniéndole un nombre, si no tuviera, para que sepas cual es.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eLuego cárgala en tu blog \"serio\".\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eAl haber, en la plantilla que cargues, los mismos elementos que había en tu blog, sus contenidos se colocarán en su sitio. Lo peor que puede pasar es que estén algo descolocados.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eY si habías añadido alguna mejora, tipo menubar o algo parecido, lo vuelves a añadir una vez que veas que la nueva plantilla funciona bien.\u003c/div\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eEs trabajoso, lo se, pero bastante menos que tener que volver a hacer todas las listas de enlaces, sobre todo si eres de los que tienen muchos.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-3493890413245069718?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/3493890413245069718/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d3493890413245069718","title":"2 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/3493890413245069718"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/3493890413245069718"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/03/modificar-tu-blog-sin-perder-nada.html","title":"Modificar tu blog sin perder nada."}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-6712629211485225968"},"published":{"$t":"2008-03-11T01:29:00.003+01:00"},"updated":{"$t":"2008-12-01T01:36:04.116+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"sidebar"}],"title":{"type":"text","$t":"Cambiar la sidebar de sitio"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eHoy he descubierto la sopa de ajo.\u003cbr /\u003eEs una forma de decir que quizás ya se sepa lo que voy a contar, pero para mi ha sido un éxito, teniendo en cuenta que mis conocimientos de informática y de manejo de códigos, son más bien pocos, haberlo descubierto solita.\u003cbr /\u003eSe me ha ocurrido mientras preparaba las denim con fondos y cabeceras diferentes: ¿que pasa si cambio las columnas de sitio?\u003cbr /\u003ePues bien, pasar no pasa nada, simplemente que ves el blog al revés.\u003cbr /\u003eLo he probado con la rounders, y funciona. Mañana, que hoy es ya muy tarde, lo intentaré con otras, aunque imagino que en todas será posible.\u003cbr /\u003eÚnicamente me tendré que fijar en las que tengan un dibujo para que quede en el extremo más alejado de la página, pero en el lado contrario.\u003cbr /\u003eY es tan sencillo como hacer un par de cambios.\u003cbr /\u003ePor un lado, en el sector del CSS hay que cambiar los \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003efloat\u003c/span\u003e\u003c/strong\u003e de los \u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003emain wrapper\u003c/strong\u003e\u003c/span\u003e y \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003esidebar wrapper\u003c/span\u003e\u003c/strong\u003e, o la denominación que tenga en cada plantilla, aunque suele ser ésta y donde ponga \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003estartSide\u003c/span\u003e\u003c/strong\u003e poner \u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003eendSide\u003c/strong\u003e\u003c/span\u003e o \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003eleft\u003c/span\u003e\u003c/strong\u003e por \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003eright\u003c/span\u003e\u003c/strong\u003e, depende del modelo y del tiempo que haga que la tengas y viceversa. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLuego \u003cstrong\u003eSIN\u003c/strong\u003e expandir artilugios, copiar y pegar el código del sector de las entradas que será algo así:\u003c/div\u003e\u003cbr /\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'main-wrap1'\u0026gt;\u0026lt;div id\u003d'main-wrap2'\u0026gt;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;b:section class\u003d'main' id\u003d'main' showaddelement\u003d'no'\u0026gt;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;b:widget id\u003d'Blog1' locked\u003d'true' title\u003d'Entradas del blog' type\u003d'Blog'/\u0026gt;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;/b:section\u0026gt;\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/span\u003e\u003cbr /\u003e\u003c/blockquote\u003e\u003cbr /\u003edebajo del código de la sidebar que empieza así:\u003cbr /\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;div id\u003d'sidebar-wrap'\u0026gt;\u003c/code\u003e\u003c/strong\u003e\u003c/span\u003e\u003c/blockquote\u003ePara saber donde termina el código de la sidebar, solo has de buscar el siguiente\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u003ccode\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u003ccode\u003e\u0026lt;/b:section\u0026gt;\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003e\u003c/blockquote\u003e\u003c/strong\u003e\u003c/span\u003e\u003c/code\u003ey pegar el código anterior justo debajo, \u003cspan style\u003d\"font-size:130%;color:#000099;\"\u003eeliminándolo del lugar que ocupaba anteriormente\u003c/span\u003e, de lo contrario te dará error por repetición.\u003cbr /\u003eVista previa y si no ha habido errores, verás la sidebar en el lado contrario.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-6712629211485225968?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/6712629211485225968/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d6712629211485225968","title":"1 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/6712629211485225968"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/6712629211485225968"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/03/cambiar-la-sidebar-de-sitio.html","title":"Cambiar la sidebar de sitio"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-9170550082237868047"},"published":{"$t":"2008-03-02T01:24:00.003+01:00"},"updated":{"$t":"2008-04-09T21:55:54.789+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"avisos"}],"title":{"type":"text","$t":"Plantillas para el blog."},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eComo dije el otro día, eso de Google pages hizo que se me encendiera una bombillita de esas de ¡idea!. La he madurado estos días y hoy la he puesto en práctica.\u003cbr /\u003eY el resultado de ella puedes verlo \u003ca href\u003d\"http://laeulalia-ideas.blogspot.com/\" target\u003d\"_blank\"\u003eaquí\u003c/a\u003e.\u003cbr /\u003eEspero que os guste. \u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-9170550082237868047?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/9170550082237868047/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d9170550082237868047","title":"6 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/9170550082237868047"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/9170550082237868047"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/03/plantillas-para-el-blog.html","title":"Plantillas para el blog."}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-7608505954582116970"},"published":{"$t":"2008-02-16T17:47:00.004+01:00"},"updated":{"$t":"2008-12-01T01:55:43.055+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"footer"},{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"elementos"}],"title":{"type":"text","$t":"Tres columnas en el pie de página"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eNo se si has bajado hasta el final de esta página. Si lo has hecho habrás visto que hay allí 3 columnas más encima del pie de página \"normal\".\u003cbr /\u003eHace días que lo tengo colocado, casi desde que Rosa (como no) publicó el truco y voy a contártelo por si te apetece ponerlo en práctica en tu blog.\u003cbr /\u003eResulta muy útil si tienes una o dos sidebars muy llenas, para descongestionarlas un poco. Como ves yo las utilizo para colocar los \"chivatos\", algunos logotipos y otras tonterías, de este modo las sidebars no se alargan más que las entradas.\u003c/div\u003e\u003cbr /\u003e---\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003e¡Vamos a ello!\u003cbr /\u003ePara empezar, si tienes algo colocado en el pie de página original, alguna imagen o algo así, debes apartarlo. para ello es suficiente con que lo coloques momentáneamente en la sidebar, ya volverás a ponerlo donde estaba.\u003cbr /\u003eAhora entra en Diseño/Edición de HTML y sin expandir artilugios busca, casi al final, este código\u003c/div\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#990000;\"\u003e\u003ccode\u003e\u003cspan style\u003d\"color:#cc0000;\"\u003e\u0026lt;div id\u003d'footer-wrapper'\u0026gt;\u003c/span\u003e\u003c/code\u003e\u003cbr /\u003e\u003c/span\u003e\u003cspan style\u003d\"color:#000000;\"\u003e\u003ccode\u003e\u003cstrong\u003e\u0026lt;b:section class\u003d'footer' id\u003d'footer'/\u0026gt;\u003c/strong\u003e\u003c/code\u003e\u003cbr /\u003e\u003c/span\u003e\u003cspan style\u003d\"color:#cc0000;\"\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/span\u003e\u003cbr /\u003e\u003cbr /\u003eAunque no todas las plantillas son exactas, la línea que nos interesa, la que está resaltada en negrita, si debería estar en todas.\u003cbr /\u003eUna vez localizada, sustituye dicha línea por este código:\u003cbr /\u003e\u003cbr /\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer-columna-contenedor'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer2' style\u003d'width: 30%; float: left; margin:0; text-align: left;'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;b:section class\u003d'footer-column' id\u003d'col1' preferred\u003d'yes' style\u003d'float:left;'/\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer3' style\u003d'width: 40%; float: left; margin:0; text-align: left;'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;b:section class\u003d'footer-column' id\u003d'col2' preferred\u003d'yes' style\u003d'float:left;'/\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer4' style\u003d'width:30%; float: right; margin:0; text-align:left;'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;b:section class\u003d'footer-column' id\u003d'col3' preferred\u003d'yes' style\u003d'float:right;'/\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;div style\u003d'clear:both;'/\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;hr align\u003d'center' color\u003d'#6633FF' width\u003d'90%'/\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/p\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;div id\u003d'footer-bottom' style\u003d'text-align: center; padding: 10px; text-transform: lowercase;'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;b:section class\u003d'footer' id\u003d'col-bottom' preferred\u003d'yes'\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;b:widget id\u003d'Text\u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003e2\u003c/strong\u003e\u003c/span\u003e'locked\u003d'false'title\u003d''type\u003d'Text'/\u0026gt;\u003c/code\u003e \u003ccode\u003e\u0026lt;/b:section\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;div style\u003d'clear:both;'/\u0026gt;\u003c/code\u003e\u003cbr /\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/span\u003e\u003c/blockquote\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003eFíjate que hay un \u003cspan style\u003d\"color:#990000;\"\u003e2\u003c/span\u003e que he remarcado en rojo entre el código azul. Si tienes más de dos elementos Texto, esos en los que escribir algo, cambia este número por uno más alto.\u003cbr /\u003e\u003cbr /\u003eAhora vamos a la parte del CSS y encima de \u003ccode\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003e]]\u0026gt;\u0026lt;/b:skin\u0026gt;\u003c/span\u003e\u003c/strong\u003e\u003c/code\u003e pegaremos estas líneas:\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003e\u003cblockquote\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003e#footer-columna-contenedor {\u003cbr /\u003eclear:both;\u003cbr /\u003e}\u003cbr /\u003e.footer-columna{\u003cbr /\u003epadding:10px;\u003cbr /\u003e}\u003c/strong\u003e\u003c/span\u003e\u003c/blockquote\u003e\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cdiv align\u003d\"justify\"\u003eVista previa y si la página carga bien, pues no verás cambios a simple vista, Guardar plantilla.\u003cbr /\u003eUna vez guardada, entra en Elementos de la página y allí verás las tres columnas, en el pie de página, cada una con su Añadir elemento de página correspondiente.\u003cbr /\u003eSi visitas a Rosa en \u003ca href\u003d\"http://elescaparatederosa.blogspot.com/2008/01/aadir-tres-columnas-en-la-seccin-del.html\" target\u003d\"_blank\"\u003eesta entrada \u003c/a\u003etiene una captura de como se ve.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-7608505954582116970?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/7608505954582116970/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d7608505954582116970","title":"7 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/7608505954582116970"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/7608505954582116970"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/02/tres-columnas-en-el-pie-de-pgina.html","title":"Tres columnas en el pie de página"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"7"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-2935649077329967744"},"published":{"$t":"2008-02-06T19:56:00.000+01:00"},"updated":{"$t":"2008-12-01T01:36:04.130+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"fondo"},{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"}],"title":{"type":"text","$t":"Cambiar el fondo del blog"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eCuando alguien entra aquí, el \"Chivato\" que hay al final de todo me dice por qué vía lo ha hecho.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi ha entrado desde otro blog, o si ha hecho una búsqueda en google y éste le ha mostrado alguna entrada de aquí que contiene alguna palabra de las que ha escrito.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eA veces google acierta de lleno, la entrada responderá a la búsqueda, pero otras no muestra exactamente lo que se está buscando. Eso es porqué yo he titulado las entradas de una forma concreta y, a lo mejor, el título que respondería a la búsqueda en cuestión no contiene las palabras escritas en la solicitud.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEl título de esta entrada es un claro ejemplo de esto.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eNo es la primera vez que alguien escribe \"como cambiar el fondo del blog\" y google muestra mi entrada \"Cambiar la plantilla por otra de blogger\".\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY, claro, esto no es exactamente lo que se ha solicitado.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePor eso se me ha ocurrido que cuando eso suceda, haré alguna entrada titulándola con la frase usada en la búsqueda y, si ya he publicado el truco, dejaré en ella el enlace, a la entrada concreta.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAsí que, si has llegado aquí en busca del modo de cambiar el fondo de tu blog, pero no la plantilla, encontrarás como hacerlo en estas entradas:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2007/10/el-fondo-del-blog.html\" target\u003d\"_blank\"\u003eFondo del blog (plantilla harbor)\u003c/a\u003e, \u003ca href\u003d\"http://laeulalia-rounders.blogspot.com/2007/11/el-fondo-de-la-pgina.html\" target\u003d\"_blank\"\u003eEl fondo de la página (plantilla rounders)\u003c/a\u003e, \u003ca href\u003d\"http://laeulalia-scribe.blogspot.com/2007/11/el-fondo-del-blog.html\" target\u003d\"_blank\"\u003eEl fondo del blog (plantilla scribe)\u003c/a\u003e, \u003ca href\u003d\"http://laeulalia-minima.blogspot.com/2007/12/como-modificar-esta-plantilla-para-que.html\" target\u003d\"_blank\"\u003eModificar la mínima (punto 6)\u003c/a\u003e, \u003ca href\u003d\"http://laeulalia-tic-tac.blogspot.com/2008/02/cambiar-el-fondo-del-blog.html\" target\u003d\"_blank\"\u003eCambiar el fondo del blog (Tic-tac)\u003c/a\u003e, \u003ca href\u003d\"http://laeulalia-thisaway.blogspot.com/2008/02/cambiar-el-fondo-del-blog.html\" target\u003d\"_blank\"\u003eCambiar el fondo del blog (thisaway)\u003c/a\u003e , \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn las plantillas que no están aquí mencionadas, cambiar el fondo del blog, o de la página, o de ambas partes, (pues son independientes), suele ser muy parecido y las zonas a modificar suelen tener denominaciones comunes.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#003300;\"\u003eTruco para saber qué has de cambiar (si no lo tienes muy claro):\u003c/span\u003e\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn Plantilla/Edición de HTML, sin expandir elementos. \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAntes de tocar nada haz vista previa.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eComo abre el blog en otra ventana, borras una dirección de las que hay en la zona \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003ebody\u003c/span\u003e\u003c/strong\u003e o \u003cstrong\u003e\u003cspan style\u003d\"color:#990000;\"\u003emain wrapper\u003c/span\u003e\u003c/strong\u003e y pinchas en vista previa. Miras qué ha cambiado y, en cuanto sepas qué modifica, le das a borrar cambios. Vuelve a pinchar en vista previa para poder comparar. Y así sucesivamente con todas las que haya. Cada vez que veas que has borrado la correcta, anota cual es y cuando estés totalmente segur@ de donde y como cambiará tu blog, cambia las direcciones originales por las de tu fondo personalizado.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn algunas plantillas también tendrás que modificar la zona llamada \u003cspan style\u003d\"color:#990000;\"\u003e\u003cstrong\u003eSidebar wrapper\u003c/strong\u003e \u003cspan style\u003d\"color:#000000;\"\u003epues, aparte de que también puede ser independiente, algunas tienen un fondo distinto al resto del blog.\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eIré modificando (tuneando) otras plantillas, sobre todo las que resultan más complicadas, pero, de momento, espero que estas indicaciones te sirvan.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003eNota\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi no tienes claro cual es tu plantilla haz esto: Pincha en la pestaña Plantilla y en Seleccionar plantilla nueva. La que esté marcada es la que usas, siempre y cuando sea una plantilla de blogger. Si no pinchas en ninguna diferente, no variará nada.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-2935649077329967744?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/2935649077329967744/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d2935649077329967744","title":"9 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/2935649077329967744"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/2935649077329967744"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2008/02/cambiar-el-fondo-del-blog.html","title":"Cambiar el fondo del blog"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-8911287618204769592"},"published":{"$t":"2007-10-29T21:29:00.000+01:00"},"updated":{"$t":"2008-04-09T21:55:54.790+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"avisos"}],"title":{"type":"text","$t":"Tuneando plantillas"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eEste fin de semana me han pedido ayuda para hacer cambios en dos plantillas en las que aún no había intentado nada.\u003cbr /\u003eNo me fue posible ayudar a hacer lo que buscaban, así que decidí tunear una muestra de cada una de las que hay y dejarlas con los cambios hechos y las explicaciones para que cada cual pueda echarle una ojeada a la suya.\u003cbr /\u003eEn la barra lateral encontrareis el enlace correspondiente a cada blog/modelo conforme los vaya tuneando.\u003cbr /\u003eDe momento ya he empezado con la scribe.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSaludos.\u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-8911287618204769592?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/8911287618204769592/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d8911287618204769592","title":"3 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/8911287618204769592"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/8911287618204769592"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2007/10/tuneando-plantillas.html","title":"Tuneando plantillas"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-1137188398575187603.post-6109203710320542431"},"published":{"$t":"2007-10-17T00:10:00.002+02:00"},"updated":{"$t":"2009-12-11T19:20:40.346+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"plantilla Harbor"},{"scheme":"http://www.blogger.com/atom/ns#","term":"plantillas"},{"scheme":"http://www.blogger.com/atom/ns#","term":"sidebar"}],"title":{"type":"text","$t":"La plantilla Harbor con dos columnas laterales"},"content":{"type":"html","$t":"\u003cdiv align\u003d\"justify\"\u003eAunque no lo parezca, esta plantilla es la Harbor.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa elegí por ser la misma que utilizo en \u003ca href\u003d\"http://la-eulalia.blogspot.com/\" target\u003d\"_blank\"\u003eel otro blog \u003c/a\u003eque tenía cuando empecé con éste, ya que, en principio, este blog iba a servirme como conejillo de indias para probar todos los trucos válidos que encontrara por ahí.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAlgunas de las modificaciones que he hecho aquí no las he aplicado en el otro, como lo de ponerle dos sidebars, pues, al intentarlo en el otro blog, se me descontrolaron mucho las cosas que tengo agregadas en la barra lateral, por lo que lo dejé como estaba.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePero si tu también tienes este modelo de plantilla y quieres tener dos columnas laterales en tu blog, has de modificar el código HTML tal y como voy a explicarte.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e(El truco lo encontré en \u003ca href\u003d\"http://elescaparatederosa.blogspot.com/2007/08/plantilla-harbor-con-tres-columnas.html\" target\u003d\"_blank\"\u003eEl escaparate de Rosa\u003c/a\u003e).\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLas plantillas de blogger tienen tres secciones independientes (en cierto modo), que encontrarás, en este orden, al pinchar en Edición de HTML de la pestaña Plantilla.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eLa primera sección, que está justo debajo de los créditos de la plantilla, corresponde a los Variable name, de los que hablo en \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com/2007/11/los-variables-fuentes-y-colores.html\" target\u003d\"_blank\"\u003eotra entrada\u003c/a\u003e; la segunda es la sección del CSS y por último la del código HTML, que expandimos al pinchar en Expandir elementos.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePara empezar a modificar esta plantilla primero has de localizar en el sector CSS la medida del \"cuerpo\" aprovechable del blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEs ésta línea: \u003cstrong\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,0)\"\u003emin-width:\u003cspan style\u003d\"COLOR: rgb(153,0,0)\"\u003e890px\u003c/span\u003e;\u003c/span\u003e\u003c/strong\u003e que encontrarás bajo el encabezado \u003cstrong\u003ePage Structure\u003c/strong\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn principio esta medida está en píxels.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eBorras lo que aquí está en rojo, menos el punto y coma, y escribes \u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003e100%\u003c/strong\u003e\u003c/span\u003e para que el blog se expanda por toda la zona útil.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eUn poco más abajo verás \u003cstrong\u003emain-wrapper\u003c/strong\u003e, que corresponde a la zona de las entradas, allí cambias el \u003cstrong\u003e\u003cspan style\u003d\"COLOR: rgb(153,0,0)\"\u003e64%\u003c/span\u003e\u003c/strong\u003e que hay por un \u003cstrong\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e50%\u003c/span\u003e\u003c/strong\u003e, a fin de que dicha zona ocupe solo la mitad del espacio.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAhora has de reestructurar la barra lateral (sidebar) y en \u003cstrong\u003esidebar-wrapper\u003c/strong\u003e, dejas el ancho (\u003cstrong\u003ewidth\u003c/strong\u003e) en un \u003cstrong\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e24%\u003c/span\u003e\u003c/strong\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn el bloque siguiente añades esto: \u003cstrong\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003epadding: 10px;\u003c/span\u003e\u003c/strong\u003e para separar la barra lateral de las entradas.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eUna vez hechos estos cambios ya puedes copiar el código íntegro de la sidebar y pegarlo debajo del existente, cambiando el nombre sidebar por newsidebar y el float leftt por float right.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEl código resultante deberá ser más o menos así:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003e\u003cblockquote\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003e#newsidebar-wrapper\u003cbr /\u003e{ \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003ewidth:24%; \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003efloat:right; \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003eword-wrap:\u003cbr /\u003ebreak-word; /* fix for long text breaking sidebar float in IE */ \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003eoverflow: hidden;\u003cbr /\u003e/* fix for long non-text content breaking IE sidebar float\u003cbr /\u003e*/\u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003e}\u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003e\u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003e#newsidebar { \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003emargin:0; \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003epadding:10px; \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003epadding-top: 0px; \u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e\u003cstrong\u003e}\u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003c/blockquote\u003e\u003c/strong\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eAhora has de modificar el código HTML. Localiza esta línea:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#cc0000;\"\u003e\u0026lt;div id\u003d'main-wrapper'\u0026gt;\u003c/span\u003e\u003c/strong\u003e\u003cbr /\u003e\u003cbr /\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ey justo encima pegas esto:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cstrong\u003e\u003cblockquote\u003e\u003cdiv align\u003d\"justify\"\u003e\u003ccode\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u0026lt;div id\u003d'newsidebar-wrapper'\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/code\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u0026lt;b:section class\u003d'sidebar' id\u003d'newsidebar'\u003cbr /\u003epreferred\u003d'yes'\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u0026lt;b:widget id\u003d'Profile2' locked\u003d'false'\u003cbr /\u003etitle\u003d'About Me' type\u003d'Profile'/\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u0026lt;/b:section\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u0026lt;/div\u0026gt;\u003cbr /\u003e\u003c/span\u003e\u003c/strong\u003e\u003c/div\u003e\u003c/blockquote\u003e\u003c/strong\u003e\u003c/code\u003e\u003cbr /\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eUna vez hecho esto ya puedes hacer vista previa.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eSi todo ha salido como es debido, no has olvidado hacer ningún cambio, ni ningún símbolo o llave de apertura o cierre de órdenes, verás la segunda sidebar a la derecha del blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn ella verás el perfil, ya lo quitarás cuando acabes, salvo que prefieras dejarlo ahí. Lo hemos usado para que la nueva sidebar tenga alguna cosa para poder verla.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eDe todos modos aún faltan algunos detalles para poder guardar la plantilla.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eVes nuevamente a la sección del CSS y localiza está línea:\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003ebody#layout #sidebar-wrapper {\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e(la encontrarás justo encima del sector \u003cstrong\u003eHeader\u003c/strong\u003e) y cambias el ancho (\u003cstrong\u003ewidth\u003c/strong\u003e) a \u003cstrong\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e250px\u003c/span\u003e\u003c/strong\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eDebajo, donde pone: \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003ebody#layout #wrap4, body#layout #outer-wrapper {\u003c/strong\u003e \u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ecambias el ancho a \u003cstrong\u003e\u003cspan style\u003d\"COLOR: rgb(0,0,153)\"\u003e1000px\u003c/span\u003e\u003c/strong\u003e.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY ya está ya tendrás dos columnas en tu blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e---\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003e\u003cstrong\u003eObservaciones, y consejos:\u003c/strong\u003e\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eCuando añades otra columna a tu blog no desaparecen los módulos que tuvieras colocados en la columna inicial, pero no vas a poder cambiarlos de columna moviéndolos. Si lo intentas verás que el resto de módulos que hayas dejado desaparecen.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003ePara cambiarlos de columna has de añadir nuevos elementos a la columna nueva (verás que encima de ella también tienes un Añadir un elemento de página) y copiar en ellos los códigos que hubiera en los antiguos. Guardas el nuevo elemento y eliminas el elemento antiguo. (Puedes abrirlos los dos a la vez para hacer el trasvase).\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eOtra cosa más a tener en cuenta es la manera en que se ve la página de los elementos.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eEn la plantilla original las columnas se ven \"a la vez\", pero al añadir una nueva sidebar, la página de elementos se ensancha, con lo que tendrás que moverte lateralmente para ir de una columna a otra. No es importante y no afecta al buen funcionamiento del blog.\u003c/div\u003e\u003cdiv align\u003d\"justify\"\u003eY finalmente recomendarte que guardes tu plantilla original antes de hacer cambios importantes en tu blog y hagas una copia de todos los códigos que tengas en los elementos, por si las moscas, pues, aunque no desaparecen, si al final no te convence como queda, o has tenido algún problema y quieres recuperar la plantilla anterior descargándotela desde tu pc, entonces si que van a desaparecer los widgets.\u003cbr /\u003e---\u003cbr /\u003e\u003cspan style\u003d\"FONT-WEIGHT: bold\"\u003eActualización 27 noviembre 2007\u003c/span\u003e\u003cbr /\u003eHe rebajado el % del ancho de las sidebars y he puesto 24 en vez de 25, que es lo que había antes y es lo que vi en el Escaparate de Rosa.\u003cbr /\u003eEl motivo ha sido que con un 25% de anchura en las sidebars, con Firefox la de la izquierda desaparece y se coloca debajo de las entradas, con lo que solo sería visible para aquel que baje hasta el final del blog.\u003cbr /\u003eAl quitarle este 1% vuelve a su lugar.\u003cbr /\u003e--- \u003c/div\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003chr /\u003e  \u003ca href\u003d\"http://laeulalia-blogdeprobes.blogspot.com\"\u003ePublicado por laeulalia en Tuneando el blog\u003c/a\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/1137188398575187603-6109203710320542431?l\u003dlaeulalia-blogdeprobes.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://laeulalia-blogdeprobes.blogspot.com/feeds/6109203710320542431/comments/default","title":"Enviar comentarios"},{"rel":"replies","type":"text/html","href":"https://www.blogger.com/comment.g?blogID\u003d1137188398575187603\u0026postID\u003d6109203710320542431","title":"9 comentarios"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/6109203710320542431"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1137188398575187603/posts/default/6109203710320542431"},{"rel":"alternate","type":"text/html","href":"http://laeulalia-blogdeprobes.blogspot.com/2007/10/la-plantilla.html","title":"La plantilla Harbor con dos columnas laterales"}],"author":[{"name":{"$t":"Eulalia"},"uri":{"$t":"http://www.blogger.com/profile/08223971060404803131"},"email":{"$t":"laeulalia@gmail.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"18248433769070121676"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"9"}}]}});