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:

.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;
}

.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.