Personalizar Entrada Destacada

Hey babies! Hoy, como veis en el título, vengo con otro tutorial para enchular nuestro blog un poquito más, esta vez a cómo personalizar la entrada destacada, ya que con el diseño base ese "destaque" queda bastante feo, la verdad.

Este es el mío:

Y aunque parezca complicado, nada más lejos de la realidad, es realmente sencillo, ya que solo es un código.

1. Vamos a Tema > Personalizar (Flecha) > Editar HTML y encima de ]]></b:skin> ponemos el siguiente código que, como siempre, todo lo que está en negrita es personalizable:

/* Postagem em destaque: Imagem by Sweet Magic */

.imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 2px 2px 0;}

.captioon {position: absolute; background: #f0e9e9; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 16px; text-shadow: 1px 1px 3px #000;}

.imagem:hover captioon {opacity: 0.75;}

.imagem:hover:before {opacity: 0;}

.caption:before {bottom: 10px; right: 10px;}

.caption captioon {bottom: 3px; right: 30%;}

.caption:hover captioon {right: 0px;}

/* Postagem em destaque by Sweet Magic */

.post-summary { background: #d9d2e9; color: #FFF;  padding: 20px; box-shadow: 2px 4px 2px 2px #E4E4E4; margin-top: 19px; padding-top: 10px; } 

.post-summary a {color: #FFF; font-size: 17px; font-weight: bold; text-decoration: none; }

.post-summary:hover:before { opacity: 1; }

.post-summary:before { content: “Featured”; background: #000; opacity: .7; font-family: Lobster; padding: 10px; position: relative; float: right; top: -10px; right: -20px; transition: .3s; } 

.post-summary .image {box-shadow: 2px 2px 4px 0px #f0e9e9; border: 2px solid #f0e9e9; }

Si tienes cualquier duda, no dudes en dejarlo en comentarios.