Pueden usarlos de fondo para su PC o, con un poco de imaginación, usarlo de fondo para su blog.
Aquí algunos:
Feliz Día de las Brujas para los que lo celebran!
viernes, 31 de octubre de 2008
Wallpapers de Halloween
Ya que estamos en Halloween, aquí os ofrezco Myopenstudio, una web que ha sacado una colección de 20 wallpapers con el tema de Halloween y también iconos, y otras utilidades relacionados dicho tema.
Pueden usarlos de fondo para su PC o, con un poco de imaginación, usarlo de fondo para su blog.
Aquí algunos:
Feliz Día de las Brujas para los que lo celebran!
Pueden usarlos de fondo para su PC o, con un poco de imaginación, usarlo de fondo para su blog.
Aquí algunos:
Feliz Día de las Brujas para los que lo celebran!
lunes, 27 de octubre de 2008
Caja para colocar el enlace (textarea)
Y bien, ahora que tenemos listo la imagen del botón para que nos enlacen , estamos listos para poner la cajita donde va el código que deben copiar nuestros lectores para enlazarnos desde su blog...Bueno, vamos a ello!
Para hacer la caja usamos el siguiente código:
♠ Si deseamos, podemos moficar rows, que es el alto y cols, que es el ancho de la cajita
Y uniendo lo hecho en el post anterior con este de la cajita, en tu sidebar se verá así:
♠ Otra buena opción sería usar una textarea que nos permita seleccionar todo el código con un sólo click,como ésta:
Para hacerlo, agrega wrap="off" class="codigo" onclick="this.select() al código anterior.
♠ Y claro, también podemos agregarle color con style="background-color:#40BF73;"
Diviértanse y jueguen con los códigos :)
Para hacer la caja usamos el siguiente código:
<textarea rows="3" cols="15">
<center><a href="LA URL DE TU BLOG" target="_blank">
<acronym title="NOMBRE DE TU BLOG">
<img src="LA URL DE LA IMAGEN QUE SERVIRÁ DE BOTÓN"/>
</acronym></a></center>
</textarea>
♠ Si deseamos, podemos moficar rows, que es el alto y cols, que es el ancho de la cajita
Y uniendo lo hecho en el post anterior con este de la cajita, en tu sidebar se verá así:
♠ Otra buena opción sería usar una textarea que nos permita seleccionar todo el código con un sólo click,como ésta:
Para hacerlo, agrega wrap="off" class="codigo" onclick="this.select() al código anterior.
♠ Y claro, también podemos agregarle color con style="background-color:#40BF73;"
Diviértanse y jueguen con los códigos :)
martes, 21 de octubre de 2008
Crear una barra de navegación
Después de mucho tiempo me he decidido a introducir nuevas modificaciones en mi blog y como es habitual, cada cambio que hago os lo cuento. Ahora me he decidio por colocar una barra de navegación con un menú para que sirva de guía a los usuarios del blog o para dirigirlos a los sitios que el autor del blog, en este caso yo, le interese más.
1.- Empezamos creando dos nuevas "variables" que utilizaremos más adelante para dar color al texto de los menús y al fondo, así desde la pestaña "Fuentes y colores" podremos modificar su color. Se colocan debajo de las demás "variables":
<Variable name="colormenu" description="Menu Color"
type="color" default="#FFFFFF" value="#ffffff">
<Variable name="colorbgmenu" description="Menu bg Color"
type="color" default="#FFFFFF" value="#B10245">
2.- Diseñamos la barra adaptándola a la configuración de nuesto blog y al lugar en que queremos situarla (todo el ancho del blog (body) o sólo en la parte principal del blog (main); yo optaré por esta segunda opción. Estos parámetros podemos colocarlos en cualquier lugar del código HTLM entre <head> y <:/head>, así que lo pondremos después de "description":
/*-- (Menú) --*/
#nav {
clear:both;
margin:1px auto 1px auto;
width: 966px;
height:30px;
background: url(http://xosse.dorrio.googlepages.com/fnd_marc_prev2.GIF) repeat-x;
overflow:hidden;
}
#nav_l {
float:left;
width:966px;
margin:0px; padding:0px;
overflow:hidden;
height:30px;
}
.menu {
float:left;
margin:5px 1px;
padding:3px;
width: 400px;
}
.menu li {
display: inline;
list-style: none;
margin:0;
padding:0;
}
.menu ul, .menu ol {
display: inline;
list-style: none;
margin:0;
padding:0 10px 0 0;
}
.menu a, .menu a:visited {
color: $colormenu;
font-weight: bold;
margin:0;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.menu a:hover {
background: $colorbgmenu;
text-decoration: none;
font-weight: bold;
border:1px solid #fff;
}
#subscribe {
float: right;
width:192px;
height:32px;
margin:4px 4px 3px 4px;
}
.rss {
float:left;
margin:7px 5px 5px 0px;
width:500px;
}
.rss ul {
margin: 0; padding: 0 2px;
}
.rss li {
background: url(http://bp2.blogger.com/_Zuzii37VUO4/R2iVYyjZEeI/AAAAAAAACew/
TXSgAsWEBLA/s1600/rss.gif) no-repeat 0 3px;
margin: 0 2px 0 0;
padding: 3px 0 3px 20px;
list-style: none;
font-size: 12px;
color:$colormenu;
display: inline;
font-weight: bold;
}
.rss li a {
font-size: 12px;
color:~$colormenu;
}
En negrilla van algunos de los parámetros quepodeis modificar a vuestro gusto (todos son modificables pero estos prsentan menos problemas)
3.- Para finalizar introduciremos el siguiente código en el blog y lo haremos en algún lugar entre <body> y </body>. Si queremos que ocupe todo el cuerpo lo pondremos al inicio; para que ocupe sólo la parte principal lo haremos en 'main'. Como mi barra irá debajo del título, expando la "plantilla de artilugios" y pego el código debajo del widget 'title':
<!-- menu -->
<div id='nav'>
<div id='nav_l'>
<div class='menu'><ul>
<b><li class='Inicio'><a alt='Inicio' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li></b>
</ul></div>
<!-- menu -->
<div class='rss'><ul>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Post</a> (RSS)</li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comentarios</a> (RSS)</li>
</ul>
</div>
</div><!-- nav_l -->
</div>
1.- Empezamos creando dos nuevas "variables" que utilizaremos más adelante para dar color al texto de los menús y al fondo, así desde la pestaña "Fuentes y colores" podremos modificar su color. Se colocan debajo de las demás "variables":
<Variable name="colormenu" description="Menu Color"
type="color" default="#FFFFFF" value="#ffffff">
<Variable name="colorbgmenu" description="Menu bg Color"
type="color" default="#FFFFFF" value="#B10245">
2.- Diseñamos la barra adaptándola a la configuración de nuesto blog y al lugar en que queremos situarla (todo el ancho del blog (body) o sólo en la parte principal del blog (main); yo optaré por esta segunda opción. Estos parámetros podemos colocarlos en cualquier lugar del código HTLM entre <head> y <:/head>, así que lo pondremos después de "description":
/*-- (Menú) --*/
#nav {
clear:both;
margin:1px auto 1px auto;
width: 966px;
height:30px;
background: url(http://xosse.dorrio.googlepages.com/fnd_marc_prev2.GIF) repeat-x;
overflow:hidden;
}
#nav_l {
float:left;
width:966px;
margin:0px; padding:0px;
overflow:hidden;
height:30px;
}
.menu {
float:left;
margin:5px 1px;
padding:3px;
width: 400px;
}
.menu li {
display: inline;
list-style: none;
margin:0;
padding:0;
}
.menu ul, .menu ol {
display: inline;
list-style: none;
margin:0;
padding:0 10px 0 0;
}
.menu a, .menu a:visited {
color: $colormenu;
font-weight: bold;
margin:0;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.menu a:hover {
background: $colorbgmenu;
text-decoration: none;
font-weight: bold;
border:1px solid #fff;
}
#subscribe {
float: right;
width:192px;
height:32px;
margin:4px 4px 3px 4px;
}
.rss {
float:left;
margin:7px 5px 5px 0px;
width:500px;
}
.rss ul {
margin: 0; padding: 0 2px;
}
.rss li {
background: url(http://bp2.blogger.com/_Zuzii37VUO4/R2iVYyjZEeI/AAAAAAAACew/
TXSgAsWEBLA/s1600/rss.gif) no-repeat 0 3px;
margin: 0 2px 0 0;
padding: 3px 0 3px 20px;
list-style: none;
font-size: 12px;
color:$colormenu;
display: inline;
font-weight: bold;
}
.rss li a {
font-size: 12px;
color:~$colormenu;
}
En negrilla van algunos de los parámetros quepodeis modificar a vuestro gusto (todos son modificables pero estos prsentan menos problemas)
3.- Para finalizar introduciremos el siguiente código en el blog y lo haremos en algún lugar entre <body> y </body>. Si queremos que ocupe todo el cuerpo lo pondremos al inicio; para que ocupe sólo la parte principal lo haremos en 'main'. Como mi barra irá debajo del título, expando la "plantilla de artilugios" y pego el código debajo del widget 'title':
<!-- menu -->
<div id='nav'>
<div id='nav_l'>
<div class='menu'><ul>
<b><li class='Inicio'><a alt='Inicio' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li>
<li class='page_item page-item-2'><a href='dirección http://...' title='título de la dirección'>nombre del enlace</a></li></b>
</ul></div>
<!-- menu -->
<div class='rss'><ul>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Post</a> (RSS)</li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comentarios</a> (RSS)</li>
</ul>
</div>
</div><!-- nav_l -->
</div>
Botón para que nos enlacen
Revisando los mensajes que me llegan al correo,vi uno me me dejó pensativa. El mensaje decía que cuáles eran las cosas básicas que debía de tener un blog y cómo podía hacerlas.
Bien, hay varios elementos básicos en un blog...Y para comenzar con uno, vamos a ver cómo hacer un botón para que enlacen nuestro blog.
Para hacerlo, debemos de tener lista una imagen pequeña; generalmente es una imagen en pequeño de la cabecera del blog, como por ejemplo, la imagen que uso como botón de enlace:
Vieron que aún no tiene enlace?...Pues vamos a crearle uno.
Para nuestro botón, necesitaremos tener la URL del mismo, para lo cuál tendremos que subirlo a nuestro hosting favorito (Imageshack, Photobucket,etc). Una vez que "subamos" la imagen, tendremos la URL de la misma, y estaremos en condición de crear el enlace.
Para hacer ésto, copiaremos el siguiente código:
♠ Para que el enlace se abra en una ventana emergente:
♠ Para que el enlace de tu blog se abra en la misma página:
Y un ejemplo de enlace que se abre en ventana emergente:
Si pasan el cursor sobre el botón, se verá el nombre del blog.
Como vieron es super sencillo, ahora falta hacer una caja para que otras personas puedan copiar el código y tener un enlace a su blog...Pero eso lo veremos más adlante...Mientras, vayan trabajando con la imagen de enlace.
Bien, hay varios elementos básicos en un blog...Y para comenzar con uno, vamos a ver cómo hacer un botón para que enlacen nuestro blog.
Para hacerlo, debemos de tener lista una imagen pequeña; generalmente es una imagen en pequeño de la cabecera del blog, como por ejemplo, la imagen que uso como botón de enlace:
Vieron que aún no tiene enlace?...Pues vamos a crearle uno.
Para nuestro botón, necesitaremos tener la URL del mismo, para lo cuál tendremos que subirlo a nuestro hosting favorito (Imageshack, Photobucket,etc). Una vez que "subamos" la imagen, tendremos la URL de la misma, y estaremos en condición de crear el enlace.
Para hacer ésto, copiaremos el siguiente código:
♠ Para que el enlace se abra en una ventana emergente:
<a href="http://TUBLOG.blogspot.com/" target="_blank"><acronym title="NOMBRE DEL ENLACE AL PASAR EL CURSOR"> <img src="LA URL DE LA IMAGEN DE ENLACE"/></acronym></a>
♠ Para que el enlace de tu blog se abra en la misma página:
<a href="http://TUBLOG.blogspot.com/"><acronym title="NOMBRE DEL ENLACE AL PASAR EL CURSOR"> <img src="LA URL DE LA IMAGEN DE ENLACE"/></acronym></a>
Y un ejemplo de enlace que se abre en ventana emergente:
Si pasan el cursor sobre el botón, se verá el nombre del blog.
Como vieron es super sencillo, ahora falta hacer una caja para que otras personas puedan copiar el código y tener un enlace a su blog...Pero eso lo veremos más adlante...Mientras, vayan trabajando con la imagen de enlace.
viernes, 17 de octubre de 2008
Letra capital con fondo y borde
Ahora vamos a ver cómo añadir letra capital, pero con estilo, a los textos del post.
Para ello, usamos el siguiente código:
<!-- the drop cap -->
<span style="margin-right:6px;margin-top:5px;float:left;color:blue;background:green;border:1px solid darkblue;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family:times;">LETRACAPITAL</span>TEXTO JUNTO A LA LETRA CAPITAL<div style="clear:both;"><br></div>
Ahora vamos con la explicación:
♠ color:blue es el color de la letra capital; para cambiarlo, colocamos en lugar de blue el nombre de otro color (red, green,etc.) en inglés.
♠ background:green es el color de fondo de la letra capital.
♠ border:1px solid darkblue nos permite modificar el grosor del borde (modificar 1px), el estilo (cambiar solid por otro tipo de líneas)y el color del borde (sustituir darkblue por el color de nuestro gusto).
♠ font-family:times; nos da la posibilidad de escoger la fuente del texto (por ejemplo, la letra del comienzo de esta entrada).
♠ LETRACAPITAL aquí ponemos la primera letra del texto que vamos a escribir .
♠ TEXTO JUNTO A LA LETRA CAPITAL es el texto que sigue a la letra capital.
Y ahora un ejemplillo más:
El protagonista, Jean Valjean, un hombre que recién acaba de salir de prisión, busca refugio y alimento. Sin embargo, nadie quiere acogerlo por haber sido un ladrón. Después de haber tocado muchas puertas, toca la puerta de un sacerdote que lo acoge: le da de comer y permite que pase la noche en su casa.Valjean se levanta y coge unos cubiertos de plata. Está a punto de irse, cuando ingresa el sacerdote. Valjean lo golpea y se va.Al día siguiente, unos oficiales llevan a Valjean a la casa del sacerdote, porque no le creen que, según Valjean, el sacerdote le haya regalado los cubiertos.
Se ve muy bien,verdad?
Idea: ahora que ya sabemos cómo hacer una letra capital en los post de nuestro blog, podemos usarlo junto con el HTML de dos columnas (ver Texto del post en dos columnas)
martes, 14 de octubre de 2008
Texto con sombra (otra forma)
Hace unas semanas, les mostré una forma de hacer que nuestros textos tuvieran sombra y volumen (ver post Texto con sombra y volumen); ahora vamos a ver otra forma de lograr este interesante efecto,pero que nos permite poder cambiar el color de la sombra.
Para ello, copiamos este código:
Y ahora, una explicación:
♠ width: es el ancho del texto; height:,el alto
♠ filter:shadow(color=#00FFFF) es el color de la sombra del texto, en hexadecimales.
♠ font color=#CC0000 es el color de las letras, también en hexadecimales.
Y un ejemplo.
Diversas & Variadas
Sencillo, verdad?
ACTUALIZACIÓN (27/10/2008): según he visto, el efecto no se ve en Firefox, pero sí puede visualizarse perfectamente en Internet Explorer.
Para ello, copiamos este código:
<div id="sombra" style="position:relative;width:300;
height:50r;filter:shadow(color=#00FFFF)">
<br> <font color=#CC0000 size=5>TEXTO<
br> </div> <br>
</font></br>
Y ahora, una explicación:
♠ width: es el ancho del texto; height:,el alto
♠ filter:shadow(color=#00FFFF) es el color de la sombra del texto, en hexadecimales.
♠ font color=#CC0000 es el color de las letras, también en hexadecimales.
Y un ejemplo.
Diversas & Variadas
Sencillo, verdad?
ACTUALIZACIÓN (27/10/2008): según he visto, el efecto no se ve en Firefox, pero sí puede visualizarse perfectamente en Internet Explorer.
viernes, 10 de octubre de 2008
Últimos comentarios (forma sencilla)
Me preguntaban al correo por la forma más sencilla de agregar en la sidebar una lista de últimos comentarios; si bien hay otras formas (que veremos más adelante) hoy veremos la forma más sencilla...Empecemos.
♠ Vamos a Diseño/ Elementos de la página/ Añadir un gadget y elegimos Feed
♠ Agregamos lo siguiente:
http://ELNOMBREDETUBLOG.blogspot.com/feeds/comments/default y damos click en Continuar.
♠ Aparecerá un cuadro de diálogo donde podremos elegir el número de comentarios a mostrar, si queremos que sean visibles las fechas de los mismos y sus autores. Cuando terminemos de configurarlo, damos click en Guardar y listo!!! Ya tendremos en la sidebar una lista con los últimos comentarios.
Nota: Actualmente Blogger nos permite sólo mostrar de uno a cinco comentarios; pero no os preocupeis, que más adelante veremos otra forma (aunque algo más compleja) para mostrar más últimos comentarios.
♠ Vamos a Diseño/ Elementos de la página/ Añadir un gadget y elegimos Feed
♠ Agregamos lo siguiente:
http://ELNOMBREDETUBLOG.blogspot.com/feeds/comments/default y damos click en Continuar.
♠ Aparecerá un cuadro de diálogo donde podremos elegir el número de comentarios a mostrar, si queremos que sean visibles las fechas de los mismos y sus autores. Cuando terminemos de configurarlo, damos click en Guardar y listo!!! Ya tendremos en la sidebar una lista con los últimos comentarios.
Nota: Actualmente Blogger nos permite sólo mostrar de uno a cinco comentarios; pero no os preocupeis, que más adelante veremos otra forma (aunque algo más compleja) para mostrar más últimos comentarios.
martes, 7 de octubre de 2008
Relojes para nuestro blog
Me llegó un mensaje al correo donde me pedían que de alunas páginas que ofrezcan relojes para nuestro blog...Estuve buscando y encontré éstas:
♠ ClockLink que nos ofrece una infinidad de modelos y están clasificados por temas.
♠ Relatime
♠ Relojes Flash
♠ The World Wide Clock
♠ Toolshell Flash Clocks
Hay muchas webs que nos ofrecen relojes, pero escogí éstas porque las he probado y sé que son de confianza...Luego que escojamos el modelo que querramos, copiamos el código como nuevo elemento en la sidebar y listo!!!
Y aquí, unos relojes que me gustaron mucho...
♠ ClockLink que nos ofrece una infinidad de modelos y están clasificados por temas.
♠ Relatime
♠ Relojes Flash
♠ The World Wide Clock
♠ Toolshell Flash Clocks
Hay muchas webs que nos ofrecen relojes, pero escogí éstas porque las he probado y sé que son de confianza...Luego que escojamos el modelo que querramos, copiamos el código como nuevo elemento en la sidebar y listo!!!
Y aquí, unos relojes que me gustaron mucho...
viernes, 3 de octubre de 2008
Picture2Life: efectos en las imágenes
Picture2Life es una herramienta novedosa que nos permite modificar en cuestión de segundos la imagen que deseemos; nos ofrece muchos efectos y posibilidades para transformar una misma imagen en imágenes diferentes con solo subir la imagen de nuestra PC o la dirección URL de la imagen...Y si queremos podemos crear una cuenta...Una imagen...
...puede ser vista de mil formas; aquí algunas maneras en que esta herramienta nos permite tranformarla:
Suscribirse a:
Entradas (Atom)