Avatar/icon en el Title-post.

Hoy observaremos como colocar un avatar {imagen en icon} o algún signo en los títulos de las entradas/post de nuestro blog. En otros tutoriales, vimos como ACA TUTORIAL, editando desde el codigo CSS que nos brinda dicho tutorial; esta vez editaremos desde el codigo HTML, pero directamente desde el codigo de nuestra plantilla.

Este tutorial puede ser realizado en ambas tipos de plantilla {actualizada/clásica}, mayormente se suele ver mucho en plantillas clásicas, donde es mas sencillo aplicar el tutorial; pero hoy les traigo el efecto para ambas opciones:

En plantillas actualizadas

❶er paso: Para colocar nuestro avatar en una plantilla actualizada, nos dirigimos a Plantilla / Edición HTML & buscamos en nuestro codigo {Ctrl + F}, la siguiente linea:

      <h3 class='post-title entry-title' itemprop='name'>

Encontraras DOS lineas iguales, nos interesa editar la segunda.

❷do paso: Una vez localizamos la segunda linea, DEBAJO colocaremos lo siguiente:

<img class="avatarTC" src='URL DE TU AVATAR'/>

❸er paso: Completas el codigo de la imagen con la URL que deseas & vuelves a buscar en tu plantilla lo siguiente:

]]></b:skin>

ARRIBA de ello, colocaras el siguiente codigo CSS:

.avatarTC {
display: inline-block;
margin: 3px;
float: left; 
width: 55px; /* TAMAÑO DEL AVATAR */
background: none; /* COLOR DE FONDA */
border: 0px solid #fff; /* BORDE DEL AVATAR */
border-radius: 0px; /* PUNTAS REDONDEADAS */
}

Editamos lo marcado.

Lo que se encuentra en negrita, sera la posición de nuestro avatar. Puedes colocarlo tanto a la derecha como a la izquierda del titulo de tus entradas; solo debes cambiar left {izquierda} por rigth {derecha}.

¿& si quiero colocar un signo como los de ESTE TUTORIAL?

Para colocar nuestro signo en vez de un avatar, en el 2do paso, NO colocamos el codigo de la imagen, sino que colocaremos alli mismo, debajo de la segunda linea, lo siguiente:

<div class="signoTC"> TUSIGNO </div>

luego de completar con el signo que deseemos, en el tercer paso el codigo CSS que agregaremos sera el siguiente:

.signoTC {
display: inline-block;
color: #000; /* COLOR DEL SIGNO */
font-size: 20px; /* TAMAÑO DE L SIGNO */
text-shadow: 0px 0xp 0px #fff; /* SOMBRA DEL SIGNO */
}

Editamos lo marcado.

Una vez editamos a nuestro gusto, ya tenemos nuestros titulos personalizados de una manera mas original que la de costumbre!

En plantilla clásicas

A la hora de editar las plantillas clásicas, es algo mas confuso/complicado debido a que no traen un codigo "base" como las plantillas actualizadas, es decir que todas son diferentes en lo que nos referimos a como esta armada, editada.

Pero hay ciertas lineas que identifican cada parte de nuestro blog, lo que nos ayudara a realizar este tutorial, si prestamos atencion.

❶er paso: en nuestra plantilla debemos buscar dentro de las etiqueta <blogger></blogger> la siguiente linea:

<$BlogItemTitle$>

Es muy posible que encuentres DOS veces la misma linea. En este caso editaremos ambas de la misma forma {te recomiendo que primero empieces con una & luego repite los pasos con la segunda}.

❷do paso: Bien, es muy posible que la linea anterior la encuentres dentro de algún "<div...></div>", por ejemplo puede estar de esta forma:

<div class="h1"><$BlogItemTitle$></div>

Lo que haremos, sera ARRIBA de todo eso que conformaría el titulo de nuestras entradas colocar lo siguiente:

<img class="avatarTC" src='URL DE TU AVATAR'/>

Nos quedara de esta forma:

<img class="avatarTC" src='URL DE TU AVATAR'/>
<div ...><$BlogItemTitle$></div>

❸er paso: Una vez tenemos esto, buscamos la etiqueta:

</style>

ARRIBA de ella colocamos el siguiente codigo CSS:

.avatarTC {
display: inline-block;
margin: 3px;
float: right; width: 55px; /* TAMAÑO DEL AVATAR */
background: none; /* COLOR DE FONDA */
border: 0px solid #fff; /* BORDE DEL AVATAR */
border-radius: 0px; /* PUNTAS REDONDEADAS */
}

Editamos lo marcado.

Lo que se encuentra en negrita, sera la posición de nuestro avatar. Puedes colocarlo tanto a la derecha como a la izquierda del titulo de tus entradas; solo debes cambiar left {izquierda} por rigth {derecha}.

¿& si quiero colocar un signo como los de ESTE TUTORIAL?

En plantillas clasicas, si queremos colocar un signo, en el titulo de las entradas, simplemente buscas la linea que corresponde dichos titulos:

<$BlogItemTitle$>

& antes de ella colocas lo siguiente:

<div class="signoTC"> TUSIGNO </div>

Nos quedara de esta forma:

<div class="signoTC"> TUSIGNO </div> <$BlogItemTitle$>

Luego de tener colocado el codigo & de completar con el signo que deseemos, colocaremos el siguiente code CSS:

.signoTC {
display: inline-block;
color: #000; /* COLOR DEL SIGNO */
font-size: 20px; /* TAMAÑO DE L SIGNO */
text-shadow: 0px 0xp 0px #fff; /* SOMBRA DEL SIGNO */
}

Donde editaremos lo marcado.

& así de sencillo tendremos la segunda opción de darle un toque de originalidad a nuestros post!

Espero sea de utilidad!

~