Tutoriales

Títulos de dos colores en el sidebar de Blogger

Publicado por Claudia en febrero 7, 2009

En la plantilla Mínima de Blogger, por defecto hay un solo encabezado que define tanto la fecha de los posts como los títulos del sidebar, y que es simplemente h2. En otras plantillas, es probable que el título del sidebar aparezca como .sidebar h2 (o #sidebar-wrapper h2), y si no, debiésemos definirlo como tal, para que tenga propiedades distintas e independientes de la fecha de los posts.

Por ejemplo:

.sidebar h2 {
color: #ff0080;
font-size: 16px;
font-weight: bold;
text-transform: none;
letter-spacing:0;
}

En este caso, quiero que no haya espacio entre caracteres (letter-spacing), que las letras no se muestren todas como mayúsculas (text-transform: none), y definí las propiedades que quiero para la letra: color fucia, tamaño, letra en negrita y quizás también una fuente distinta. Con ello, el título se mostrará de un solo color. Pero como lo que yo quiero es que los títulos se muestren en dos colores distintos (como en este demo), tengo que hacer lo siguiente:

1. Ir a la edición de HTML y expandir los artilugios.

2. Antes de ]]>< /b:skin >, definir el segundo color que quiero para el título de mi sidebar, de la siguiente manera:

.azul {
color:#0F6084;
padding-left:5px; /* espacio entre la 1° y la 2° parte del título */
}

3. Bajo div id=’sidebar-wrapper’ están localizados los widgets. Por ejemplo, si quiero modificar el widget que lleva por título “Archivo del blog”, debo buscar un código como el siguiente en mi plantilla:

Aquí cambio el título (title), desde “Archivo del blog” a sólo “Archivo“, para que no se muestren las tres palabras del mismo color. Luego, antes de < /h2> añado < span class=’azul’ >del blog < /span > para determinar la segunda parte de mi título, de la siguiente manera:

Esto nos permite mostrar también la primera letra del título distinta (color, fuente, tamaño), o el título con tres colores, para que se vea como en degradado.

*Lo vi en Template-Godown y la plantilla WP-Polaroid.

Tags: ,
Blogger, Tutoriales

Crear un menú de botones con una sola imagen

Publicado por Claudia en diciembre 18, 2008

Usualmente, los menús son creados con varias imágenes, lo que hace algo más complicada la codificación y la carga de un sitio. Pero Kailoon de Loon Design nos enseña a crear estéticos menús de botones utilizando sólo una imagen, que pueden ser fácilmente añadidos a un blog.

Para un menú de botones, podemos usar una de las siguientes imágenes que creó Kailoon, o crear las propias que puedan ser cortadas en dos partes equivalentes.




La estrategia es la siguiente:

Se trata simplemente de añadir < span/ > en el link. Así, una parte del botón va a estar dada por el span, y otra por el link.

Demo originalDemo en Blogger.

El código

CSS: Pegar antes de ]]>< /b:skin >

ul.menu {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}
 
ul.menu li {
	float: left;
}
 
ul.menu li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px 'Arial', Helvetica, sans-serif;
}
 
 
ul.menu li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}
 
 
ul.menu li a:hover, ul.menu li a.current {
 	color: #0d5f83;
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top right;
}
 
ul.menu li a:hover span, ul.menu li a.current span {
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top left;
}

HTML: Pegar después de header-wrapper.

<ul class='menu'>
<li><a class='current' href='#' title='home'><span></span>home</a></li>
<li><a href='#' title='products'><span/>products</a></li>
<li><a href='#' title='blog'><span/>blog</a></li>
<li><a href='#' title='contact'><span/>contact</a></li>
</ul>

Cambiar los títulos de cada sección, y el nombre que queremos que tenga cada botón, y reemplazar # por el link de la sección correspondiente.

Alternativa

También podemos hacer una leve modificación en el código CSS, para utilizar botones de dos colores (Ver demo):

ul.menu {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}
 
ul.menu li {
	float: left;
}
 
ul.menu li a {
	float: left;
	text-decoration: none;
	color: #527C27;
	padding: 4px 15px 0 0;
	margin-right: 7px;
        background: url(http://2.bp.blogspot.com/_XxWhaC4o7dE/SUm3XNh6vBI/AAAAAAAAALI/LV9-HrDLEFU/s1600/green.png)no-repeat top right;
	font: 900 14px 'Arial', Helvetica, sans-serif;
}
 
 
ul.menu li a span {
	float: left;
	padding-right: 15px;
	display: block;
        background: url(http://2.bp.blogspot.com/_XxWhaC4o7dE/SUm3XNh6vBI/AAAAAAAAALI/LV9-HrDLEFU/s1600/green.png)no-repeat top left;
	margin-top: -4px;
	height: 24px;
}
 
 
ul.menu li a:hover, ul.menu li a.current {
 	color: #0d5f83;
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top right;
}
 
ul.menu li a:hover span, ul.menu li a.current span {
	background: url(http://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top left;
}

Todas las imágenes están almacenadas en Blogger. Adapté el tutorial a Blogger para probarlo yo misma y darle una mejor utilidad. Sin embargo, el menú puede ser añadido a cualquier plataforma que permita la edición de HTML.
El packete original con imágenes y el archivo *.psd del menú pueden ser descargados desde el blog de Kailoon (ver link arriba).

Tags:
Tutoriales

Dos formas distintas de poner excerpts (leer más) en Blogger

Publicado por Claudia en diciembre 6, 2008

Hay varias formas de poner excerpts en Blogger, y no todas funcionan del mismo modo. Quise probar tres formas distintas de hacerlo (aunque me quedé con dos), creando demos por separado para mostrar las diferencias. He tratado de simplificar al máximo las instrucciones originales para facilitar la tarea.

Forma 1

Es objetivamente mejor que la anterior. La compartió Rosa en su Escaparate hace más de un año, y se trata de un “leer más con resumen”. Mira el demo AQUÍ.

Ventaja: “Leer más” se añade sólo en las entradas que elegimos.

Paso a paso:

a) Expandir los artilugios y añadir justo antes de </head>:

<script type='text/javascript'
src='http://girlyblogger.site90.net/hackosphere.js' />

b) Buscar la siguiente línea antes de post-header-line-1:

<div class='post hentry uncustomized-post-template'>

Y reemplazarla por:

<div class='post' expr:id='&quot;post-&quot; + data:post.id'>

c) Justo debajo de <div class=’post-header-line-1’/>, ubicar estas dos líneas:

<div class=’post-body entry-content’>
<data:post.body/>

Reemplazarlas por:

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p>
<a expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'
href='javascript:void(0);'>
Leer más...
</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p>
<a expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'
href='javascript:void(0);'>
</a>
</p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>")
</script>
</b:if>

d) Guardar los cambios.

e) Para postear una entrada, hacerlo del siguiente modo:

TEXTO A MOSTRAR
<span id="fullpost">
TEXTO A OCULTAR
</span>


Forma 2

Este método es distinto a los anteriores. Acorta todos los posts en un mismo punto, por lo que es ideal para plantillas tipo “revista”. Lo vi en una plantilla “made in Brasil”, y lo encontré luego en el blog de Amanda de Blogger Buster, bajo el título “Elegant Post Summaries for Blogger with jQuery“. Puedes ver el demo AQUÍ.

Paso a paso

a) Pegar justo antes de <head>, al inicio de la plantilla:

<script language='javascript'
src='http://girlyblogger.site90.net/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript'
src='http://girlyblogger.site90.net/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
 
$('.excerpt').expander({
slicePoint: 280, // punto de corte
expandText: '[...]', // por defecto es 'read more...'
});
 
});
</script>

*El “punto de corte” es el número de caracteres que queremos mostrar.

b) Buscar:

<div class=’post-body entry-content’>
<data:post.body/>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

Reemplazar esas cuatro líneas por este código:

  <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
    <a expr:href='data:post.url'>Seguir leyendo...</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</b:if>

c) Guardar los cambios.

d) Si queremos que el “Sigue leyendo…” aparezca justo al lado del texto, en vez de abajo, simplemente  en el código del paso b reemplazar los “div” por “span”.

NOTA: Había realojado los scripts en Boxstr, pero lamentablemente no anda bien. Mientras busco una alternativa, dejo los links originales que sí funcionan. De todas maneras, siempre es recomendable realojar los scripts, porque eventualmente podrían dejar de funcionar.

ACTUALIZACIÓN (17/12/08): Realojé los scripts en 000Webhost. Espero que ahora sí funcione perfecto. Probé es Firefox e IE; en IE las entradas tardan fracción de segundo en mostrarse (lo mismo que tarda en cargarse cualquier página), pero es algo muy menor.

Los scripts están disponibles para descargar aquí, en caso de que fallara el hosting de nuevo. También hice la prueba en SkyDrive, pero no funcionan en IE.

Tags: