Títulos de la sidebar personalizados V: títulos de dos colores

Hoy vamos a ver otra forma más (la quinta forma) de personalizar los títulos de nuestra sidebar, esta vez vamos a hacer que los títulos tengan dos colores, como se ve en esta imagen que es una captura de uno de mis blogs de pruebas:



Bien, entonces para conseguirlo, seguimos los siguientes pasos:

1.§ Ingresamos a Diseño/ Edición de HTML y Expandir plantilla de artilugios. Con ayuda de CTRL+F buscamos ]]></b:skin>. Encima de éste pegaremos el siguiente código:

.otrocolor {
padding-left:5px;
color:#FF3300;
}

2.§ Ahora, localizamos el nombre que le dimos al gadget al que vamos a personalizar el título con dos colores.

Por ejemplo, digamos que el gadget al que quiero agregar el efecto se llama Lista de amigos,el nombre deberemos de buscarlo en la plantilla y deberá de tener casi la siguiente estructura:

<b:widget id='HTML1' locked='false' title='Lista de amigos' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

Ahora insertaremos el código que está en negrita en las partes indicadas y "partiremos" el títulos del gadget para que una parte sea de un color y la otra de otro color:

<b:widget id='HTML1' locked='false' title='Lista' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/><span class=’otrocolor’>de amigos< /span ></h2>
</b:if>

Damos click a guardar y listo, muy sencillo.

Si queremos agregar más colores, deberemos de crear un nuevo estilo , en lugar de .otrocolor { pondremos otro nombre y cambiaremos color:#FF3300; por otro y cuando queramos agregarlo a un título de la sidebar no nos olvidaremos de colocar la parte del título entre <span class=’Aquí-nombre-de-otro-estilo’>Aquí-parte-del-título< /span >

Visto en : Template-Godown | Vía: Chica Blogger