Blogger Versatile

Platilla Versatile, se identifica de esta manera ya que se puede adaptar fácilmente y personalizar.
Es compatible con todos los navegadores.

Dispone de:

Tres columnas
Menú desplegable
Carrusel de imágenes
Resumen de las entradas
Botones de redes sociales
Efecto Hover en las imágenes de las entradas
Sección especial para mostrar dos gadgets de forma alterna
Sección especial para mostrar galería de imágenes en miniatura del gadget de "Entradas populares"
Tres columnas adicionales en el pie de la página.

Para empezar nos descargamos la plantilla desde este Vínculo
Luego nos vamos a
Tema > Crear/Restablecer copia de seguridad

Subimos la plantilla que previamente nos hemos guardado en el disco duro de nuestro ordenador.

Una vez lo tenemos descargado guardamos la plantilla.

Modificar colores y fuentes

En Tema > Personalizar

Podemos cambiar tanto los colores de fondo como el tipo de fuente de nuestra plantilla ajustandola a nuestro gusto.

Modificar menú

Nos vamos a Tema > Editar HTML
y buscamos este texto



 <!-- Empieza Menú Desplegable -->
    <div class='nav'>
      <ul class='menu' id='menu'>
        <li class='nodiv'><a class='nodiv' expr:href='data:blog.homepageUrl'>Inicio</a></li>
        <li>
          <a href='#'>Enlace A</a>
          <ul>
            <li><a href='#'>Enlace A1</a></li>
            <li><a href='#'>Enlace A2</a></li>
            <li class='submenu'>
              <a href='#'>Enlace AB &#187;</a>
              <ul>
                <li class='noborder'><a href='#'>Enlace AB1</a></li>
                <li><a href='#'>Enlace AB2</a></li>
                <li><a href='#'>Enlace AB3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href='#'>Enlace B</a>
              <ul>
            <li><a href='#'>Enlace B1</a></li>
            <li><a href='#'>Enlace B2</a></li>
            <li><a href='#'>Enlace B3</a></li>
            <li class='submenu'>
              <a href='#'>Enlace BC &#187;</a>
                 <ul>
                <li class='noborder'><a href='#'>Enlace BC1</a></li>
                <li><a href='#'>Enlace BC2</a></li>
                <li><a href='#'>Enlace BC3</a></li>
                   </ul>
              </li>
           </ul>
        </li>
        <li>
          <a href='#'>Enlace C</a>
          <ul>
            <li><a href='#'>Enlace C1</a></li>
            <li><a href='#'>Enlace C2</a></li>
            <li><a href='#'>Enlace C3</a></li>
                  </ul>
        </li>
    <li>
          <a href='#'>Enlace D</a>
          <ul>
            <li><a href='#'>Enlace D1</a></li>
            <li><a href='#'>Enlace D1</a></li>
            <li><a href='#'>Enlace D3</a></li>
                  </ul>
        </li>
        <li>
          <a class='last' href='#'>Enlace F</a>
          <ul>
            <li><a href='#'>Enlace F1</a></li>
            <li><a href='#'>Enlace F2</a></li>
            <li><a href='#'>Enlace F3</a></li>
            <li><a href='#'>Enlace F4</a></li>
           </ul>
        </li>
      </ul>
    </div>

Modificamos href='#'> modificamos la almohadilla marcada en rojo por la dirección URl de nuestra página y donde pone Enlace por el nombre de la página.

Cómo personalizar el carrusel

Buscamos en nuestra plantilla:



  <!-- Empieza la galería de imágenes del carrusel --><div id='caja-carrusel'>
    <div class='infiniteCarousel'>
          <div class='wrapper' style='overflow-x: hidden; overflow-y: hidden;'>
            <ul>
      <li><a href='#'><img alt='' src='URL_DE_LA_IMAGEN' title='Texto del tooltip'/></a></li>

    <li><a href='#'><img alt='' src='URL_DE_LA_IMAGEN' title='Texto del tooltip'/></a></li>...

La parte que nos interesa y que corresponde a cada imagen y a su enlace es:

    <li><a href='#'><img alt='' src='URL_DE_LA_IMAGEN' title='Texto del Tooltip'/></a></li>

Está configurado para mostrar imágenes de 90 pixeles de ancho por 125 pixeles de alto:
Modificamos:

    Sustituyes la almohadilla '#' por la URL de la página a donde quieres que se dirija al hacer click sobre la imagen.
    En title='' escribes dentro de las comillas el texto del tooltip (el texto que aparecerá al poner el puntero del ratón sobre la imagen)
    En donde dice URL_DE_LA_IMAGEN pones la dirección web (URL) de la imagen.

Cómo agregar últimas entradas con miniatura

Desde diseño, haz click en el gadget de Lista de Blogs y agrega el siguiente enlace de forma repetitiva, cambiando el número marcado de rojo cada vez que agregues el enlace, (el primer enlace 1, luego 2, después 3...) cada enlace sirve para que se muestre una entrada, y vas a poner tantos enlaces como entradas quieras mostrar.

    http://Nombreblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1

Deberás configurarlo para que muestre el título y la imagen miniatura. Todas mostrarán el enlace a la entrada que dice: "Ver artículo".

Configurar el gadget de entradas populares (galería de miniaturas) para que muestre el título del post al poner el puntero encima de la imagen
Necesitas configurar el gadget de "Entradas populares", para que muestre solamente la miniatura, de ese modo se verá el tooltip con el título de la entrada.

href='#'>

Indice HTML Plantillas