16.6.10

Crear Portada o Página de inicio para blogs de blogger




En Blogger no disponemos de una página de presentación o portada para nuestros blogs. La página principal muestra siempre la última entrada creada.

En este tutorial explicaremos la forma de crear una portada o página de presentación.

1.- Vamos a Editar HTML:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

2.- Ponemos, dentro del rectángulo de búsqueda (search), la siguiente línea, y la localizamos todas las veces que aparezca:

showaddelement='no'

3.- Cambiamos 'no' por 'yes'

4.- Guardamos plantilla.

5.- Vamos a:

Página principal ► Diseño ► Diseño

6.- Añadimos un gadget acorde con el diseño que aplicaremos a nuestra portada o página principal o página de inicio. Puede ser tipo Texto o HTML/Javascript.

7.- Al gadget añadido le ponemos el nombre Portada (para poder identificarlo luego con mayor facilidad en la plantilla), le ponemos un contenido provisional para poder guardarlo, lo guardamos y lo ponemos encima del cuerpo de las entradas.

Añadir gadget

Con este paso lograremos que la información que pongamos en nuestra página de inicio (o de presentación, o portada) no se vea cuando se accede a las páginas secundarias (o etiquetas).

8.- Volvemos a Editar HTML:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

9.- Localizamos, poniéndolo dentro del rectángulo de búsqueda (Search), el nombre del gadget que acabamos de agregar, es decir, en nuestro caso buscamos la palabra Portada, la que encontraremos dentro de un segmento de código como éste:

<b:widget id='HTML1' locked='false' title='Portada' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

10.- Agregamos las líneas resaltadas en rojo, exactamente en los lugares indicados.

Nota: En este código aparece HTML porque el gadget añadido es del tipo HTML/Javascript. Si añadimos un gadget del tipo Texto aparecerá la expresión Text. En cuanto al número 1 que se encuentra al lado derecho de la primera expresión HTML, puede variar, no hay problema.

11.- Guardamos plantilla.

12.- Vamos a:

Página principal ► Diseño ► Diseño ►

Allí encontraremos el gadget que agregamos con el título Portada

Añadir gadget

...y hacemos click en Editar

13.- Con una buena imaginación ponemos, por ejemplo, una presentación Power Point, o videos, o imágenes, etc., que nos procuren un buen diseño en nuestra portada o página de presentación.

Debemos recordar que la Portada o Página de presentación que hemos creado, es un Gadget o Artilugio, y nó una Entrada o Post. Por esto siempre que se acceda a nuestro blog se verá esta portada y, a continuación, el número de entradas que hayamos configurado en el formato de nuestro blog, para ser vistas en la página principal.

Para lograr el efecto de que al acceder a nuestro blog se vea únicamente la Portada o Página de presentación, hacemos lo siguiente:


1.- Vamos a:

Página principal ► Diseño ► Configuración ► Entadas y comentarios ► Mostrar un máximo de X entradas en la página principal

2.- Ponemos 0 (cero) en el máximo de entradas a mostar en la Página Principal y, en la parte superior derecha, hacemos click en Guardar configuración:

Número de entradas a mostrar

3.- Hecho lo anterior, vamos a la página principal y veremos en la parte inferior de la portada que hemos creado, uno de estos textos:

Ninguna entrada coincide con la consulta. Mostrar todas las entradas

No hay ninguna entrada

4.- Para eliminar dicho texto vamos a Editar HTML, localizamos esta línea de código...

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

...y la eliminamos. Si la encontramos dos veces, eliminamos la segunda.

5.- Guardamos los cambios.

Enlaces a páginas interiores

A pesar de que contamos con el Archivo del blog en la barra lateral, es conveniente poner en la portada que creamos, o en un gadget añadido en la barra lateral, un menú o menús con enlaces que lleven a las páginas interiores, es decir, a las entradas del blog.

Un buen ejemplo de una portada creada con el procedimiento aquí explicado, y enlaces a las páginas interiores, lo podemos ver aquí.



Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera

117 comentarios :

▼▲ Mostrar / Ocultar comentarios

Publicar un comentario en la entrada