Instalar portada en Blogger. Parte 2.

enero 11, 2014

Personalizar enlaces de paginación en Blogger

Ya hemos visto:


  • Pros y Contras de instalar una portada en Blogger. Leer
  • Instalación de Portada en Blogger. Leer

Hoy vamos a ver como perfeccionarla, para eliminar las entradas que se ven debajo de nuestra portada y los enlaces de paginación.



1.- Primero vamos a eliminar las entradas de nuestra portada. Para ello, seguimos ésta ruta:

Configuración --> Entradas y Comentarios 




Y cambiamos el número a mostrar por 0.

De esta forma ya no aparecerán nuestras entradas bajo la portada. Pero nos aparece el siguiente mensaje:


Y esto es porque Blogger entiende que no queremos mostrar ninguna entrada y automáticamente nos muestra ese resultado. Vamos a eliminarlo.





2.- Entramos a nuestra plantilla HTML/Javascript, abrimos el buscador interno y buscamos:

<b:include data='top' name='status-message'/>

Nos encontraremos con el siguiente código:


Puede aparecer dos veces, aségurate de estar en el que te muestro en la imagen anterior.

y NO en éste:


Cuando te hayas asegurado de haber localizado el código correcto, elimina:

<b:include data='top' name='status-message'/>


Y comprueba en Vista Previa que se ha eliminado el mensaje de "no hay ninguna entrada" o similar.


Pero nos sigue apareciendo la paginación, que tampoco pinta nada en nuestra portada, así que vamos a eliminarla.

3.- Vamos a editar nuestro gadget HTML/Javascrip. Arriba del todo añadiremos este código:

<style>
/* Ocultar-Modificar parte de la estructura original */
.main-inner .header-inner .fauxcolumn-right-outer, .sidebar, h3.post-title, .post-footer, .comments, .blog-pager, .feed-links { display: none;width: 0;}
.main-inner, .main-inner .columns {padding: 0;}
.header-inner .Header .titlewrapper {padding: 0 30px;}
.post img {padding:0;border:0;}
</style>


Son estilos que ocultan las diferentes partes de nuestro blog que no queremos mostrar en la portada. Si copias el código tal cual, tu portada se verá así:



Si quieres mostrar la sidebar, solo tienes que eliminar .sidebar del código:

<style>
/* Ocultar-Modificar parte de la estructura original */
.main-inner .header-inner .fauxcolumn-right-outer,  h3.post-title.post-footer.comments.blog-pager.feed-links { display: none;width: 0;}
.main-inner, .main-inner .columns {padding: 0;}
.header-inner .Header .titlewrapper {padding: 0 30px;}
.post img {padding:0;border:0;}
</style>


Resultado:



Si lo que quieres es no mostrar el menú superior de páginas, solo tienes que añadir .tabs-outer al código para ocultarlo:

<style>
/* Ocultar-Modificar parte de la estructura original */
.main-inner .header-inner .fauxcolumn-right-outer, .tabs-outer, .sidebar, h3.post-title, .post-footer, .comments, .blog-pager, .feed-links { display: none;width: 0;}
.main-inner, .main-inner .columns {padding: 0;}
.header-inner .Header .titlewrapper {padding: 0 30px;}
.post img {padding:0;border:0;}
</style>


Resultado:

Puedes ir probando con los diferentes elementos hasta encontrar tu diseño ideal.


Detalles a tener en cuenta:


  • No olvides que a partir de ahora tú decides a qué tienen acceso tus visitas desde tu portada. Pónselo fácil.

  • Si quieres poner un acceso directo a todas tus entradas del blog, como mi banner VISITA MI BLOG, deberás etiquetar TODAS tus entradas como BLOG (o la etiqueta que quieras para diferenciarlas) y enlazarlas a tu Banner a través de una búsqueda por etiquetas como vimos aquí.

  • Recuerda que usando este truco pierdes la Vista Previa exacta de tus entradas, es decir, cuando tengas una entrada en borrador y selecciones Vista Previa, verás tu entrada justo debajo de tu portada y si, como yo, has elegido no mostrar la sidebar, las medidas de tu entrada se adaptarán a las de la portada. Yo, por eso, trabajo en un Blog de pruebas y una vez la entrada está tal y como quiero, la paso al original.

  • Puedes volver a repasar el artículo sobre Pros y Contras de instalar una portada siguiendo estos pasos en Blogger para terminar de decidirte. Visitar.



Artículos
Pros y Contras de Instalar una Portada en Blogger
Instalar Portada en Blogger. Parte 1
Instalar Portada en Blogger. Parte 2


Si te animas a hacerlo, ¡déjame el enlace a tu blog! Me hará mucha ilusión verlo.







Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

13 pensamientos ¡falta el tuyo! ;)

  1. Hola Celia!!
    Estoy diseñando mi blog y me parecio muy linda la idea de la portada, asó que puse la mía, pero tengo una duda, como puedo hacer para también ocultar la barra inferior? la que está sobre los créditos de blogger y sólo se vea cuando entren al blog?
    Gracias!!!

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa!

      He visitado tu blog y ya lo has conseguido, ¿verdad?

      Me alegro mucho XD

      Gracias a ti ;) ¡ha quedado muy chulo!

      Eliminar
    2. Hola Celia yo te quería preguntar lo mismo que Mixi Cakes, quiero ocultar de la portada los widget que tengo justo antes de los créditos de blogger, Lo he intentado pero no doy con ello. Muchas gracias y hasta pronto.

      Eliminar
    3. Ya lo he resuelto, busque el nombre de los widgets y en vez de poner la clase, le puse el signo de su ID correspondiente. Gracias por tu labor de enseñarnos a entender un poco más las plantillas de blogger.

      Eliminar
    4. ¡Me alegra que hayas podido resolverlo, MariCarmen! :D

      ¡Feliz jueves! :)

      Eliminar
    5. Gracias Celia, que tengas un feliz fin de semana :)

      Eliminar
  2. Hola! Lindo blog! Gracias por tus tutoriales que son de gran ayuda! Puedes decirme ¿cómo se puede modificar un diseño de plantilla que descargué? Es que quisiera agrandar la imagen de cabecera pero no me lo permite. ¿Cómo puedo agradar esa imagen de cabecera y colocar las pestañas debajo de esa imagen? Porque la plantilla trae es la imagen de cabecera arriba a la izquiera y al lado de esa imagen de una vez el menú de pestañas

    ResponderEliminar
    Respuestas
    1. ¡Hola Daniela!

      Tendrías que hablar con el diseñador de la plantilla que has descargado para que él te diga qué parte del código tienes que modificar. Es la forma más sencilla de conseguir el resultado que quieres :) Sin verlo, no puedo decirte mucho más.

      ¡Feliz martes!

      Eliminar
  3. ¡Hola Celia!

    Gracias por tu trabajo y paciencia para ayudar a los demás en estas cosas del diseño de Blog. Seguí tu tutorial y este es el resultado, http://ljardindelasdelicias.blogspot.com.es ¿que te parece?

    Un saludo!

    ResponderEliminar
    Respuestas
    1. ¡Genial, Laura!

      El efecto hover que has añadido a las imágenes al pasar el cursor ¡mola! :D

      ¡Feliz jueves! :D

      Eliminar
  4. Hola Celia, he probado a hacer este tutorial en el curso de la plantilla AURORA, Y aun no lo he volcado en el blog real, una pregunta ¿Como puedo quitar el sidebar de las páginas estáticas? he probado a buscar los id, pero no se me cambian, solo lo hacen en la portada.

    Mil gracias por la ayuda, estoy deseando que sea el día 5 para seguir aprendiendo.

    ResponderEliminar
    Respuestas
    1. ¡Hola, guapa!

      Prueba poniendo este código en vista HTML arriba del todo, entre style y/style en cada página estática:

      #sidebar-right-1.sidebar.section {
      display: none; width: 0;}
      .column-center-outer {
      width: 100% !important;
      float: center;
      margin-top: -40px !important;
      margin-left: 3% !important;
      }

      Tal vez tengas que jugar con los porcentajes y valores para que encaje bien en tu plantilla ;)

      ¡Saludos!

      Eliminar
  5. hola! mi blog http://www.ahoraajedrez.com muchas gracias!!

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.