Código Color de una imagen

¿Quieres saber que colores son los que se estan utilizando en alguna imagen para poner texto de igual color?

Con esta herramiente online 

Pictaculous

Tan solo necesitas ir a Pictaculous, en buscar, pones la imagen que quieras y te devuelve una paleta con el Código Color que utiliza la imagen, pudiendo cambiar color a una imagen, para multitud de proyectos que puedas necesitar.

Espero que te ayude en algun proyecto.

Como poner fotos una al lado de otra en un post
Cuando subimos al blog varias imágenes nos las coloca así:

Pero claro, no queremos que esto sea así, las queremos colocar en horizontal, así:

¿Como poner fotos una al lado de otra en un post ?
Bien, para conseguirlo lo que haremos sera lo siguiente :

1. Subiremos las imágenes en vista Redactar
2. Cambiaremos a vista HTML y copiaremos todo el código 

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZrRgHndcofMMFRQbSAKrWrOVyzfBMNMuNf3h47mT_JOdodceKj6V8BoshO9NC7Os3Qhir9-3lZ5ECbUJx9YP5cJC7EuA6bht34YcKxdVx-B8wZBrQ3pUIoOrh_2IVPJVVag4rMUp_Nc/s1600/uno.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZrRgHndcofMMFRQbSAKrWrOVyzfBMNMuNf3h47mT_JOdodceKj6V8BoshO9NC7Os3Qhir9-3lZ5ECbUJx9YP5cJC7EuA6bht34YcKxdVx-B8wZBrQ3pUIoOrh_2IVPJVVag4rMUp_Nc/s1600/uno.jpg" height="200" width="130" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlxaCM6qk1sObEVjd4mMYLd0icrdmrCaCqek7Gw7xkl2MhsSiqa9ncGXLHXE1_zPSGNOT_CVPvIoI7Db0TxLx44VvkRMlD8xoXpyt8PfK1DdQ8oLqLLf6OyK-brOJWBm1hdS0BJJxJd8/s1600/dos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlxaCM6qk1sObEVjd4mMYLd0icrdmrCaCqek7Gw7xkl2MhsSiqa9ncGXLHXE1_zPSGNOT_CVPvIoI7Db0TxLx44VvkRMlD8xoXpyt8PfK1DdQ8oLqLLf6OyK-brOJWBm1hdS0BJJxJd8/s1600/dos.jpg" height="200" width="130" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3mpdcKldUyiWfogO_T9_W7Dp_Totp5Cu-hoA51xuapMQr4aqEBNKqJKxBWgEtt11vVFsywcHdujm7XmEN7J1ULVM4HaUhuWhYltRL9WvpDai9BTnDgsoTr8zy_96feRHMucTVV743yQ/s1600/tres.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3mpdcKldUyiWfogO_T9_W7Dp_Totp5Cu-hoA51xuapMQr4aqEBNKqJKxBWgEtt11vVFsywcHdujm7XmEN7J1ULVM4HaUhuWhYltRL9WvpDai9BTnDgsoTr8zy_96feRHMucTVV743yQ/s1600/tres.jpg" height="200" width="130" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPPD8XulmCvtATCizpndPzyMKUruBAMecbZjWvzN7zl5wG1aq9Ii0PE8VS8xl2yI48fNkusc_trvxrcu2nj_9I7_38h6VoohL6fj-hmtaCnwh4Q-U8Q-yPyhW3HIwFZCZfqnNEvgEwPyo/s1600/cuatro.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPPD8XulmCvtATCizpndPzyMKUruBAMecbZjWvzN7zl5wG1aq9Ii0PE8VS8xl2yI48fNkusc_trvxrcu2nj_9I7_38h6VoohL6fj-hmtaCnwh4Q-U8Q-yPyhW3HIwFZCZfqnNEvgEwPyo/s1600/cuatro.jpg" height="200" width="130" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>

Limpiaremos el código y dejaremos  solo el código de las imágenes entre <a> y </a> y el primer
 <div class="separator" style="clear: both; text-align: center;"> quedando asi:

 <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZrRgHndcofMMFRQbSAKrWrOVyzfBMNMuNf3h47mT_JOdodceKj6V8BoshO9NC7Os3Qhir9-3lZ5ECbUJx9YP5cJC7EuA6bht34YcKxdVx-B8wZBrQ3pUIoOrh_2IVPJVVag4rMUp_Nc/s1600/uno.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZrRgHndcofMMFRQbSAKrWrOVyzfBMNMuNf3h47mT_JOdodceKj6V8BoshO9NC7Os3Qhir9-3lZ5ECbUJx9YP5cJC7EuA6bht34YcKxdVx-B8wZBrQ3pUIoOrh_2IVPJVVag4rMUp_Nc/s1600/uno.jpg" height="200" width="130" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlxaCM6qk1sObEVjd4mMYLd0icrdmrCaCqek7Gw7xkl2MhsSiqa9ncGXLHXE1_zPSGNOT_CVPvIoI7Db0TxLx44VvkRMlD8xoXpyt8PfK1DdQ8oLqLLf6OyK-brOJWBm1hdS0BJJxJd8/s1600/dos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlxaCM6qk1sObEVjd4mMYLd0icrdmrCaCqek7Gw7xkl2MhsSiqa9ncGXLHXE1_zPSGNOT_CVPvIoI7Db0TxLx44VvkRMlD8xoXpyt8PfK1DdQ8oLqLLf6OyK-brOJWBm1hdS0BJJxJd8/s1600/dos.jpg" height="200" width="130" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3mpdcKldUyiWfogO_T9_W7Dp_Totp5Cu-hoA51xuapMQr4aqEBNKqJKxBWgEtt11vVFsywcHdujm7XmEN7J1ULVM4HaUhuWhYltRL9WvpDai9BTnDgsoTr8zy_96feRHMucTVV743yQ/s1600/tres.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3mpdcKldUyiWfogO_T9_W7Dp_Totp5Cu-hoA51xuapMQr4aqEBNKqJKxBWgEtt11vVFsywcHdujm7XmEN7J1ULVM4HaUhuWhYltRL9WvpDai9BTnDgsoTr8zy_96feRHMucTVV743yQ/s1600/tres.jpg" height="200" width="130" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPPD8XulmCvtATCizpndPzyMKUruBAMecbZjWvzN7zl5wG1aq9Ii0PE8VS8xl2yI48fNkusc_trvxrcu2nj_9I7_38h6VoohL6fj-hmtaCnwh4Q-U8Q-yPyhW3HIwFZCZfqnNEvgEwPyo/s1600/cuatro.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPPD8XulmCvtATCizpndPzyMKUruBAMecbZjWvzN7zl5wG1aq9Ii0PE8VS8xl2yI48fNkusc_trvxrcu2nj_9I7_38h6VoohL6fj-hmtaCnwh4Q-U8Q-yPyhW3HIwFZCZfqnNEvgEwPyo/s1600/cuatro.jpg" height="200" width="130" /></a>

Solamente nos quedara tener en cuenta, las medidas de las imágenes para que no sobrepasen la anchura que tenemos para todas ellas.
Espero que lo haya explicado bien para que no tengas ningun problema a la hora de llevarlo a la practica.
¿Te atreves a ejecutarlo?

En este post, Una imagen o icono en todas tus entradas

Aprendimos a  poner fija una imagen como la que ves en esta esquina, en ella se explica como ponerla en el código pero si no quieres tocar la plantilla, vamos el código , lo puedes poner en cualquier entrada simplemente poniendo el código en HTML. Y teniendo la imagen alojada en un servidor, sustituyes LA IMAGEN QUE QUIERAS por la URL de la imagen.

<img src=' LA IMAGEN QUE QUIERAS ' style='float:left;height:80px;margin-bottom:10px;margin-right:10px;margin-top:6px;width:80px;'/><data:post.body/>

En la esquina superior derecha

<img src='LA IMAGEN QUE QUIERAS' style='float:right;height:80px;margin-bottom:10px;margin-left:10px;margin-top:6px;width:80px;'/><data:post.body/>

En la esquina inferior izquierda

Agrega el código a continuación de la etiqueta resaltada en verde:

<data:post.body/><img src='LA IMAGEN QUE QUIERAS' style='float:left;height:80px;margin-bottom:10px;margin-right:10px;margin-top:6px;width:80px;'/>

En la esquina inferior derecha

Sigue el mismo procedimiento citado en el punto anterior pero utiliza esto otro:

<data:post.body/><img src='LA IMAGEN QUE QUIERAS'style='float:right;height:80px;margin-bottom:10px;margin-left:10px;margin-top:6px;width:80px;'/>

Vista previa y si todo esta en orden, guardar

Una nueva herramienta muy útil para un efecto Polaroid que en muchos blogs utilizan para las imágenes. Así que si te gusta su utilización es muy sencilla. Entraremos en este enlace y seguiremos los pasos:

En convertir su imagen:

Seleccionaremos nuestro archivo, añadiremos una descripción a nuestra imagen 

Pondremos los grados que queremos que gire y le daremos a subir imagen.

El enlace resultante solo estará 24 h, así que lo mejor sera guardarlo en nuestro PC.

En agradecimiento nos piden que votemos por el sitio.

Enlace: Instantizer

Para poner una imagen o icono en todas tus entradas, buscaremos la siguiente etiqueta:

<data:post.body/> 

<img src='URL IMAGEN' style='float:left;height:80px;margin-bottom:10px;margin-right:10px;margin-top:6px;width:80px;'/><data:post.body/>

Reemplaza URL IMAGEN por la dirección de la imagen 

Se vera en la esquina superior izquierda del post

Para la esquina superior derecha

<img src='URL IMAGEN' style='float:right;height:80px;margin-bottom:10px;margin-left:10px;margin-top:6px;width:80px;'/><data:post.body/>

Para la esquina inferior izquierda

<data:post.body/><img src='URL IMAGEN' style='float:left;height:80px;margin-bottom:10px;margin-right:10px;margin-top:6px;width:80px;'/>

Para la esquina inferior derecha

<data:post.body/><img src='URL IMAGEN' style='float:right;height:80px;margin-bottom:10px;margin-left:10px;margin-top:6px;width:80px;'/>

En cada uno de los casos tendremos que dar vista previa y si es correcto, Guardaremos cambios.
Si quieres también puedes ver esta entrada en la que se explica como ponerlo simplemente en HTML

Otra página, Lorem pixel, Imágenes de marcador de posición para todos los casos. 

Diseño web o impresión. Es muy sencillo y totalmente gratuito!

Sólo hay que poner la url personalizada en el código como el siguiente:

<img src="http://lorempixel.com/400/200" />para obtener su imagen FPO / maniquí.

La página en cuestión es:

Lorem pixel

Espero que le encontréis utilidad

Otra herramienta interesante a la hora de diseñar nuestro blog, hoy se trata de una herramienta online.

Se trata de redondear las esquinas de nuestras imágenes, el procedimiento es muy sencillo.

Tan solo iremos a la direccion http://www.roundpic.com/ le daremos a examinar, elegimos la imagen y ya en las opciones seleccionamos lo que mas nos guste. 

Cuando lo tengamos daremos a       Round     y se descargara el archivo modificado, y lo tendremos listo para utilizarlo.

Las  plantillas de Blogger vienen con un borde incluido en las imágenes,
entra al blog en vista Diseño y vas a Html, con Ctrl F buscas este código y cambias el valor de "border" por 0,
Localizas en tu plantilla en modo Html, esta parte del código:

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

Subiremos nuestra imagen a un alojamiento adecuado o la alojamos en Blogger.

Copiaremos la url de nuestra imagen y volvemos a nuestro panel,  a Edición HTML,
con CTRL F, buscamos el siguiente código,

body { el resto podría ser distinto al ejemplo) dentro del código de la plantilla:

body {background:#fff;margin:0;}

Añadimos en el código la url de nuestra imagen tal como se ve en el código siguiente:

body {background: url(URL de la IMAGEN);
margin:0;}

La imagen de fondo, deberá ser una imagen adecuada ya que se repetirá tanto en vertical como en horizontal y cubrirá por completo el fondo del blog,

Para quitar el borde a la imagen que se muestra en tu perfil, localizas esta parte del

código en la plantilla,entra al blog en vista Diseño y vas a Html, con Ctrl F buscas este código y
 y cambias el valor de "border" por 0

.profile-img {float: left;margin: 0 5px 5px 0;padding: 4px;border: 1px solid $bordercolor;}