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: ,
Herramientas

OinkURL: Pídele al cerdito que te acorte la url

Publicado por Claudia en febrero 5, 2009

OinkURL es otro servicio acortador de URL’s como muchos otros (Make use of, por ejemplo, destaca a TinyURL.com e is.gd como dos de los más populares). Si de acortadores de URL’s se trata, podemos encontrar muchísimos, pero OinkUrl tiene algunas características que lo hacen distinto a los demás: el diseño no sólo es lindo y amigable para los usuarios, sino también tiene la pecularidad de mostrar una captura de pantalla de la URL que queremos ver, incluyendo además un antivirus que indica si el contenido del sitio al que fuimos redireccionados es seguro, presenta un riesgo leve o si es peligroso y es mejor que no accedamos a él.

Al acortar una URL, veremos un simpático mensaje como este, que hace que el sitio sea aún más divertido y memorable: “No estamos sorprendidos de que funcionara. La URL que has querido acortar ha sido devorada por nuestros cerditos y extrañamente lograron expulsar una URL más corta“.

Enlace: OinkURL | Vía: Feedmyapp

Tags:
Wordpress themes

Google Gmail: Theme gratuito para WordPress

Publicado por Claudia en enero 30, 2009


Google Gmail es un theme minimalista de dos columnas para WordPress, diseñado por Deluxe Themes y basado en el tema clásico de Gmail. Su apariencia resulta extrañamente familiar (favicon de Gmail, colores, entradas resumidas a modo de correos electrónicos, widgets y comentarios expandibles, link de acceso en la página principal), tanto así que cuando lo vi dudé de estar frente a un nuevo theme para WordPress. La única gran diferencia de este theme con respecto las variaciones del tema clásico para stylish, es que no tiene el logo tradicional de Gmail con todas sus letras.

Demo | Enlace al sitio de descarga

Tags: , , ,
Free Blogger Templates

Ele, Template para Blogger

Publicado por Claudia en enero 29, 2009

DEMO | DOWNLOAD


Ele es un Theme WordPress de dos columnas diseñado por Inspired Spark, y convertido a Blogger por mí. Siempre me gustó este theme, y comencé a convertirlo a Blogger hace un tiempo, pensando en utilizarlo en mi blog personal. Para mi gusto, es un diseño simple y elegante, que puede ser usado no sólo en blogs personales. El theme original para WordPress puede verse aquí.

NOTA: Los íconos de redes sociales que aparecen al pie de cada post no son parte del post. Es un plugin para WordPress llamado “sociable“.

*Testeado en Firefox 3, IE 7 & IE 8.

Instrucciones – Instrucions

1. Anda a Diseño/Edición de HTML y sube la plantilla. Guarda. / Go to Layout/Edit HTML and upload the xml file. Save.

2. Cambia el formato de la hora a la fecha del día de hoy (por ejemplo, Miércoles, Enero 28, 2009) en Configuración/Formato. Change the post timestamp format to the date today (for example, Wednesday, January 28, 2009) at Settings/Formating.

3. Personaliza el menú buscando este código./ Customize your menu bar (there are two) by searching this code.

<ul id='nav'>
 
<li class='page_item'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li class='page_item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li class='page_item'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li class='page_item'><a href='#'>Edit</a></li>
 
         </ul>

4. Busca el siguiente código para cambiar la url de tu blog y el link del tu feed RSS (si usas Feedburner)./ Search for the following code to change your blog url and your RSS feed link (if you use Feedburner):

<div id='sb'>
<a href='http://technorati.com/faves?add=http://YOURBLOG.blogspot.com/'><img alt='technorati' src='http://2.bp.blogspot.com/_XxWhaC4o7dE/SThAxTESzdI/AAAAAAAAAIQ/WZccR6A-IWk/s1600/technorati.gif'/></a><a href='/feeds/posts/default'><img alt='subscribe' src='http://4.bp.blogspot.com/_XxWhaC4o7dE/SThAxIdRznI/AAAAAAAAAH4/NpSShOhG_t0/s1600/rss.gif'/></a>
</div>

5. Pon tus anuncios aquí./Put your ads here.

<div id='ads'>
<a href='#'><img alt='ads' src='http://4.bp.blogspot.com/_XxWhaC4o7dE/SThAvllPZ6I/AAAAAAAAAG4/flUohgfTVhc/s1600/adblock.gif'/></a><a href='#'><img alt='ads' src='http://4.bp.blogspot.com/_XxWhaC4o7dE/SThAvllPZ6I/AAAAAAAAAG4/flUohgfTVhc/s1600/adblock.gif'/></a>
</div>
Iconos

4 sets de íconos sociales gratuitos

Publicado por Claudia en enero 27, 2009

Lenka Melkakova de Profi Magazin publicó en DeviantArt cuatro sets de íconos de redes sociales de su propia creación. Cada uno está disponible en formato *.png, en tres tamaños: 16×16, 32×32 y 64×64 píxeles (pinchar cada imagen para ir a la página de descarga de cada set).

Cuando revisé la galería de Lenka, hace unos días, sólo había publicado dos de estos sets. No es improbable que siga compartiendo sus originales íconos.

Set N° 1

Set N°2 (grunge)

Set N°3

Set N°4

¿Más íconos?

SpeckyBoy hizo una recopilación de 30 sets de íconos de redes sociales realmente creativos, para usar en blogs o páginas web.

Enlace: 30 Amazingly Creative Social Bookmarks Icon Sets

Tags: ,