Personaliza tus páginas estáticas

11/2/16

Es un tema que me ha traído siempre de cabeza. Quiero decir, a todos nos ha pasado eso de tener una página estática (como puede ser 'sobre mí' , 'iniciativas', 'índice'...) que no es igual de larga que el sidebar que tiene al lado. La conclusión es que termina la página, pero la columna continúa hacia abajo. Sólo la columna, y no hay nada para leer.

También que en una página como puede ser el índice, estén habilitados los comentarios. ¿Quién quiere comentar ahí? ¿Quiero realmente yo que alguien comente ahí? Yo no, no quiero. No me parece nada estético tener una página donde te cuento que me gusta comer chocolate y tener comentarios debajo. Quiero decir, ¡mira que hay sitios para escribirme! Redes sociales, comentarios, e-mails... Justito en las páginas estáticas, no me queda bonito.

No estoy inventando nada, y seguro que muchas personas que me leen conocen el tutorial de Miss Lavanda para personalizar páginas estáticas. Y eso está genial, para plantillas prediseñadas de blogger. Claro que soy consciente de que no todo el mundo usa esas plantillas. Muchas personas usan plantillas externas, de themexpose, soratemplates, o de diseñadores web concretos, quéséyo. Y el tutorial de Miss Lavanda no funciona con todas ésas plantillas externas. Con algunas, no va bien, porque es un tutorial pensado para plantillas corrientes de blogger.

Bien, pues para esas personas con ese problema tengo la solución. Me he estado rompiendo bastante la cabeza (como todavía hago con otros tutoriales que quiero publicar y aún no les saqué la vuelta) y al final he dado con la solución. ¡¡Y la solución es súper sencillita!! Como que me da vergüencita decir que le di tantas vueltas... jaja.


CÓDIGO CSS


<style>
     .comments, .post-footer#sidebar-right-1 {
      display:none !important;
    }


.outer-wrapper {width:100%;float:center}  </style>

Con éste código eliminas de tu página estática los comentarios, el elemento pie de página (ese elemento que se repite en todas tus entradas. En mi caso iconos sociales), el sidebar y centras la página.


ENCUENTRA LOS NOMBRES EN TU PLANTILLA

Hasta aquí todo bien, ¿no? Pero aquí viene un paso un pelín difícil. No puedes olvidarte de que yo hago este tutorial pensando en plantillas externas. ¿Problema? Las plantillas externas son distintas las unas de las otras, por lo que no todos los elementos del blog se tienen que llamar de la misma forma

Me explicaré mejor. En mi plantilla, mi sidebar recibe el nombre de '#sidebar-right-1'. En ésta, que es externa. En la anterior no se llamaba así, sino ' .sidebar'. Parece una tontería, son nombres parecidos. Pero no tiene que ser parecido, sino exacto. Por suerte, en casi cualquier plantilla externa buscas la palabra 'sidebar' y en algún lado de la plantilla te aparece el nombre de ésa parte del blog. No tiene más complicación.

Otro tanto de lo mismo para '.outer-wrapper', pues en mi plantilla anterior, tampoco se llamaba así, sino 'main outer'. En un caso así sería cuestión de buscar 'outer' y ver cómo se llama la parte central del blog. (Aunque creo que con ésa parte no habrá problema, porque es el nombre que yo he visto en la mayor parte de plantillas externas)


DÓNDE PONER EL CÓDIGO

1. Ir a la página estática que quieres modificar.

2. Una vez dentro del editor de entradas, haz click en el botón HTML, que está justo al lado de redactar.

3. Pega tu código modificado al inicio de la página.

Si no te interesa, por ejemplo, eliminar los comentarios, es tan sencillo como borras ésa parte del código, en éste caso: .comments,





El cambio a mí me gusta mucho. Me parece más limpio y más profesional. Es que , no sé cómo decirlo, no hay color.
Y es una buena opción para quien no ha podido hacer el cambio directamente en la plantilla. Espero que sea de mucha ayuda, y cualquier duda, ¡se deja en los comentarios! Ya de paso me deseas suerte para mi exámen de mañana ;P


13 comentarios

  1. Oye pues es un tutorial muy interesante o.o ¿El HTML se pone en la misma entrada? Eso no me ha quedado muy claro ¿Se vería, no?

    ResponderEliminar
    Respuestas
    1. Hola ly!
      Sí. El HTML se pone en la misma entrada de la página estática.

      Al escribir esa entrada, arriba a la izquierda hay dos botones: en uno pone redactar y en otro HTML. Le das a html y pegas el código, de esa forma no se ve nada. ¿Resolví tu duda?

      Mua mua!

      Eliminar
  2. Buenas!! :)
    Voy a ser sincera, al principio no sabía a que te estabas refiriendo XDD ¿Página estática? ¿Quitar el sidebar y su correspondiente hueco? Debe ser que estoy muy lenta y con falta de sueño. Pero al ver la imagen final, fue como si una bombilla se me encendiera. ¡¡Todo cobraba sentido!! XDDD No te preocupes, lo he entendido todo al final, y mira por donde, no había pensado en esa posibilidad de que se vieran dichas "páginas estáticas" de esa manera. Visualmente quedan muy bien, y puede que lo aplique en algunas mías. Tengo deshabilitado los comentarios simplemente, porque al igual que tú, no le veo sentido dejar un comentario en ese tipo de espacios. Gracias por el aporte, idea y demás. Ahora sí, creo que me voy a descansar :)

    ResponderEliminar
    Respuestas
    1. ¡Hola Marta!

      Jobá, pues menos mal que puse las fotos!!
      A mí me parece que queda muy chulo. Además, mucha gente tiene la página estática más corta que el sidebar, de forma que la columna sigue bajando mientras que le entrada ya terminó. Si te fijas, pasa con tu entrada 'sobre mí'.

      De todas formas, mi tutorial es bueno cuando tu plantilla es externa. O cuando sólo quieres aplicar los cambios en algunas páginas estáticas.

      Por ejemplo: lo mismo quieres deshabilitar los comentarios en el índice, pero luego haces una página estática donde promocionas un producto, y ahí quieres los comentarios, o los botones sociales.

      Sin embargo, si tu plantilla es de blogger (creo que la tuya es la plantilla simple de blogger) y quieres aplicar el cambio en TODAS tus páginas estáticas, te recomiendo que sigas el tutorial de Miss Lavanda que dejé arriba. Hace el cambio directamente en la plantilla y funciona para todas las entradas, sin tener que ir una por una.
      Cada uno tiene la opción que más le gusta, jajajaja

      Y sí que te acuestas tarde, ¡eh! A esa hora estaba en el séptimo sueño. :P

      Eliminar
    2. Me lo apunto :)

      Tras mirar de nuevo la entrada y el blog de Miss Lavanda creo que voy a hacer algún que otro cambio en las páginas. Como dices, queda visualmente mejor. Nuevamente, gracias por el aporte ^^

      Pues si que me acosté tarde ... XD En esta ocasión, a levantarse temprano toca XD

      Eliminar
  3. Pues queda mucho mejor así. Lo que pasa que yo soy muy lenta para hacer estas cosas y me puedo tirar una tarde entera hasta que me sale bien, pero me lo dejo en "cosas pendientes que tengo que arreglar en mi blog cuando tenga tiempo", porque me gusta más como queda. De momento tengo plantilla de blogger, así que mirare el de Miss Lavanda también. Un beso!

    ResponderEliminar
    Respuestas
    1. Aaaay el tiempo!
      La verdad es que muchas horas he pasado yo con todas mis plantillas tocando código. Y aún me paso. Jajaja.

      Si te soy sincera, yo creo que nunca nos va a sobrar el tiempo, ni mucho menos. Tenemos que organizarnos con el que tenemos, porque sino, no lo hacemos nunca :P

      Espero que no tengas ningún problema! Pero si lo tienes, ya sabes dónde encontrarme. Mua!

      Eliminar
  4. Me dirán estúpido y todo. Pero, ¡no entendí nada!

    ResponderEliminar
    Respuestas
    1. ¡Para nada! Jaja

      Es un tutorial simple en el sentido de que por un lado es copiar y pegar en el editor de entradas.

      Pero por otro lado tienes que encontrar en tu plantilla el nombre de cada elemento, que varía según la plantilla de cada persona. ¿Es ahí donde te lías?

      Eliminar
  5. Hola Nerea, te cuento que estoy inmensamente agradecida contigo,me he pasado todo el día tratando de quitar la sidebar de las páginas y tu tutorial ha sido el único que me ha servido, lo has explicado muy bien. Por fin alguien que sabe jeje.
    Gracias, gracias, gracias.
    Saludos desde Venezuela

    ResponderEliminar
    Respuestas
    1. ¡Me alegra muchisísísímo que te haya servido!
      En su momento yo también me encontré con el mismo problema que tú, así que cuando lo descubrí subí el tutorial.

      Ya vi que lo cambiaste, ¡te quedó muy chulo!

      ¡Mua!

      Eliminar
    2. Hola de nuevo Nerea, gracias por revisarlo jeje. Pero sabes que estoy haciendo una pruebas y en la versión móvil no se ven bien las páginas estáticas. Sabes como puedo arreglarlo? Gracias de antemano.

      Eliminar
    3. ¡¡Hola!!
      Iba a decirte que probaras a poner el código que pusiste en la entrada directamente en la plantilla, en el apartado dedicado a páginas estáticas.
      Porque la verdad es que a mí en su momento no me dio problemas.

      Pero he entrado y he visto que lo tienes todo bien, se ve perfectamente. Así que supongo que lo has arreglado. :)

      ¡Mua!

      Eliminar