Como todos sabemos que para incluir una imagen se utiliza la etiqueta <img>.

Ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<img src="Url-de-tu-imagen" alt="Texto" border="3" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Pero si observaron el ejemplo, la etiqueta cuenta con distintos parámetros:
src="Url-de-tu-imagen" |indica la dirección de la imagen
alt="Texto" |muestra el texto al pasar el cursor sobre la imagen
border="2" |establece un borde alrededor de la imagen
align="left" |especifica la alineación de la imagen

Estos son algunos valores:
left: alinea la imagen hacia la izquierda con texto hacia la derecha
right: alinea la imagen hacia la derecha con texto hacia la izquierda
top: alinea texto hacia arriba respecto de la imagen
bottom: alinea texto hacia abajo respecto de la imagen
absbottom: alinea texto hacia abajo mas junto respecto de la imagen
middle: alinea texto en el medio de la imagen
absmiddle: alinea texto aun mas en el medio de la imagen

height="200" |establece la altura de la imagen
width="400" |establece la anchura de la imagen
hspace="5" |indica el espacio horizontal entre la imagen y el texto
vspace="5" |indica el espacio vertical entre la imagen y el texto

Ahora si le incluimos un poco de CSS:
Veremos una imagen con un borde distinto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<img style="border:3px inset #FF8000;" src="Url-de-tu-imagen" alt="Texto" border="0" align="left" height="200" width="400" hspace="5" vspace="5" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Saliéndonos un poco de la <img> y colocando una imagen dentro de un <div>, veremos un texto sobre una imagen:

<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

O que tal una imagen sobre otra y otra:

<div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:200px; width:400px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:100px; width:300px; margin:45px;"><div style="background-image:url(Url-de-tu-imagen); border:3px inset #FF8000; height:50px; width:250px; margin:20px;"></div></div></div>

Y como vez, también le podrás poner enlaces como tu quieras:
<a href="Url-de-tu-sitio">Abrir aqui mismo</a>
<a href="Url-de-tu-sitio" target="_blank">Abrir en una ventana nueva</a>

La imagen que se muestra en los ejemplos pertenece a Sareni

Si necesitas un sitio incrustado dentro de otro en esta entrada sabrás como hacerlo.
Para ello es necesario utilizar la etiqueta <iframe>.
A continuación les muestro los siguientes ejemplos:

Sitio incrustado con bordes y barras de desplazamiento:


Para personalizarlo cambia el tamaño del borde, tipo y color, si lo quieres con barras de desplazamiento(yes/no), ancho y alto de la ventana y alineado hacia la izquierda(left) de un texto, dereche(right), hacia arriba(top), hacia abajo(bottom) o en medio(middle).

<iframe name="window" style="border:5px inset #009900;" src="Url-de-tu-sitio-o-imagen" scrolling="yes" width="300" height="100" align="left"></iframe>

---

Sitio incrustado sin bordes ni barras de desplazamiento:

---

Ahora ejemplos con imagenes:

---

---

HTML edit, es un importante editor HTML que te brinda la posibilidad de editar tus códigos HTML y ver los resultados en línea ya que mientras escribes tu código en el recuadro de arriba te va mostrando el resultado en la parte de abajo.

Para ver un ejemplo copia el siguiente código y pégalo en el editor:

<p style='background-color:#FFCC00; font-family:Stencil; font-size:20pt; color:#006633; border:10px groove #006633;'><marquee>Este es un ejemplo</marquee></p>

Otra herramienta que quise incluir en esta entrada y que nos puede ser útil a todos es Web taller, una tabla de colores.

Solo selecciona el color que desees y en la parte de abajo te generara el código hexadecimal.
Bueno espero y les sean útiles.
Referencias:
Ciudad blogger

Si deseas ver cuando se termina de cargar el contenido de tu blog lo puedes hacer insertando una barra animada.

Ver el ejemplo en este blog de pruebas.
Solo vas a elementos HTML/Javascript e ingresas el siguiente código:

<script type='text/javascript'> 
window.onload = detectarCarga; 
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>
<div id='imgLOAD' style="text-align: center">
<b>Cargando</b>
<img src="Url-de-tu-gif">
</div>

También podrás incluir el código dentro de la misma plantilla.
Si deseas otros tipos de gifs, a continuación te presento los siguientes generadores:
Ajax load
Load info
Web script lab
Preloaders

Los puedes alojar en:
Free image hosting

Referencias:
Ayuda para el blog

Tal vez para algunos es molesto ir a un blog y escuchar música sin pedirlo pero si tu deseas ponerle música de fondo que se escuche automáticamente, coloca después de la etiqueta <body> los siguientes códigos:
Escuchar la canción solo en IE:

<bgsound src="Url-de-tu-cancion-mp3" loop="-1"></bgsound>

La canción se repetira varias veces pero si quieres que se escuche una sola vez, coloca 0 en lugar de -1.
Escuchar la canción solo en firefox:

<embed src="Url-de-tu-cancion-mp3" width="0" height="0" autostart="true" loop="true" hidden="true"/>

Para alojar un archivo mp3 acude a dropbox, un servicio totalmente gratuito. El potro de ciudad blogger te explica con un video tutorial como utilizarlo.
Otro truco o manera de colocar musica de fondo es incluyendo una Url de un video de youtube dentro de un <iframe>:

<iframe frameborder='0' height='0' id='window' name='window' scrolling='no' src='Url-de-tu-video' width='0'/>

Escuchar una cancion en este blog de pruebas.

Los separadores son líneas que se utilizan para separar contenidos de texto dándole una elegancia diferente.

A continuación te dejo los ejemplos:
Separador básico:

---

<hr>

Separador con anchura:

---

<hr width="50%"/>

Separador con anchura y alineado a la derecha:

---

Coloca en lugar de right, center si lo quieres al centro o left si es a la izquierda.

<hr width="50%" align="right"/>

Separador con tamaño:

---

<hr size="20"/>

Separador con color:

---

<hr color="#FF0000"/>

Separador con sombra:

---

<hr noshade="noshade"/>

También personalizándolo un poco más, le colocamos un poco de CSS:

---

Le podrás cambiar color de fondo del separador
El tamaño de cada uno de los bordes, estilos y colores
Lo alto del separador y lo ancho, así como la alineación del mismo.

<hr style="background-color:#333333; border-left:5px solid #009900; border-right:5px solid #FF0000; border-top:5px solid #FFCC00; border-bottom:5px solid #003366; height:10px; width:100%; align:center;" />

O si prefieres colocarle una imagen de fondo:

---

<hr style=" background-image:url(Url-de-tu-imagen); border-left:5px solid #003300; border-right:5px solid #FF0000; border-top:5px solid #FFCC00; border-bottom:5px solid #088A85; height:10px; width:100%; align:center;" />

Si necesitas otros estilos de bordes los puedes verlos en esta entrada.

Espero te sirvan en algo.

El león también conocido como el rey de la selva, es uno de los animales salvajes que más me gustan, por eso me propuse a buscar una imagen de este gran felino para darle un aspecto diferente, en especial en los ojos y la nariz y ahora quiero compartirla con ustedes.

978x858px


La imagen original corresponde a Steve aka Crispin Swan.

---

También otro de los felinos que me encantan, es el tigre y también en honor a el personalicé la siguiente imagen:

556x640px


La imagen original también corresponde a Steve aka Crispin Swan.

Espero y las hayan disfrutado. Nos vemos en la próxima entrada.

En un rato libre me di a la tarea de configurar el cuadro de búsqueda de google y vaya que es sencillo de personalizar.

Para personalizar el buscador básico que tiene google en blogger:

Y que nos quede como este:

Se necesita implementar los siguientes códigos:

/* Eliminar con la tecnologia de google 
---------------------------- */
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}

Como ves el código anterior, se le agrega display:none; para ocultar la imagen y el texto.

---

/* Configuración del botón del buscador 
---------------------------- */
input.gsc-search-button {
color: #FFFFFF; /* Color del texto del botón */
background-image: url(Url-de-tu-imagen); /* Imagen del fondo del botón */
border: 3px solid #2E2E2E; /* Grueso, tipo de borde y color */
}

Si prefirieras ponerle color de fondo en lugar de imagen, solo coloca en su lugar:
background-color: #FFCC00;

---

Aquí al revés, si prefirieras ponerle una imagen de fondo en lugar de color al cuadro, solo coloca en su lugar:
background-image: url(Url-de-tu-imagen);

/* Configuracion del cuadro del buscador 
---------------------------- */
input.gsc-input
{
float:right; /* Alinea a la derecha el cuadro */
width:200px !important; /* Establece el tamaño del cuadro */
color: #FFFFFF; /* Color del texto del cuadro */
background-color: #FFFFFF; /* Color de fondo del cuadro */
border: 2px solid #2E2E2E; /* Grueso, tipo de borde y color */
}

---

Una vez configurado el buscador y entrando con la lista de opciones para que nos quede como esta:

Es necesario ir a nuestra plantilla(guardar una copia antes de editarla) y expandir artilugios para buscar(con Ctrl+F) el siguiente código:

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:<data:linkColor/>;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: <data:dateColor/>;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: <data:urlColor/>;
}

#uds-searchControl .gsc-results {
border-color: <data:borderColor/>;
background-color: <data:backgroundColor/>;
}

#uds-searchControl .gsc-tabhActive {
border-color: <data:borderColor/>;
border-top-color: <data:activeBorderColor/>;
background-color: <data:backgroundColor/>;
color: <data:textColor/>;
}

#uds-searchControl .gsc-tabhInactive {
border-color: <data:borderColor/>;
background-color: transparent;
color: <data:linkColor/>;
}

#uds-searchClearResults {
border-color: <data:borderColor/>;
}

#uds-searchClearResults:hover {
border-color: <data:activeBorderColor/>;
}

#uds-searchControl .gsc-cursor-page {
color: <data:linkColor/>;
}

#uds-searchControl .gsc-cursor-current-page {
color: <data:textColor/>;
}
</style>

Ya que lo encontraste, lo reemplazas por este:

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:#FFFFFF; /* Color de los titulos */
background: url(Url-de-tu-imagen); /* Imagen de fondo de los títulos */
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:#FFFFFF; 
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color:#2E2E2E; /* Color de las fechas */
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color:#2E2E2E; /* Color de la Url del blog */
}

#uds-searchControl .gsc-results {
border-color:#2E2E2E; /* Color del borde del cuadro */
background-color:#1C1C1C; /* Color del fondo del cuadro */
}

#uds-searchControl .gsc-tabhActive {
border-color:#2E2E2E; /* Color de los bordes laterales de la pestaña seleccionada */
border-top-color:#2E2E2E; /* Color del borde de arriba de la pestaña seleccionada */
background-color: #1C1C1C; /* Color del fondo de la pestaña seleccionada */
color:#BDBDBD; /* Color del texto de la pestaña seleccionada */
}

#uds-searchControl .gsc-tabhInactive {
border-color:#2E2E2E; 
background-color: transparent;
color:#BDBDBD; /* Color del texto de las pestañas no seleccionadas */
}

#uds-searchClearResults {
border-color:#2E2E2E; /* Color del borde del icono cerrar */
}

#uds-searchClearResults:hover {
border-color:#1C1C1C; 
}

#uds-searchControl .gsc-cursor-page {
color:#BDBDBD; /* Color de los números de paginación no seleccionados */
}

#uds-searchControl .gsc-cursor-current-page {
color:#BDBDBD; /* Color del numero de paginación seleccionado */
}
</style>

---

A continuación te dejo el código en partes para que lo personalices como tu desees:

color:#FFFFFF; /* Color de los titulos */

background: url(Url-de-tu-imagen); /* Imagen de fondo de los títulos */

color:#2E2E2E; /* Color de las fechas */

color:#2E2E2E; /* Color de la Url del blog */

border-color:#2E2E2E; /* Color del borde del cuadro */

background-color:#1C1C1C; /* Color del fondo del cuadro */

border-color:#2E2E2E; /* Color de los bordes laterales de la pestaña seleccionada */

border-top-color:#2E2E2E; /* Color del borde de arriba de la pestaña seleccionada */

background-color: #1C1C1C; /* Color del fondo de la pestaña seleccionada */

color:#BDBDBD; /* Color del texto de la pestaña seleccionada */

color:#BDBDBD; /* Color del texto de las pestañas no seleccionadas

border-color:#2E2E2E; /* Color del borde del icono cerrar */

color:#BDBDBD; /* Color de los números de paginación no seleccionados */

color:#BDBDBD; /* Color del numero de paginación seleccionado */

---

Y por ultimo si deseas que el buscador cargue con un gif en lugar del texto loadign, lo puedes hacer buscando:

<span class='cse-status'><data:loadingMsg/></span>

Y lo reemplazas por:
<img src="Url-de-tu-gif" />
Puedes ver los 2 ejemplos funcionando en este mismo blog.


Si gustas aquí puedes encontrar de diferentes tipos de gifs animados.
Eso seria todo, espero y este truco te sea útil. Nos vemos en la próxima entrada.

Desde cuando quería publicar esta entrada para explicarte como colocar un traductor de banderitas en blogger.
Puedes ver el ejemplo en este blog de pruebas.
Si quisieras traducir tu blog del español al ingles, se implementaría el siguiente código:

<a href="javascript:var t=((window.getSelection&&window.getSelection())(document.getSelection&&document.getSelection())(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charsetdocument.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=esen&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=esen&tbb=1&ie='+e;};"><img src="Url-de-tu-icono"/></a>

Ahora es(español), es el identificador del idioma de tu blog.
Luego en(ingles), es el identificador del idioma al que quieres traducir.
Y coloca la Url de tu icono del idioma al que quieres traducir, en este caso al ingles.

Recuerda que el código anterior es de un solo idioma.
Para tener los idiomas que desees, solo copéalo y cámbiale el identificador de idioma al que quieres traducir y la Url de tu icono.

Estos son algunos identificadores de idiomas que te pueden servir:

Si quieres emplear las mismas banderitas de el ejemplo, las puedes descargar desde aquí.

Y lo ultimo que queda es colocar el código como elemento HTML/Javascript y listo.
Espero y te sea de utilidad.

Referencias:
Aqui estuve ayer