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 MOSTRARPoner 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:
