Crear un logo para el blog sólo con CSS

En este tutorial veremos la forma de crear un logo para el blog mediante un ícono, algunas fuentes web y CSS3.

Para cada demo he puesto una imagen de fondo para que así se pueda comprobar cómo se vería en un blog similar en colores.

Ejemplo 1 (Estilo 80's):

Free 80's music

Ejemplo 2 (Efecto Grunge Femenino):

★Mi logo★

El tutorial:

Antes de empezar, recomiendo que usen una imagen de fondo en la cabecera, ya que afecta considerablemente al resultado final.

Obviamente para este tutorial deberás deshabilitar la imagen del logo y en su lugar dejar el texto correspondiente al nombre de tu blog.

Paso 1: Añadiendo un ícono:

Lo primero que hay que hacer, es conocer los ID's de la cabecera del blog, generalmente el del logo corresponde a:

#header h1 {
}

Para poder añadirle un ícono, es necesario añadir una imagen de fondo la cual tenga el atributo no-repeat (Sin repetición), además de incluir un padding en la zona que se situará el ícono:

#header h1 {
background: url(URL-DEL-ICONO.PNG) no-repeat left;
padding-left:100px;
}

Si quieres que el ícono se muestre a la derecha deberás reemplazar left (2 veces) por right.

Paso 2: Añadiendo fuentes mejores:

Para cambiar la fuente estándar que contiene el blog, puedes optar por usar las de Google Webfonts, hay una gran variedad, además de ser fáciles de instalar.

Para instalar fuentes de Google puedes encontrar el tutorial aquí.

Extra: Código fuente de los demos 1 y 2:

Si te han gustado los ejemplos puedes pegar directamente estos códigos en tu zona CSS de la plantilla, la cual corresponde antes de:

]]></b:skin>

Advertencia: Los códigos no contienen la imagen de fondo ya que no son aptos para una cabecera.

Ejemplo 1:

#header h1 {
font-size:63px;
text-shadow: 1px 1px 1px #222, -2px 2px 1px #4e621d, -3px 3px 1px #222;
color: #d2d780;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivlp9ZmCb8Xu8r6lqLs3d7kxLyB0XHMlxnnbCDHijc8X1msASELH-XY5G_saJHYurVkBEkbqGIhPPmzhm23l4OiA5NojLQKzcJcWWEz161Edx-nzUNmOdCxVcMXQk_EL7Gln0Wpi43nGc/s1600/Cassette+Green.png) no-repeat left;
padding-left:140px;
line-height:60px;
font-family: 'Plaster', cursive;
}

Antes de </head> pega esto:

<link href="http://fonts.googleapis.com/css?family=Plaster" rel="stylesheet" type="text/css"></link>

Ejemplo 2:

#header h1{
font-size:63px;
text-shadow: 1px 1px 1px #222;
color: #d64d83;
line-height:60px;
font-family: 'Alfa Slab One', cursive;
}

Antes de </head> pega esto:

<link href="http://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet" type="text/css"></link>

Si consideras que el tutorial es muy complicado, puedes dejar la URL de tu blog y especificar qué es lo que buscas.