Instalar portada en Blogger. Parte 1.

En una entrada anterior te enumeré los pros y contras de instalar una entrada en Blogger. Si leíste con atención ese artículo, supongo que ya habrás decidido que quieres hacer.
Así que hoy, vamos a pasar a la acción y a preparar nuestra plantilla para la instalación de la portada.
1.- Entramos en nuestra Plantilla HTML, pinchamos en cualquier dentro del cuadro del código y pulsamos:
Control + F
Se abrirá un buscador interno, donde escribiremos:
showaddelement=
Así:

2.- Encontraremos varios en nuestra plantilla, pero el que nos interesa es el que fija nuestras entradas. Exactamente éste:

3.- Una vez localizado, cambiaremos el no por yes. Así:
<b:section class='main' id='main' showaddelement='yes'>
Con este sencillo cambio ya podremos añadir elementos encima de nuestras entradas desde Diseño, que es exactamente lo que vamos a hacer para instalar nuestra portada.
Guardamos los cambios.
4.- Vamos a Diseño y vemos lo que os comentaba antes:

5.- Vamos a insertar un nuevo gadget HTML/Javascrip justo encima del de entradas del blog.
El título que pongamos será el mensaje que aparecerá en nuestra portada, en la mía pone ¡Bienvenido!

El título es importante, ya que lo usaremos después para localizar ese gadget en nuestra plantilla HTML.
De momento, escribimos cualquier cosa en nuestro gadget, más adelante tendremos tiempo de editarlo y añadir el contenido que queramos mostrar en nuestra portada.
6.- Vamos de nuevo a nuestra plantilla HTML y abrimos el buscador. Ahora buscamos el título de nuestro gadget, en mi caso ¡Bienvenido!

Trabajaremos con esta parte del código que, como ves, se encuentra justo debajo del showaddelement que modificamos anteriormente.
7.- Nuestro código original es:
            <b:widget id='HTML1' locked='false' title='¡Bienvenido!' type='HTML'>
              <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
Y lo cambiaremos por éste:
 <b:widget id='HTML1' locked='false' title='¡Bienvenido!' 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 != &quot;&quot;'>
    <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>
Como ves, lo único que tienes que hacer es añadir los dos códigos en rosa a tu código original, exactamente como aparece en el mío, sin cambiar nada más. El resultado será éste:

8.- Comprobamos en Vista Previa que no hay errores en la plantilla y guardamos los cambios.
Ahora la Vista Previa lo que te muestra es tu nuevo gadget y debajo, las entradas que tengas publicadas en tu blog.
En la próxima entrada sobre como instalar una portada en Blogger, veremos los detalles para conseguir que solo aparezca nuestra portada sin las entradas ni la paginación inferior de Blogger. Son pequeños detalles a tener en cuenta para que el resultado sea perfecto.
Ahora te toca a ti personalizar tu portada, para ello puedes usar:
Tablas HTML
Listas HTML
Puedes estructurarlas como quieras hasta conseguir el resultado que tienes pensado. Ya sabes, el único límite es tu imaginación.
¿Te animas a probarlo? ¡Ya me contarás!
Te espero el sábado a las 11:00 con la segunda parte