25

Títulos dobles en la sidebar

Es un efecto muy lindo para mostrar de una forma original los títulos en nuestra sidebar.

1- Hemos de colocar este código en el CSS de nuestra plantilla, por ejemplo, antes de ]]></b:skin>


/*- Doble título-------------------------- */
h5{
margin: 0;
font-weight: normal;
color: #d8f7af;
font-size: 2.2em;
position: relative;
}

h6{
margin: 0;
display: inline;
position: relative;
top: -.5em;
left: 2em;
font-size: 1.5em;
font-weight: normal;
color: #94c258;
}

Podemos cambiar el color por el que más se ajuste a nuestras necesidades e incluso el tamaño del texto (fuente).

2- Vamos a nuestra plantilla /Página de elementos /Añadir un nuevo elemento HTML-Javascript. Dejamos la cajita para el título en blanco y dentro del nuevo elemento pegamos:


<h5>...NUESTRO TITULO...</h5>
<h6>...NUESTRO TITULO...</h6>


Sustituimos "NUESTRO TÍTULO" por el título que vamos a darle al elemento.
Esto hará que el título del elemento tenga el "efecto duplicado", justo debajo incluimos el contenido del elemento (un contador, links, o lo que sea que queramos), guardamos cambios.



Visto en: BlogU

Entradas Relacionadas:

25 comentarios:


Fernando

De todas las plantillas cual es la mas facil de modificar?
La Minima y sus deribados, dark,blue ochre?

Carmen M

Gracias, Rosa, me parece un efecto precioso que ya he aplicado en mi blog. Muchísimas gracias por el enlace, ya sabes que tienes el mío. Tu blog me resulta súper útil y es una gran inspiración para mí. Soy devota de Rosa y de Gema, las que mejor explican las cosas y cuyos códigos funcionan!Hasta pronto, enhorabuena por tu trabajo.

Anónimo

Fernando, sobre eso hay opiniones para todos los gustos...si me pides la mía, te diría sin duda que la Mínima, cualquiera de ellas, la del Escaparate, por ejemplo, es la Mínima Lefty

andrespepo

Rosa Rosa Rosa, como vas? hola soy andrespepo de depuntazo, te saludo y te felicito por el blog que cada dia tiene cosas muy buenas, pero te pregunto, como hago para que mis entradas no sean tan largas sino algo mas corto y que le pueda poner un leer mas o un ver completo, es decir que no salga toda la nota sino solo el principio algo asi, me ayudarias con eso por favor, de nuevo tefelicito y gracias desde argentina

andrespepo

Rosa Rosa Rosa, como vas? hola soy andrespepo de depuntazo, te saludo y te felicito por el blog que cada dia tiene cosas muy buenas, pero te pregunto, como hago para que mis entradas no sean tan largas sino algo mas corto y que le pueda poner un leer mas o un ver completo, es decir que no salga toda la nota sino solo el principio algo asi, me ayudarias con eso por favor, de nuevo tefelicito y gracias desde argentina

Anónimo

Andrespepo,mira a ver si es esto lo que buscas:

Leer mas

Talin

No se si este es el apartado correcto, pero no encontré otro:
En las barras laterales (siebars) los diferentes „elementos de página“ que tengo puestos están muy pero que muy juntos y quisiera que hubiese un poquito más de distancia. ¿Cómo puedo añadir un poco más de distancia Rosa?
Gracias de nuevo.

Anónimo

Talin,dime al menos que plantilla estas usando, sino no podré ayudarte.

Talin

Rosa disculpa por no habértelo indicado antes, lo que pasa es que no tengo abierto el Blog al público hasta que esté listo. La plantilla es la “Dark Slined Mod 2.0” adaptada por jackbook.com. Esta es la Demo en Blogger http://slined.blogspot.com/2007/08/hello-world.html y aquí la demo de la original de Wordpress donde puedes apreciar que hay más distancia entre los diferentes elementos en las Sidebars http://themes.wordpress.net/testrun/.

Anónimo

Talin, el problema con las plantillas de Jakcbook es que el estilo CSS, donde se tendrían que hacer esos cambios, está alojado en un archivo externo y, aunque he intentado acceder, el servidor me dice "límite de ancho de banda excedido" y no me deja...

Anónimo

HOLA ROSA BUENO ESTA BONITO EL EFECTO PERO NO CAE CON MI PLANTILLA MINIMA DARK SERIA CUESTION QUE PUSIERAS CODIGOS PARA PODER CAMBIARLES EL COLOR PERO ANTE TODO GRACIAS !!!

Anónimo

Rafo, el color se cambia en el mismo código, en:
color: #d8f7af;

Cambiando el código hexadecimal por el que se quiera.

Anónimo

Hola Rosa, me preguntaba si hay una forma de que en vez del titulo del widget de la sidebar, aparesca una image, es que lo he intentado pero no me sale

Anónimo

Yurika, mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/07/imagen-o-color-de-fondo-en-el-ttulo-del.html

Inmortal

yO TENGO UNA UDA ENORME CON ESTE TRUCO...

COMO HAGO PARA QUE APERESCA ESTE EFECTO EN LOS ELEMENTOS QUE NO SON "EDITABLES CON HMTL" LOS QUE SON DIRECTOS COMO LAS ETIQUETAS, LOS SEGUIDORES, LAS ENCUESTAS, ETC...

ESPERO QUE ME LEAS ROSA Y ME PUEDAS CONTESTAR...YA QUE LA ENTRADA NO ES RECIENTE

Anónimo

GUILLERMO, leo todos los comentarios, estén en la entrada que estén, ya que todos me llegan directamente a mi correo.

Ponle título al elemento que sea como haces siempre, luego con la plantilla de artilugios expandida, localizas el gadget al que quieres añadir el efecto (si le has puesto el título lo localizarás por el) algo más abajo de donde está el comienzo del código del gadget que será una línea parecida a esta:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>

verás una etiqueta como esta (todos los gadgets la llevan):
<h2 class='title'><data:title/></h2>

Sustitúyela por esto:

<h5><data:title/></h5>
<h6><data:title/></h6>

Inmortal

Muchas Gracias Rosa :D

Dios te Bendiga...

Y Felicidades por el Blog buenisimo!

Ja

Marga

HOLA ROSA !!
Acabo de dejarte un comentario y creo que no me salido bien ...
Te lo dejo aquí por si acaso.
Verás he visto este truquillo y lo estaba poniendo en mi blog.
He modificado el tamaño del texto y me ha quedado bien, pero me sale en color blanco el grande y el pequeño en un tono verde. Me podrías indicar dónde puedo ver los colores ?? Me gusta tal cual nos has puesto tu el ejemplo, en tonos grises ...
Gracias y felicidades de nuevo por tu blog. Me es de mucha ayuda !!!
Marga

Anónimo

Marga El color se cambia donde dice color: #d8f7af; cambiando ese código por el del color que quieres.
Puedes ver códigos de color aquí:

http://www.tayloredmktg.com/rgb/

Marga

Gracias Rosa !!!

Lo he estado intentando y hago algo mal, seguro, porque me salen los dos títulos en blanco...
Lo seguiré intentando y te doy de nuevo las gracias por tu paciencia.
Marga

Anónimo

Marga Empeza de nuevo con tranquilidad. Es sencillo, pero no te agobies, a veces es mejor dejarlo para otro momento que insistir una y otra vez seguido...

Marga

YA ESTÁ ROSA !!!!
Prueba superada jejeje

Gracias y seguiré probando cositas.

Marga

Anónimo

Marga ¡Sabía que lo harías! ;)

liyiss

Muchas gracias por tus aportaciones Rosa!!!
Y como se puede hacer este efecto en el texto de un link que he hecho en vez de en el titulo?lo intento pero no me sale.

Saludos, Laura

Anónimo

Laura Pues supongo que de igualforma, pero añadiendo el a herf para el enlace solo en uno de los textos.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S