Cambiar la plantilla ¿Quién dijo miedo? | Oloblogger Ves una web que te gusta y te preguntas si podrías modificar tu blog para que tuviera ese mismo estilo. Puede que sólo quieras cambiar algun...

23 de marzo de 2009

Cambiar la plantilla ¿Quién dijo miedo?

Ves una web que te gusta y te preguntas si podrías modificar tu blog para que tuviera ese mismo estilo. Puede que sólo quieras cambiar algunas cosas, pero no sabes por dónde empezar. Tienes una idea estupenda sobre cómo maquetar tu espacio y sin embargo piensas ¿podré yo modificar mi bitácora? ¿se puede hacer lo que quiero?

Con Blogger, cambiar la plantilla es relativamente fácil. Sobre todo si utilizas alguna de las muchas "prefabricadas" que circulan por toda la red. Quizás lo más difícil sea elegir la que más te gusta, porque hay multitud de buenas plantillas por ahí. Un poco más complicado, es modificarla posteriormente para darle tu toque personal, pero a fin de cuentas, nada de otro mundo. Te lo dice alguien que hace apenas dos años no sabía que era un blog y mucho menos cómo funcionaba el lenguaje html, las hojas de estilo (CSS) y mucho menos los SCRIPTS.

Todos estos acrónimos sólo son lenguajes, o sea, idiomas, y como con cualquier lengua no materna (o paterna para dejar contenta a nuestra ministra de Igualdad) la necesidad y la práctica, favorecen su aprendizaje.

Si tienes poca experiencia (o quizás ninguna), lo mejor será que crees un nuevo blog a modo de pruebas. Ahí puedes hacer todos los experimentos del mundo sin ningún problema. Crea un nuevo dominio con una plantilla cualquiera de entre las que te facilitan al darte de alta y cuando lo tengas comenzamos.

Lo primero sería escoger una plantilla, descargarla a tu disco duro y después subirla desde EDICION DE HTML --> (EXAMINAR) SUBIR. En algunas ocasiones el código te lo facilitan para que simplemente hagas copy-paste, aunque es más eficaz el primer sistema.

A partir de aquí será cuando puedes encontrarte cosas que no funcionan bien, aunque si la plantilla no está chunga, sólo podrían fallar las imágenes (que no se vean). Si es así, será suficiente con bajarlas de su ubicación original (o de la demo correspondiente) y alojarlas tu mismo. Luego cambias las direcciones de las imágenes de la plantilla por las tuyas y listo. Esto último lo deberías hacer aunque todo fuera bien, por si en el futuro desaparecen del alojamiento original.

Para saber qué imagen corresponde con cada dirección, las puedes ir buscando en la plantilla (.gif, .png, .jpg...). Simplemente copias y pegas en la barra de direcciones la URL de la imagen y podrás visualizarla en tu navegador. Como decía, si no se ven, las tendrás que conseguir de la demo que suelen incorporar las páginas que te facilitan nuevas plantillas. A veces son sólo esquinitas o imágenes muy pequeñas que no parecen tales, pero seguro que son necesarias para esos detalles que le dan un mejor aspecto al resultado final. Normalmente todas están por algo.

Hecho esto, pones los artilugios que quieras de la misma manera que los pusistes en tu plantilla actual la primera vez. Si no tienes ganas de ir buscando de nuevo los códigos, tendrás que ir editando los artilugios en tu blog original, copiarlos y pegarlos el en el de pruebas.

Ojo que casi seguro que hay widgets en distintas secciones de tu plantilla actual y no sólo en la barra lateral. Los copies desde donde los copies, los puedes poner sin problemas como NUEVO ELEMENTO en la barra lateral. Luego podrás reubicarlos arrastándolos desde ELEMENTOS DE PAGINA.

Otra forma es la que Rosa explica en su blog para guardar el código de todos los artilugios, antes de cambiar una plantilla, para después volverlos a colocar en el mismo blog. Con el mismo sistema, puedes pasarlos a otro blog distinto.

Cada trozo de código entre ambas etiquetas WIDGET, se corresponde con un artilugio tuyo. Podrás saber cual es por el TITTLE (nombre).

Creo que con esto ya está hecho lo más gordo. Si luego quieres añadir más cosas, es el momento de buscar en cualquier blog de ayuda de entre los que hay por ahí. Seguro que encuentras cosas que te gustan e irás incorporando nuevos elementos o aplicaciones. Unos funcionarán a la primera y otros no.

En este punto, es aconsejable que las líneas de código que vayas añadiendo las marques de alguna manera. Lo más fácil es poniendo un comentario <"- COMENTARIO -->. Los símbolos delante y detrás del texto del ejemplo hacen que lo que hay entre ellos no se interprete. Si añades líneas en la parte del CSS (entre <b:skin> y </b:skin>) los comentarios se marcan con /* COMENTARIO */. También puedes usarlos para "eliminar" líneas. En lugar de borrar lo que te digan, simplemente lo colocas entre símbolos de comentarios y así lo podrás recuperar fácilmente si fuera necesario. Cuando compruebes que todo funciona bien lo mejor es que vayas quitando definitivamente las líneas así "eliminadas" y por supuesto, los comentarios que ya no te sirvan.

Sobre lo de las comprobaciones, hay que hacer varias antes de dar por bueno un cambio:
  • Ver página inicio
  • Ver navegación por etiquetas (pinchando en una de ellas)
  • Ver navegación por páginas (posts anteriores / siguientes)
  • Ver un post concreto
Además, sería conveniente que lo probaras tanto en Internet Explorer cómo en Firefox. Puedes tener ambos navegadores en tu ordenador sin problemas y usar indistintamente el que quiereas. Si el cambio funciona -aceptablemente- en ambos, lograrás que el 90% de los internautas lo vean bien. Además, si funciona en estos dos, seguramente también lo haga en Safari, Chrome, Opera...

Una el blog de pruebas a tu gusto, SALVAS TU PLANTILLA ACTUAL (por si las flies), salvas también la plantilla del blog de prueba y una vez ambas en tu disco duro a buen recaudo, vas a tu blog (el bueno) y subes la que salvaste del blog de prueba.

Algunos artilugios estarán creados pero en blanco, seguramente sólo con el título. Esto es porque se añadió su contenido desde ELEMENTOS DE PAGINA, introduciendo código en la ventana emergente de AÑADIR HTML (o imagen, o texto, o feed, o lo que sea). En esos casos, editas esos elementos en tu blog de prueba, copias el código que sea y editando ahora el artilugio en el blog original, copias el código.

Siguiengo estos pasos no debería ocurrir nada más, pero si se ha variado mucho la plantilla, pueden suceder un par de casos más:

- que al ir a guardar la nueva plantilla, el sistema te avise de que se van a eliminar ciertos artilugios. En este caso, se eliminan del blog original, pero como precisamente lo vamos a cambiar todo, no nos importa. En cualquier caso, siempre tenemos en nuestro blog de prueba el código necesario para reinstalarlo
- que te avise de que hay artilugios con la misma ID. Cada vez que se crea un artilugio, Blogger los va numerando dentro de cada tipo de widget: HTML1, HTML2, HTML3.... LinkList1, LinkList2, etc. Pues este aviso quiere decir por ejemplo, que hay dos HTML1. Como hemos cogido código de dos blogs, puede ser que coincida el ordinal del artilugio. La solución es buscar uno de los coincidentes y renumeralo. Si pone HTML1, le pones HTML40, por ejemplo. No le pongas el 2 no sea que ya lo tengas también. Usa un número alto. Cuando se hayan cambiado todos los duplicados, te dejará grabar, mientras tanto no.

Me he explayado bastante, pero la verdad es que cuesta más escribirlo que hacerlo. Con tu blog de pruebas puedes estar meses añadiendo cosas o simplemente practicando y posponer el cambio para cuando estés seguro de que funciona correctamente. Creo que es la mejor forma de aprender. Pero no aplaces mucho tu primer cambio o quizás no llegues a hacerlo.

Para que estés más tranquil@, debes saber que lo más importante de tu blog está a salvo. Las entradas no se pierden ni se borran haciendo nada de esto. Sólo puedes cargarte un post pinchando en ELIMINAR en la pestaña de EDITAR ENTRADAS. Por tanto, lo peor que puede pasar es que veas tu blog con las imágenes descuadradas o la sidebar abajo del todo, o cualquier cosa de ese estilo. Como mucho, que pierdas algún artilugio, pero nada más. Así que... ¡sin miedo! Siempre podrás volver a tu plantilla original si es que la guardaste como se indicó.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

37 comentarios :

  1. Hola, paso a comentar que te leo desde hace dias, y haciendolo he solucionado dos problemas que me traian loca en la plantilla Aspire, pero otros aun no logro resolverlos y no por eso me rindo. Tienes un lindo blog, gracias por compartir esta ayuda para los que como yo no saben mucho de esto. Seguire leyendote en busca de soluciones, por hoy me voy pero vuelvo mas tarde, te dejo un beso, cuidate.

    ResponderEliminar
  2. muy buena explicación, Oloman!!!

    ResponderEliminar
  3. necesito tu ayuda oloman por favor, he tocado mal en la plantilla y el borrado el widget de entradas del blog, y se ve todo menos las entradas

    el texto que borre fue

    b:section class=’main’ id=’main’ showaddelement=’no’
    b:widget id=’Blog1′ locked=’true’ title=’Entradas del blog’ type=’Blog’/
    b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’/
    /b:section
    /div

    Ahora al ponerlo debajo del wrap me dice lo tipico de:

    “No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type “body” must be terminated by the matching end-tag “”.

    Te dejo unas imagenes de muestra para explicarme lo que me refiero, las entradas deberian mostrarse a la izquierda, y se muestran arriba del todo y debajo vienen los laterales:

    http://img27.imageshack.us/img27/7867/blog1w.jpg
    y
    http://img27.imageshack.us/img27/263/blog2d.jpg

    Te agradezco tu ayuda

    ResponderEliminar
  4. Hola, antes q nada darte las gracias por ayudarnos tanto.

    He creado un blog y la plantilla es aspire,cuando he puesto una imagen en un post me sale el dichoso borde y encima en verde,me gustaria quitarselo o ponerle otro color,pero no sé como.A ver si me puedes ayudar,gracias nuevamente

    ResponderEliminar
  5. Ya me han ayudado en otra web, Asunto zanjado.

    ResponderEliminar
  6. Hola amigo oloman, me preguntaba si me podrias ayudar con un inconveniente al que no le encuentro solucion.

    El caso es que necesito que el enlace de "pagina siguiente" y "pagina atras" aparezca solo cuando se muestran las entradas de una cierta etiqueta, es decir que se pueda pasar cuando estas en la url de una etiqueta y no desde la pagina principal o la url de cualquier entrada.

    Espero que conozcas alguna solucion.

    Un saludo.

    ResponderEliminar
  7. Juan. Acabo de ver tu comentario, pero me alegro de que ya lo hayas podido solucionar.

    Gara. No veo ningún blog en tu perfil que tenga Aspire, así que sólo un tiro al azar. Busca en tu plantilla POST IMG { y coloca allí un border:0px; Con eso deberías eliminar el borde de las imágenes de los posts.

    Anónimo. Me lo apunto y lo explico en un post. Dame un tiempo.

    ResponderEliminar
  8. Hola de nuevo,busqué POST IMG ,pero no em aparece nada,aun no lo abri, pq me desagarada la linea verdosa q sale,te pongo la direccion aqui,gracias.

    http://gara-alaluzdelaluna.blogspot.com/

    ResponderEliminar
  9. Ya está Gara, en tu plantilla se llama ENTRY IMG. Esta es la parte de código que tienes que modificar.

    .entry img {border:1px solid #99ba09; margin:3px 5px; max-width:603px}

    ResponderEliminar
  10. Fantástico!!!,Gracias por tu ayuda,ya podré poner el blog en marcha.

    Besos

    ResponderEliminar
  11. tengo porblemas y necesito ayuda, segui las intrucciones del Feedburner y logre colocar el c ontador de visitas y otros instrumentos en mi blog, perfecto!!! al minuto intente cambiar la plantilla del blog porque queria algo mas acorde al tema, no pude hacerlo y por desgracia descubri que habia perdido todos los elementos que agregue con el feedburner y ahora no puedo recuperarlos, en feedburner me dicen que no pueden procesar mi solicitud, que hago???
    Y lo peor es que en el menu de escritorio del blog ya no tengo la parte Diseño, en su lugar aparecre solo plantilla, o sea que no puedo agregar o modificar los gadget ni nada mas, Que hago??
    Estoy sumamente frustrada!!!!

    ResponderEliminar
  12. Que no cunda el pánico, Mujerpoderosa :)
    Evidentemente, no leiste este post antes, porque si no hubieras guardado en algún sitio tus gadgets, pero de todas maneras, todo lo que tenías antes lo puedes volver a instalar de la misma manera que lo hiciste la primera vez.

    No tengo acceso a tu perfil y por tanto, tampoco a tu blog, pero eso de que ha desaparecido la pestaña de DISEÑO, no puede ser. Independientemente de la plantilla que tengas, esa es una utilidad de Blogger que viene fija en el escritorio ¿o quizás es que tienes otra plataforma?

    Si tenías algo de Feedburner, entrando en su página y haciendo login, podrás volver a encontrar el artilugio para re-instalarlo.

    ResponderEliminar
  13. Hola
    quiero usar una plantilla de las que recomiendas arriba, solo que al bajarla a mi disco duro y al querer insertar la direccion en SUBIR no lo reconoce por que es un archivo ZIP
    Sabes la soluion?

    Mil gracias

    ResponderEliminar
  14. :) Eso es un fichero comprimido. Botón derecho encima del fichero y eliges "descomprimir", "unzip" o algo similar. Luego con el fichero o ficheros ya descomprimidos, sigues por dónde te has quedado.

    ResponderEliminar
  15. Hola!!
    sabes que he tratado de subir una plantilla que me gusta a mi blog y no he tenido exito, ja bajo a mi compu, al al querer pegarla introduciendome a la edicion Html y dice que la plantilla no esta bien formada!!, tambien intente con otra, y al querer abrir el archivo que baje a mi compu me dice que no se puede abrir el folder comprimido!, Necesito que por favor me ayudes con este problema si te es posible.

    Mil gracias!!

    ResponderEliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  17. LO SIENTO OLVIDE DARTE LAS GRACIAS!!
    QUE TENGAS UN EXCELENTE DIA!!!

    KARLA.

    ResponderEliminar
  18. @Anonimo, no hay que pegarla. Supongo que será sólo una expresión. Una vez en tu disco duro, hay que subirla desde el formulario que hay en Edición de HTML. Si te dice que la plantilla no está bien formada, efectivamente es que será así y la plantilla que escogiste no estará bien.
    Sobre la del folder comprimido, esto es porque la plantilla te la proporcionaron en un formato .zip o .rar, por lo que antes de subirla, tendrás que descomprimir el fichero en tu disco duro.

    @Karla, no hay una forma específica de insertar una barra lateral adicional. Hay algunos artículos explicando cómo crear nuevas secciones para generar cualquier tipo de nuevo bloque. Estas son las direcciones:

    http://oloblogger.blogspot.com/2008/06/crear-bloques-de-informacin.html

    http://oloblogger.blogspot.com/2009/05/plantilla-blogger-crear-secciones.html

    ResponderEliminar
  19. HOLA!
    SABES DE UNA BUENA PAGINA WEB QUE OFREZCA PLANTILLAS QUE NO SEAN ARCHIVOS COMPRIMIDOS, ES QUE NO LOS PUEDO ABRIR , SUPONGO QUE NECESITAS ALGUN PROGRAMA PARA ABRIRLO, TE AGRADECERIA MUCHO SI ME PUEDES AYUDAR , GRACIAS!

    ResponderEliminar
  20. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  21. @Anónimo, seguramente hay muchas webs con plantillas no comprimidas, pero seguramente te traerá más cuena aprender a descomprimir. Normalmente, Windows lleva una utilidad para ello: botón derecho en el fichero --> Descomprimir (o Unzip). Si no te funciona es que es otro formato (RAR). Te puedes bajar el programa WINRAR gratuitamente de muchos sitios.

    @Karla en el primero de los dos links que puse en mi respuesta, se explica como añadir una segunda sidebar

    ResponderEliminar
  22. Me parece que tienes un blog esquisito y muy bueno, aparte de la ayuda que nos proporcionas a los novatos como yo.
    Muchas gracias y sigue asi!

    ResponderEliminar
  23. No hay de qué. Sólo pido que no seais muy exigentes porque no somos profesionales. ;)

    ResponderEliminar
  24. hay me complica un poco el temita , kiero cambiar mi platilla pero desaparece todo lo que he echo :(

    ResponderEliminar
  25. Artezzana, usa un blog de pruebas primero ;)

    ResponderEliminar
  26. Buna tarde cambio e grafico del header por un flash y me funciona pero en la parte de abajo me coloca otravez la grafica que cambie como la quito gracias


    Adolfo
    tuscalificacions@hotmail.com

    ResponderEliminar
  27. Vendría bien un enlace para ver más concretamente a qué te refieres, pero a ver si fuera esto.

    ResponderEliminar
  28. Hola, Oloman

    LLevo tiempo intentando cambiar la plantilla de mi blog y ya he encontrado una que me gusta, pero quiero quitarle el menú (Home,post RSS,comments RSS y edit) pero no sé como.

    Te dejo la dirección de mi blog de pruebas.

    ResponderEliminar
  29. ¿Dónde está la dirección? : "Sólo lectores invitados"

    ResponderEliminar
  30. Upps

    No me di cuenta ahora lo quito

    ResponderEliminar
  31. Lo tienes en tu plantilla a partir de <div id="menu">. Puedes borrar todo desde ahí hasta el cierre correspondiente </div>, ambos inclusive o buscar en la parte CSS #menu e insertarle un display:none; que en lugar de borrarlo sólo lo ocultará.
    /* Menu */
    #menu {
    display:none;
    width: 960px;
    margin: 0 auto;
    padding: 0;
    height: 55px;
    padding-top: 35px;
    background: url(http://1.bp.blogspot.com/_WoCJXgXotb8/StQQ_nUE-TI/AAAAAAAAAr0/3LiQTqOwJ7g/s1600/img01.jpg) repeat-x left top;
    }

    ResponderEliminar
  32. tengo un problemilla,se trata del titulo de los widget,que no me deja ponerlos en blanco(antes si podia)y claro al hacer alguna modificacion como por ejemplo el menu,ahora me obliga a poner titulo y se me distorsiona y queda mal ¿como soluciono eso?

    ResponderEliminar
  33. Apofis, ese es un problema que hay desde hace un par de días. Para una solución rápida pon en el título un código para que se interprete y no se vea. Por ejemplo <h2></h2>

    ResponderEliminar
  34. la solucion que e buscado es la de anular la parte del codigo b:if cond='data:title != ""'
    h2 class='title'data:title/h2
    /b:if con <-- y --> asi me vuelve a funcinar perfectamente

    ResponderEliminar
  35. Perfecto. Esa es la otro solución. Hoy lo he publicado en vista de que es un mal común.

    ResponderEliminar
  36. hola, abusando un poco (o mucho) de tu confianza te cuento que estuve modificando una plantilla con muchas complicaciones, pero al final quedo una de la que no tengo ni la menor idea, resulta que el texto de las entradas me queda cortado al final, parece estar debajo o interrumpido por la columna lateral, te agradezco mucho de antemano la direccion de mi blog es http://sollelcuerpo.blogspot.com/ ahi se ve claramene mi problema.

    ResponderEliminar
  37. Pues no Dreamare. Lo cierto es que no veo el problema. Aparentemente, las entradas salen completas. Lo he comprobado con IE y con FF.

    ResponderEliminar