0

Ultimas entradas de tus blogs favoritos

Es posible colocar en nuestra sidebar un widget con las últimas cinco entradas de nuestros blogs favoritos, usando para ello el elemento "Feed" de Blogger. Podemos además añadir una imagen que identifique a cada blog usando, por ejemplo su favicón si lo tiene, y darle así un aspecto más original.

Feed
[1] Accedemos al blog del que queremos mostrar las entradas y pincharemos en su icono de feed, una vez que se abra la página para agregar su feed, copiamos la url que nos permitirá agregarlo.

[2] En nuestra plantilla, en la parte de "añadir elementos" escogemos añadir un nuevo elemento "Feed" y pegamos la url que hemos obtenido del blog. Si todo está correcto, Blogger identificará la url del feed y mostrará las últimas cinco entradas del blog, añadiendo de forma automática el título del blog elegido al nuevo elemento.

[3] Una vez añadido el elemento en nuestra sidebar, vamos al código de nuestra plantilla y sin expandir artilugios localizamos la línea de código que identifica al elemento, que será algo como esto:

<b:widget id='Feed1' locked='false' title='ReCurS.O.S para tu Blog By Ferípula' type='Feed'/>

Lo que nos interesa de está línea una vez localizada, es su id, que en este caso es Feed1

[4] Subiremos ahora hacia arriba, en la parte de CSS de nuestra plantilla, por ejemplo, antes de ]]></b:skin> añadimos el código necesario para modificar el aspecto del nuevo widget:
#Feed1 h2{
background:#ddd url(http://img504.imageshack.us/img504/2766/faviconqk7.jpg) center left no-repeat;
padding-left: 25px;
color:#000;
}
#Feed1{
background:#fff;
border:1px solid #000;
padding:5px;
}

[5] Es en este código donde hacemos los cambios que consideremos oportunos. La url de la imagen la cambiamos por la de la imagen del blog elegido, lo más fácil es usar su favicón si lo tiene.
En el caso de Ferípula (el de este ejemplo) no tiene favicón aplicado en su blog, así que tomé la imagen de su perfil y la reduje usando Favicon From Pics.
Si vamos a usar una imagen de mayor tamaño, tendremos que cambiar el valor en padding-left: 25px;, como mínimo, por el ancho de la imagen colocada.
Con este método podemos ir añadiendo tantos blogs como queramos mostrar, teniendo en cuenta, que cada nuevo elemento tendrá una id diferente: Feed1, Feed2, Feed3...y para cada elemento tendremos que añadir un nuevo código en el CSS con su id correspondiente e incluso podemos darle a cada widget un aspecto diferente, por ejemplo, un color de fondo distinto para cada uno, añadiendo por ejemplo background:#ddd; en el código CSS.

0

Sketchy Paper Icons

Me he encontrado en DryIcons con una colección de iconos que además de bonitos son de los más originales que he visto últimamente.
Su diseño imita una nota con aspecto de papel reciclado.

Icono nota
La colección consta de veinte iconos en distintos tamaños: 16x16, 24x24, 32x32, 48x48, 64x64 y 128x128 pixeles, en formato png.

Se distribuyen bajo licencia Creative Commons License 3,0, lo cual implica que puede hacerse con ellos prácticamente cualquier cosa, por eso el autor solicita que se incluya un link a DryIcons dándole crédito a su trabajo.

Desde este enlace podéis ver todos los iconos en todos los tamaños, antes de descargar el pack.

0

Mensaje animando a suscribirse a tu blog

Un mensaje para mostrar a tus visitas animándoles a suscribirse a tu blog.
Supongo que ya habréis visto el que uso en El Escaparate y que solo es visible cuando accedemos al blog desde alguna de las páginas de archivos o etiquetas.

Mensaje de suscribe
El mensaje puede configurarse fácilmente mediante CSS personalizando su aspecto para conseguir que se adapte a la estética de cada blog, modificando el borde, colores, imagen o no de fondo, etc.

[1] Añadimos el CSS necesario en nuestra plantilla, siempre antes de ]]></b:skin>

.subscribe_cartel {
background: #ffc url(Aquí_la_url_de_la_imagen_de_fondo);
border: 1px solid #a6c4e1;
padding: 5px;
margin: 0 2px;
font-size: 90%;
}
.subscribe_cartel a {
text-decoration: none;
}
.subscribe_cartel a:hover {
text-decoration: underline;
}

Es en este código donde haremos los cambios oportunos para modificar el aspecto del mensaje:

background: #ffc url(Aquí_la_url_de_la_imagen_de_fondo);
Añadiremos la url de la imagen que queremos mostrar en el fondo del mensaje.
Si hemos decidido no usar una imagen y solo vamos a darle un color de fondo, dejaremos así esa línea: background: #ffc; cambiando el código por el del color que vamos a usar: Tabla de colores.

border: 1px solid #a6c4e1;
Aquí controlamos el aspecto del borde de nuestro mensaje.
Si hemos decidido no añadirle ninguna clase de borde, podemos eliminar esta línea o poner el borde en cero (0px) por si más tarde decidimos añadírselo.
Si vamos a usar nuestro mensaje con borde, escogeremos el grosor de dicho borde, modificando el "1px" por el valor que necesitemos. En "solid" conseguiremos el aspecto del borde: solid, dotted, dashed, double, etc. En "#a6c4e1" cambiamos el color del borde.

padding: 5px; margin: 0 2px;
Aquí variamos la distancia de lo que coloquemos dentro de nuestro mensaje a sus bordes "padding" y la distancia de nuestro mensaje al resto de los elementos que lo rodean "margin", lo ideal es que cada uno encuentre los valores que necesite, aunque pueden dejarse como están, al menos para la primera prueba.

font-size: 90%;
El tamaño del texto. Cambiamos el valor del porcentaje por el nuestro, mayor o menor.

Tamaño del mensaje
Si dejamos el código CSS tal como está, el tamaño del mensaje se adaptará al del lugar donde lo coloquemos. Si, por ejemplo, lo situamos en un elemento sobre las entradas, el mensaje ocupará el mismo ancho que estas, si queremos controlar su anchura, añadiremos width:300px;, o el valor que queramos para el ancho, por ejemplo, justo debajo de .subscribe_cartel {.

[2] Una vez tengamos el aspecto del mensaje más o menos decidido, hemos de usar el código HTML necesario donde vamos a mostrar el mensaje (dentro de un nuevo elemento HTML que arrastraremos luego a donde nos interese, por ejemplo, sobre las entradas.)
<div class="subscribe_cartel"><img src="URL_DE_LA_IMAGEN"/> Tu primera visita al Escaparate? <div align="center">Quizás te interese <a href="URL_DE_TU_FEED">subscribirte a mi feed</a> o recibir las<a href="URL_DE_SUSCRIPCION_POR_EMAIL"> actualizaciones por email.</a></div></div>


En "URL_DE_LA_IMAGEN" colocaremos la url de nuestro icono de suscripción.
En "URL_DE_TU_FEED" la url de Feedburner o del servicio que usemos para facilitar la suscripción. Si no usamos ningún servicio externo, colocaremos aquí el de Blogger:
http://Tu_blog.blogspot.com/feeds/posts/default
En "URL_DE_SUSCRICIPCION_POR_EMAIL" la del servicio que usemos para facilitar la suscripción por correo.

[3] Guardamos los cambios en el nuevo elemento y lo arrastramos encima o debajo de nuestras entradas; también podemos dejarlo en la sidebar.
Localizaremos ahora nuestro nuevo elemento dentro del código de la plantilla y haremos los cambios necesarios para que solo sea visible en las páginas de archivos y etiquetas, para ello vamos a necesitar expandir los artilugios y seguir las instrucciones que se explican en esta entrada anterior.

0

Avatares glamurosos

Una bonita colección de cien avatares animados. Todos los avatares tienen la misma medida 100x100 pixeles y estoy segura que a las chicas sobre todo les van a encantar, aunque hay algunos algo "subiditos de tono" que no van a pasar desapercibidos para los chicos.eek

Son ideales para usarlos en la imagen de nuestro perfil del blog o en el perfil de alguno de los foros en los que participamos a menudo.

Algunos ejemplos



Enlace:Dezignus

Descargar desde Deposit
Descargar desde Rapidshare

Nota
Si tenéis problemas con la descarga podéis solicitarme el archivo zip por email.

0

Comprueba online la validez de cualquier email

Solo con introducir la url de la dirección de correo que quieras en la web de Emailvalido podrás comprobar si ese email que tienes hace tiempo de algún contacto sigue siendo operativo o no.



Una vez introducido el email, en segundos obtendremos la verificación:



Emailvalido además ofrece la posibilidad de agregar este servicio a nuestro blog, usando uno de los dos códigos disponibles según el modelo de widget que queramos usar, así nuestras visitas tendrán la posibilidad de usar el servicio de comprobación desde nuestro blog.



Enlace: Emailvalido Vía: Xyberneticos

0

Simple menu con CSS

Un sencillo menú construido mediante CSS y usando solo una imagen.

Ejemplo de menu
[1] Colocamos las líneas de CSS dentro de nuestra plantilla antes de ]]></b:skin>:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(http://img410.imageshack.us/img410/9401/cssnavbm2.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 6em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
}


[2] Añadimos el código necesario para construir los enlaces del menú en un elemento HTML de la plantilla y lo arrastramos sobre las entradas o debajo de la cabecera:
<div id="nav-menu">
<ul>
<li><a href="http://elescaparatederosa.blogspot.com">Inicio</a></li>
<li><a href="mailto:lejaniaimposible@hotmail.com">Contacto</a></li>
<li><a href="http://blogger.com">Blogger</a></li>
</ul>
</div>

[3] En este último código es donde tenéis que colocar vuestros propios datos para construir los enlaces.
En el ejemplo hay solo tres botones, pero pueden añadirse más, duplicando las líneas del código y añadiendo los datos del enlace:
<li><a href="Url_del_enlace">Enlace</a></li>

0

Generador de "nombre de calle"

Un generador online que al introducir el texto que queramos nos lo devuelve imitando una placa o señal con el nombre de una calle o ciudad. Podemos escoger tres tamaños, pequeño, mediano y grande; descargar el resultado directamente a nuestro PC o subirlo desde allí mismo a ImageShack.
El tamaño pequeño queda muy lindo incluso para usarlo como botón de enlace.
Es una pena que no pueda elegirse otro color...



Enlace: EasyStreet