22 July 2009

Titulos bicolor en la sidebar

Hace tiempo que me venía preguntando el tema de ponerle dos tonalidades a los titulos de mi sidebar.

Pues Gema, como siempre está dispuesta a ayudar. Nos ha vuelto a prestar de su tiempo para explicarnos detalladito este tema. Y como dice ella; Quien enseña aprende dos veces, aquí vemos como también pego las explicaciones. Así lo tengo guardado en el cajón.

Para comenzar debo recordar que este efecto es posible haciendo uso de la etiqueta span, con la que podemos cambiar el titulo escogiendo una zona específica de la frase.

Si deseamos añadir diferentes estilos, agregamos la etiqueta span la cantidad de veces que sea necesaria, así hasta lograr el resulatado deseado:

Ejemplo Ejemplo Ejemplo

Más o menos esa es la idea en cuestión del funcionamiento de span. Básicamente es la que diferencia los estilos en nuestro blog. Ya sea en una entrada o bien en lo que se refiere al diseño, el motivo de esta explicación.

Cuando añades un nuevo elemento a la sidebar tienes la opción de añadirle también un nombre. Este nombre será como una especie de ID, aún así puedes obviarlo, aunque se recomienda agregarselo, pues nos permitirá poderlo ubicar en el HTML de nuestro blog.

Luego que tenemos el elemento añadido; vamos a Edición/HTML y expandimos los artilugios. Buscamos las líneas correspondientes al elemento a editar:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>


Como nos dice Gema, <data:title> es la etiqueta que genera los titulos. Si queremos eliminarlos solo debemos borrarla. Si queremos hacer uso de la etiqueta span y hacer los titulos de nuestra sidebar bicolor.

Cambiamos <h2><data:title/></h2> por el código que corresponde a la etiqueta que creará el efecto:

<h2> las <span> etiquetas </span></h2>

Luego de esto solo nos queda agregar los estilos CSS. Nos situamos en <b:skin> y justo antes añadimos:

.sidebar h2 {
color: #000;
font-size: 30px;
font-weight: normal;
letter-spacing: -1px;
}
.sidebar h2 span {
color: #FFFFFF;
}

Con estos sencillos pasos tendríamos este elegante efecto en nuestro blog. Solo queda cambiarlos a nuestro propio gusto. Cambiamos color, tipo de letras, tamaños y otros estilos.

Recuerda que con .sidebar h2 están añadidos los estilos normales de los titulos de los elementos y .sidebar h2 span para los estilos que llevan añadida la etiqueta span.

Nuevamente muchas gracias a Gema, por sus excelentes explicaciones y por su tiempo dedicado en ayudarnos con este tema.

07 March 2009

Cartel de avisos

Hoy quiero compartir con todos ustedes otro de los truquillos que Blogger nos brinda, y que fácilmente podemos hacer funciona con unos simples pasos. En este caso es para si queremos decir algo o informar, sea más vistozo en cualquier parte del blog:


(1) Como siempre, antes de la etiqueta </head>, pegamos el siguiente script:

<script src='http://ar.geocities.com/blogdecesar/rounded_corners.inc.js' type='text/javascript'/>

<link href='http://ar.geocities.com/blogdecesar/bubbles.css' rel='stylesheet' type='text/css'/>


(2) Guardas tu plantilla. Ahora vamos a brindar las clases correspondientes para que funcione:

Para carte blanco:

<div class="bubble">
<blockquote><p>
TEXTO, TEXTO, TEXTO, TEXTO
</p></blockquote>

<cite>Blanco</cite>
</div>


Para cartel celeste:

<div class="bubble">
<div class="rounded">
<blockquote>
<p>
TEXTO, TEXTO, TEXTO, TEXTO
</p></blockquote></div>

<cite class="rounded">Fondo Celeste</cite></div>


Para cartel negro:

<div id="pimped" class="bubble">
<div class="rounded">
<blockquote><p>
TEXTO, TEXTO, TEXTO, TEXTO
</p></blockquote></div>

<cite class="rounded"><strong>Fondo Negro</strong></cite>
</div>


Espero que te funcione. Suerte!.

Via: Blog de César.

15 February 2009

Menú con CSS

Gracias a Dynamic Drive podemos crear menúes muy vistosos y elegantes con solo CSS. Sin duda alguna este tipo de formas es de las más fáciles y personalizables que existen, a mi me fascina.

(1) Tenemos que descargarnos estas dos imágenes y subirlas a nuestro alojamiento:




(2) Agregamos el estilo CSS a nuestra plantilla, como siempre antes de ]]></b:skin> agregamos este trozo de código:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}


(3) Lo último que nos quedaría sería abrir un nuevo Elemento HTML con el código correspondiente, contenido del menú:

<ul class="solidblockmenu">
<li><a href="http://atasca2.blogspot.com/">Inicio</a></li>
<li><a href="http://atasca2.blogspot.com/search/label/CSS" class="current">Ejemplos CSS</a></li>
<li><a href="mailto:castro.1918@gmail.com">Contacto</a></li>
</ul>
<br style="clear: left" />

<p class="iepara">Paragraph that follows...</p>


Recuerda cambiar los datos del menú por los tuyos. En el ejemplo solo he puesto tres elecciones, puede agregar el trozo <li><a href="http://URL" class="current">Título</a></li> dependiendo la cantidad que quieras usar.

Suerte!.

Búsqueda

 
Copyright Cajón de truquillos 2010.
Converted To Blogger Template by Anshul .