0

Últimas entradas

Me lo preguntaban esta misma tarde y es una de esas cosas que da la sensación haberla posteado anteriormente, pero no lo he encontrado así que ahí va.
Es la forma de añadir las últimas entradas del blog. Nos dirigimos a la plantilla de diseño, añadimos un elemento de página y clicamos en feed.
Donde URL del feed añadimos lo siguiente:


http://url-del-blog.blogspot.com/feeds/posts/full



Luego escogemos el número de entradas, máximo 5.
Marcamos si deseamos que aparezca la fecha del elemento, también podemos optar por añadir el autor o fuente del elemento.

Guardamos los cambios y arrastramos la etiqueta hasta el lugar de nuestra sidebar donde situaremos las últimas entradas.


Suerte amigo de Málaga :)

0

Buscador de iconos IconLook

IconLook

IconLook es otro buscador de iconos que con solo introducir la palabra que mejor defina al icono que queramos encontrar, nos devolverá múltiples resultados en forma de agradables iconos.

Incluso tendremos la opción de definir nuestra búsqueda por el tamaño de los iconos que queremos localizar (12x12, 16x16, 22x22, 32x32, 48x48, 64x64, y 128x128).

Por descontado, mejor hacer nuestras búsquedas en inglés, aunque también encuentra algún icono al usar referencias en castellano, en general el resultado óptimo es usando el inglés.

Me ha sorprendido gratamente el resultado de las búsquedas que he puesto, ya que he visto bastantes iconos que no proporcionan otros buscadores online.

Enlace:IconLook / Via:Xyberneticos

0

Layout for All

Layout for All o lo que es lo mismo "Diseño para Todos" es una página donde su autor Abdul Munir pone a nuestra disposición maravillosos diseños de plantillas para Blogger.




La descarga es gratuita y los usuarios de plantillas clásicas están de suerte porque también dispone de dos elegantes plantillas para Blogger clásico (HTML).

0

Nuevos elementos en el header

Hace tiempo averiguábamos como añadir nuevos elementos de página a nuestra plantilla, más tarde J.Miur daba buena cuenta de las posibilidades del header de Blogger, y visitando a Rosa descubrimos como añadir nuevos elementos en una misma línea y de forma independiente esta vez en el footer.
Un ejemplo es el blog de Pizcos añadiendo en el footer widgets que normalmente añadimos en la sidebar, esta última por ejemplo es una muestra más de lo que se puede conseguir con imaginación y buen gusto.

Y siguiendo con nuestro afán de conseguir añadir nuevos elementos vamos a hacerlo esta vez en lo que llamamos encabezado del blog, después del logo o header.

Para conseguirlo nos debemos situar en nuestra plantilla Edicción de HTML y localizar :
<div id='header-wrapper'> a continuación encontraremos algo así:

<div id='header-wrapper'>   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  <b:widget id='Header1' locked='true' title='Aquí pondrá el título (cabecera)' type='Header'/>  </b:section>  </div>

Justo después añadiremos lo siguiente:
<div id='header-bloque-conten'><div id='header2' style='width: 30%; float: left; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque1' preferred='yes' style='float:left;'></b:section></div><div id='header3' style='width: 40%; float: left; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque2' preferred='yes' style='float:left;'></b:section></div><div id='header4' style='width: 30%; float: right; margin:5; text-align: center;'><b:section class='header-bloque' id='bloque3' preferred='yes' style='float:left;'></b:section></div><div style='clear:both;'/><div id='header-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'><b:section class='header' id='bloque-bottom' preferred='yes'/></div><div style='clear:both;'/></div>

Una vez añadimos el anterior código nos situamos antes de ]]></b:skin> y añadimos unas líneas de código para personalizar el espacio donde irán nuestros nuevos elementos de página.

#header-bloque-conten{
clear:both;
}

.header-bloque {
margin: 5 auto;
padding: 10px;
text-align: center;
background: #000000;
border:1px solid #288cf0;
}

Donde padding: 10px; es el espacio para separar las columnas que podemos modificar visualizando en vista previa.
margin: 5 auto; es el espacio que dejamos en la parte superior.
En text-align: center; situamos el texto centrado, si deseamos que aparezca a la izquierda sustituimos center por left, y por right si es a la derecha.
Para cambiar el color de fondo lo haremos en background: #000000;
El tipo de borde, grosor y color en border:1px solid #288cf0;

Por último sólo nos queda guardar los cambios, en la plantilla de diseño podremos ver tres elementos independientes en línea horizontal, y en vista previa comprobaremos el siguiente efecto:





Podemos incluir un nuevo elemento añadiendo:

<div id='header5' style='width: 30%; float: right; margin:5; text-align: center;'>
<b:section class='header-bloque' id='bloque4' preferred='yes' style='float:left;'>
</b:section>
</div>


Modificando los valores style='width: 30%; de cada uno de los elementos de forma que la suma de todos no sea superior a 100%

0

Ya estoy aquí









A lo largo de esta semana seguiré fuera de casa, eso quiere decir que no dispongo de mi ordenador pero tengo a mi disposición el que uso en estos momentos. Mientras el dueño no diga lo contrario aquí estaré.

0

Publicado por.. y otros datos a debajo del título

Normalmente el "Publicado por" la hora de publicación de la entrada los "comentarios" y las etiquetas, se muestran debajo de cada entrada.
He recibido un email de salytre donde me pide si puedo explicar como mover estos datos del "post-footer" (pie de entradas) para hacer que se muestren debajo del título de cada entrada...

[1] Nos situamos en nuestro panel de Blogger "edición html" y expandimos los artilugios para localizar esta línea de código ya que será justo debajo de esa línea a donde tendremos que trasladar los códigos para mostrar los elementos del post-footer debajo de los títulos de las entradas:

<div class='post-header-line-1'>


[2] Localizamos ahora el código que corresponde al "Publicado por":
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Lo copiamos, borramos el original y pegamos el que acabamos de copiar, debajo de la línea que localizamos antes:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Mover la hora de publicación a continuación del "Publicado por"

[1] Vamos a colocar ahora la hora de publicación de la entrada a continuación del autor que ya habíamos movido antes a debajo del título, para ello tenemos que localizar el código que corresponde a la hora:
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

Y colocarlo a continuación del código para el "Publicado por" que acabamos de mover:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

Mover "comentarios" a debajo del "Publicado por" y la hora del post

[1] Moveremos ahora el enlace de "comentarios" desde el pie de la entrada a debajo del título, a continuación de lo que hemos colocado antes.
Seguimos con los artilugios expandidos y localizamos el código que corresponde al enlace para dejar comentarios:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Lo colocamos a continuación del "Publicado por" y la hora de la entrada, que habíamos cambiado de lugar previamente:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Mover las etiquetas

[1] Los pasos a seguir son idénticos a los anteriores; localizamos el código que muestra las etiquetas debajo de cada entrada:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Lo copiamos, borramos el original y pegamos la copia debajo de los anteriores:
<div class='post-header-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>


Nota: Si queremos que las etiquetas o los comentarios se muestren en una segunda línea, en lugar de a continuación de los otros elementos, incluiremos su código entre <br> y </br>.
Por ejemplo las etiquetas:

<br><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span></br>

Resultado:
Ejemplo de elementos debajo del titulo

0

Plantilla Twitter

Una plantilla preciosa de Gosu Blogger para los amantes de Twitter y los que no también.biggrin

Imita la interfaz de la web de Twitter a la perfección...

Twitter

Demo de la plantilla / Descarga

Entrada original: Gosu Blogger

0

Regreso enseguida...

Estaré ausente tres o cuatro días,
a mi regreso contestaré los comentarios que fueron llegando.
Lamento no poder hacerlo antes.

Hasta pronto.

0

Elementos adicionales en "Diseño" de la plantilla

Muchas veces nos encontramos que a la hora de añadir un nuevo widget o elemento debajo de la cabecera o sobre las entradas, por ejemplo, nuestra plantilla no lo admite.
Cuando elegimos una plantilla en Blogger, normalmente en la parte de "Diseño" veremos algo como esto:

Ejemplo diseño

Podemos obtener la posibilidad de añadir más widget a nuestra plantilla con una ligera modificación en su código, para ello nos situaremos en la parte de "Edición html" y localizaremos una línea especifica de código, dependiendo de la zona donde queramos añadir más elementos, no hará falta expandir artilugios:

Añadir más elementos en el header (cabecera)

Localizamos esta línea de código:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

La sustituimos por esta otra:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Fijaros que maxwidgets indica el número de elementos que vamos a añadir en esa zona, yo he puesto 2 pero pueden ponerse los que necesitemos.

En showaddelement hay dos posibilidades "yes" o "no", si ponemos "no" el hueco para el elemento no será visible, en cambio si ponemos "yes" el hueco se mostrará (es el cajetín con bordes punteados que pone "Añadir un elemento de página" o en el caso de Blogger in Draft "Añadir un gadget").

Añadir más elementos en la sección de entradas (main)

Localizamos la línea de código correspondiente al main:
<b:section class='main' id='main' showaddelement='no'>

La sustituimos por esta otra:
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>

De esta manera podremos añadir nuevos elementos tanto debajo, como encima del "cuerpo de entradas".

Añadir más elementos en la sección del footer

Localizaremos la línea correspondiente a esta sección:
<b:section class='footer' id='footer'/>

La sustituimos por esta otra:
<b:section class='footer' id='footer' maxwidgets='3' showaddelement='yes'/>


Mas elementos
Añadir más elementos en la sección del "crosscol"

Esta es una zona que no todas las plantillas de Blogger tienen por defecto, pero en las que se incluye podría usarse para añadir un menú, por ejemplo. Está situado entre el header (cabecera) y la zona de entradas y sidebar, normalmente la línea que lo controla tendrá este aspecto, por lo que no veremos ahí la posibilidad de añadir elementos :
<b:section class='crosscol' id='crosscol' showaddelement='no'>

La sustituimos por esta otra:
<b:section class='crosscol' id='crosscol' maxwidgets='2' showaddelement='yes'/>


Elementos en el crosscol



0

Myoats creando figuras tipo mándalas on line



Si te gustan las imágenes de tipo Mándala o la de los caleidoscopios, seguro que entonces te gustará Myoats.

Myoats es de esas aplicaciones tan sencillas como adictivas, en el que se nos facilitan un circulo desde donde dibujaremos objetos en su interior, replicándose en cada una de las caras que conforman nuestra figura. Disponemos de una serie de pestañas en las que podemos configurar una serie de parámetros, que van desde las opciones globales de configuración, como el color de fondo, opciones de visualización o el número de caras de nuestra figura, hasta las opciones de configuración del pincel que usaremos.

Finalizado nuestro diseño, disponemos de varias opciones de descargas, desde la descarga como fondo de escritorio hasta la descarga de nuestra figura en alta definición. Igualmente podemos guardar nuestro diseño, para lo que deberemos de disponer de cuenta, que podemos crear en segundos, pudiendo establecer su acceso como público o privado.

Y ya aquí, como en toda herramienta web 2.0 que se precie, podemos añadir los diseños de los demás como favoritos, comentarlos e incluso votarlos. Además, nos permite acceder a los perfiles de los demás usuarios, donde veremos sus diseños, los diseños que votaron y los diseños que tengan como favoritos.

También nos permite realizar búsquedas avanzadas que nos permitan acceder los diseños de los demás según nuestros criterios.


"Y como todo lo pruebo antes de dar salida a un post estas imágenes son una muestra de ello, pero acceded a la página que veáis las maravillas que se pueden conseguir"

Fuente y texto : Genbeta


0

Editores de imagen

Los editores de imagen no sólo nos pueden sacar de apuros en más de una ocasión sino que su uso es casi obligatorio para aquellos que mantenemos un blog.
Aquí no vale eso de "No sé como se utiliza" todo es ponerse, familiarizarse, probar una y otra vez. Al principio seguramente nos saldrá "algo" pero luego ese algo nos gustará tanto que a la más mínima oportunidad lo colgaremos en nuestro blog.
En Cosas Sencillas Toni nos proporciona un listado con 20 editores de fotos gratuitos en línea como a mi me gustan, de esos que no hace falta descargar y llenar el PC de cosas que con el tiempo olvidamos.
Algunos de los que menciona Toni han sido comentados en este blog y con seguridad que hablaremos de algunos más. Sírvanse ustedes mismos.


Ajax

Java

Y otros que yo añado..


0

Recuperar el lapiz de edicion y el sobre de enviar entradas

Hace tiempo que en algunas plantillas de Blogger han desparecido las imágenes del lápiz para editar las entradas directamente y del sobrecito de enviar entradas por correo electrónico. iconos Blogger
Como ya digo, esto no sucede en todas las plantillas y en las que sucede puede ser que falten los dos iconos o solamente uno de ellos.

Hace tiempo que desde Vagabundia, JMiur nos aportaba una solución para este problema, solución que por cierto, llevo tiempo usando en mi blog para poder mostrar el sobrecito en cuestión.
Hoy he decidido publicarla en El Escaparate, porque no se si es casualidad, o que Blogger vuelve a tener problemas con estos iconos, pero llevo dos días recibiendo correos sobre el tema...

[1] Si lo que necesitamos es recuperar el lápiz de edición de entradas, colocaremos este código justo antes de </head>:

<style type='text/css'>
.quick-edit-icon { /* makes an 18x18 box */
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgP82E4dBcoLxCyjE4X0PqHUdK_TeJDe4t2HvG-6t2o8lobkQUJkHDmO7cexFoZc0GJwmcRSdJEL39__Eyb4aKr8HTVROQ4jxoSJytpoliZtFCbYXgunccdoZH_OXzsV1UwJ2HB5z5IVAY/s320-r/icon18_edit_allbkg.gif) no-repeat left center;
padding: 9px;
margin: 0;
}
</style>

[2] Para recuperar el sobrecito de enviar entradas por correo el código que tendremos que colocar en el mismo lugar, será este:
<style type='text/css'>
.email-post-icon { /* makes an 18x18 box */
background: transparent url(http://img177.imageshack.us/img177/9973/icon18emailxj4.gif) no-repeat left center;
padding: 9px;
margin: 0;
}
</style>

[3] Si son los dos iconos los que vamos a recuperar, colocaremos el código en el mismo lugar así:
<style type='text/css'>
.email-post-icon { /* makes an 18x18 box */
background: transparent url(http://img177.imageshack.us/img177/9973/icon18emailxj4.gif) no-repeat left center;
padding: 9px;
margin: 0;
}
.quick-edit-icon { /* makes an 18x18 box */
background: transparent url(http://img170.imageshack.us/img170/6149/icon18editallbkgph9.gif) no-repeat left center;
padding: 9px;
margin: 0;
}
</style>

Más información en Vagabundia.


Actualización:

Parece ser que debido a nuevos cambios en el código de las plantillas de Blogger, esta forma de recuperar el lápiz de edición y el sobre de enviar entradas, no está dando resultados en algunas plantillas, así que habría que cambiar el antiguo código por el nuevo:

[1] Localizamos el código que corresponde al lápiz de edición antiguo:

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'>&#160;</span>
</a>
</span>
</b:if>
</b:includable>

Y tendremos que cambiarlo por este otro:

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>


[2] Localizamos ahora el antiguo código del sobre de "enviar entradas":

<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

<span class='email-post-icon'>&#160;</span>
</a>
</span>

Y cambiamos el código por el nuevo:

<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>

0

Me ha gustado...





De un realismo impresionante. Pulsa sobre la panorámica que deseas ver, para pantalla completa en el cuadrito de la derecha, con las flechas puedes acercar y alejar la imagen y disfrutar del sonido en el altavoz.



Gracias por tus siempre bonitas aportaciones César

0

Programación Web.net - Utilidades de programación



En la anterior entrada hablaba sobre GIMP, curiosamente he descubierto una página que nos proporciona un curso sobre este programa de manipulación de imágenes.
Supuestamente la información no sería de gran interés pero si la cantidad de herramientas, información y utilidades que podemos encontrar en esta página, sobretodo para los que desean ir más allá de subir una imagen o decorar el blog.
La página es Programación Web.net en ella tenemos la posibilidad de realizar varios cursos, algunos muy interesantes.

Curso de HTML
HTML es un lenguaje de marcas usado para la creación de páginas web de hipertexto. Su história empieza en 1993 y su evolución ha sido incesante hasta la actualidad...

Curso de SEO
Search Engine Optimization es cualquier técnica o persona utilizada para mejorar la posición de una determinada página web en los resultados de las búsquedas en los buscadores de Internet...

Curso de Swish Max
Swish Max es un programa pensado para hacer animaciones Flash de manera sencilla y más fácil de usar que Macromedia Flash Player. En este curso aprenderemos a utilizarlo para crear vistosas animac...

Herramientas para analizar páginas
Ingresando la url del blog nos proporciona información sobre el servidor, dirección, puerto, tecnologías, velocidad de descarga, nombre, país, el contenido y la estructura. html, xml, css, javascript, enlaces, palabras clave, relevancia..

Test de velocidad de descarga
Nos informa de los datos enviados y recibidos por segundo.

Noticias, descargas, foros, y algo muy poco usual una bolsa de empleo. No sé si es porque me ha gustado lo que he visto pero pienso que es una Web donde cualquiera puede hacer sus pinitos como programador.
Al menos... información no falta.


0

Fondo transparente en las imágenes con GIMP


Llevaba tiempo buscando un editor de imágenes online con la herramienta necesaria para convertir el fondo de las imágenes en transparente, todo lo que encontraba eran programas para descargar, y de prueba durante unos días.
Al enterarse Patán tuvo la gentileza de añadir a su blog la descarga de Adobe Photoshop, todo hay que decirlo está genial pero necesito tiempo para practicar un poco.

Pizcos también hacía referencia a GIMP para usarlo en la creación de logos incluso me indicó el camino más rápido para conseguir la transparencia.

Más tarde, visitando a Rosa mi sonrisa fue de oreja a oreja porque precisamente hablaba de GIMP . Rosa proporciona en su blog el enlace para la descarga de GIMP.
Yo añado otro enlace de la página oficial podéis usar cualquiera de ellos.

Una vez lo tenemos instalado abrimos GIMP y buscamos la imagen en nuestro PC.

Localizamos la imagen en nuestro PC


Clicamos en la barra la opción COLORES y en el desplegable COLOR A ALPHA

Inmediatamente nuestra imagen muestra un fondo con cuadrícula que equivale al fondo transparente.


Ya sólo nos queda guardar la imagen y alojarla en nuestro blog o servidor.




La diferencia entre una imagen de fondo transparente y una con fondo de color salta a la vista, sobre todo si la añadimos sobre un fondo de color distinto al de la imagen.

0

Enlaces en forma de nube

Nube de enlaces


Hace unos días he colocado los enlaces "Imprescindibles" de mi menú en forma de Nube. Como podéis comprobar, tienen el mismo aspecto que solemos ver las nubes de etiquetas.
Hacerlo es bastante sencillo solo necesitamos un poco de CSS y algo de "trabajo manual" para colocar nuestros enlaces en un elemento HTML.



[1] Añadimos este código en el CSS de nuestra plantilla, antes de ]]></b:skin>:

/* Nube de enlaces-------*/
#tagcloud{
text-align:center;
padding:5px;
}
#tagcloud .tag1{ font-size:0.9em; color:#da080c;}
#tagcloud .tag2{ font-size:1.2em; color:#7c9fbd;}
#tagcloud .tag3{ font-size:1.4em; color:#a6c4e1;}
#tagcloud .tag4{ font-size:1.3em; color:#0fd580;}
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }

En text-aling elegiremos la posición del texto de los enlaces dentro del elemento: center=centrados, left=izquierda, right=derecha y en padding colocamos la distancia que queremos desde los lados de nuestra nube al borde del elemento donde la hemos colocado.

He añadido en el código cuatro tipos de tags distintos, por color y tamaño de fuente. En font-size podéis cambiar el tamaño de cada tag (ese es el tamaño que tendrá el enlace) y en color es donde podéis escoger el color del texto de cada enlace.

[2] Guardamos los cambios y en la parte de "Diseño" añadimos un nuevo elemento HTML y pegamos este código dentro:
<div id="tagcloud">
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag3">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag2">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag3">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag1">Texto_del_enlace</a>
<a href="Url_del_enlace" class="tag4">Texto_del_enlace</a>
</div>

Ahí podéis añadir tantos enlaces como querías mostrar en la nube.
Fijaros que la clase (class=) es lo que hace que cada enlace tenga las propiedades que le hemos puesto antes en el CSS.

0

Personalizar borde en imágenes

Suprimir los bordes o líneas que por defecto rodean las imágenes es algo que tenemos costumbre hacer, bien para personalizar el blog o porque no termina de convencernos una imagen enmarcada. Personalmente me gustan las imágenes enmarcadas, utilizo un editor de imágenes pero también podemos hacerlo añadiendo unas líneas en nuestra plantilla.
Eso contesta la pregunta que me hizo un anónimo.

En nuestra plantilla Edición de HTML podemos encontrar las siguientes líneas de código:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

Es el lugar donde nos indica las propiedades de las imágenes añadidas en las entradas.
Desde Fuentes y colores podemos cambiar el color del borde, pero eso hace cambiar no sólo el color de en marco de las imágenes sino de todo el blog.
Para modificar el aspecto del borde que rodea nuestras imágenes sustituimos $bordercolor por el color escogido, por ejemplo #940f04 también vamos a darle un toque diferente sustituyendo solid por outset y aumentando el valor 1 a 4.

.post img {
padding:4px;
border:4px outset #940f04 ;
}

De esta forma cambiamos el borde únicamente de las imágenes añadidas en las entradas. El espacio de separación entre borde e imagen los disminuimos o aumentamos en padding.




Para facilitar la tarea de escoger un modelo de borde puedes ver aquí los efectos.

0

Smash up Graphics - Generador de texto





Smash up Graphics
es una página donde podemos crear botones, menús, backgrounds y texto con diferentes efectos. El resultado de uno de ellos muy similar a My Live Signature con la particularidad que podemos escoger color de fondo y añadirlo a nuestro blog si temor a mostrar un antistético fondo blanco.







Espero te sea útil Valenciano