sábado, 17 de julio de 2010

Mensaje, imagen o menú al pasar por el título de una entrada

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios.

Buscar el siguiente código:
<a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>

Ahora cambiar por el siguiente código, o agregar lo marcado en rojo:
<a expr:name='data:post.id'/>
    <b:if cond='data:post.title'><span class='mini'>
      <h3 class='post-title entry-title'>
           <div class='post-detalles'>
  ACÁ PONER EL MENSAJE, IMAGEN, MENU O LO QUE QUIERAN MOSTRAR
        </div> 
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3></span>
    </b:if>

Ahora ir más arriba en el CSS de la plantilla, justo arriba de ]]></b:skin> poner el siguiente código:
 /* Mensaje al pasar por el título By: Vku. http://loseasi.blogspot.com */
.post-detalles {
    background: #33CCFF repeat;      /* Color del fondo */
    top:35px;                        /* Distancia a mostrar por debajo del título */
    left:130px;                      /* Distancia desde la izquierda */
    padding:2px;
    position:absolute;
    width:auto;                      /* Ancho del fondo se puede poner tamaño fijo */
    font-size:12px;                  /* Tamaño del texto */
    text-align: center;              /* Cambiar por center, left o right */
    border:solid 1px #c2cabc;        /* Color del borde del fondo */
 }
.post-detalles a {
    color:#fff                       /* Color del texto si fuese un link */
 }
  /* No tocar para abajo */
.mini {
    position:relative;
 }
.mini .post-detalles {
    display:none;
 }
.mini:hover .post-detalles {
    display:block;
 }

Personalizar código CSS a gusto y según el contenido.

Donde dice: ACÁ PONER EL MENSAJE, IMAGEN, MENU O LO QUE QUIERAN MOSTRAR

Poner el contenido.

Con vista previa ven como está quedando y van cambiando el código CSS.

Ya terminado guardar plantilla.

Dentro del div se puede poner lo que se les ocurra:
       <div class='post-detalles'>
CONTENIDO
        </div> 

Ejemplo con mensaje:

Ejemplo con mis botones:

Ejemplo con botones para compartir de Blogger:

No hay comentarios:

Publicar un comentario