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

3 opinaron:

G

Se ve muy bueno, lo voy a probar enseguida :)

Besos

Responder
Juan Carlos

Lo apliqué a mi blog, con dos colores y quedó genial :)

Responder
squirrel

Voy a probarlo aunque me da un poco de miedo meterme con el codigo HTML.

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio