Personalizar enlaces de blogger

Los enlaces en las plantillas tradicionales y plantillas con diseñador suelen venir por defecto con tres características, una el color del enlace en sí, dos el color o el efecto hover del enlace que en la mayoría de los casos es un efecto subrayado, y la tercera es el color de un enlace visitado.
Bien vamos a tratar de cambiar esas cosas, el subrayado en los enlaces pienso que no debe usarse más, cada quien lo puede ver a su gusto claro está.
Para modificarlo vamos a hacer unos simples pasos.
Vamos a plantilla, presiona control F, y ubicamos estas 3 líneas que abarcan las tres características que nombramos.

a:link {

Sustituimos esas tres líneas por lo siguiente:

a:link {
font-weight:bold;
text-decoration:none;
color: #2f84dc;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
a:visited {
text-decoration:none;
color: #2f84dc;
font-weight:bold;
}
a:hover {
font-weight:bold;
color: #043f55;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Esto lo que hace es primero eliminamos el subrayado, los enlaces quedan con un grosor diferente al reto de los textos, eliminamos el color del enlace visitado ya que no tiene mucho sentido que un enlace tenga tres colores, y por ultimo un efecto lento de cambio de colores.
Donde dice color:#aquí va el color de su preferencia; si lo modificamos debemos colocar el mismo valor en la primera y segunda etiqueta ya que son el enlace en sí, y el enlace visitado, la tercera es el enlace al pasar el cursor, es donde va el valor diferente.
Estas cosas son muy básicas, pero hacen la diferencia.

Los enlaces en las plantillas tradicionales y plantillas con diseñador suelen venir por defecto con tres características, una el color del enlace en sí, dos el color o el efecto hover del enlace que en la mayoría de los casos es un efecto subrayado, y la tercera es el color de un enlace visitado.
Bien vamos a tratar de cambiar esas cosas, el subrayado en los enlaces pienso que no debe usarse más, cada quien lo puede ver a su gusto claro está.
Para modificarlo vamos a hacer unos simples pasos.
Vamos a plantilla, presiona control F, y ubicamos estas 3 líneas que abarcan las tres características que nombramos.

a:link {

Sustituimos esas tres líneas por lo siguiente:

a:link {
font-weight:bold;
text-decoration:none;
color: #2f84dc;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
a:visited {
text-decoration:none;
color: #2f84dc;
font-weight:bold;
}
a:hover {
font-weight:bold;
color: #043f55;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Esto lo que hace es primero eliminamos el subrayado, los enlaces quedan con un grosor diferente al reto de los textos, eliminamos el color del enlace visitado ya que no tiene mucho sentido que un enlace tenga tres colores, y por ultimo un efecto lento de cambio de colores.
Donde dice color:#aquí va el color de su preferencia; si lo modificamos debemos colocar el mismo valor en la primera y segunda etiqueta ya que son el enlace en sí, y el enlace visitado, la tercera es el enlace al pasar el cursor, es donde va el valor diferente.
Estas cosas son muy básicas, pero hacen la diferencia.

Fondos de colore en distinto elementos

La estructura de las plantillas de Blogger y de cualquier página web está formada por contenedores, dentro de estos se ubican los diferentes elementos de la estructura, como son la cabecera, el cuerpo, el pie de página, y muchos más, todos estos son identificados con un atributo Div.
Si contiene algo, ese algo se puede editar de infinitas formas, incluyendo el fondo, a cada uno de estos contenedores podemos aplicarle un determinado fondo, de esta manera se puede empezar lo que sería un diseño agradable y salir un poco de las cosas planas que traen por defecto cada plantilla.
Ejemplo:
<div class='algo'>
 </div>
Esto es la estructura HTML, para aplicar los estilos deben ubicar la hoja de los mismos dentro de su platilla, en este caso es dentro de la línea del <b:skin> que es donde van todos los estilos.
Para aplicarlo seria de esta forma:
.algo {
...Aquí van todos los estilos que le queramos agregar…
}
Hay que recordar siempre que debemos aplicar la etiqueta de estilo con corchetes tanto para abrir como para cerrar, si no se aplica uno de estos la plantilla puede quedar mal formada.

Para agregar un determinado fondo el atributo seria denominado background, esto no es más que el fondo de cada cosa de la estructura, para aplicarlo hay que agregar el color y se aplica con una paleta de colores RGB como la que vemos en Photoshop, por ejemplo un color rojo sería de esta manera: dd1919
Y para aplicarlo basta agregar el simbolo numeral # junto a la etiqueta de cierre que es el punto y coma ; 
El ejemplo completo sería de esta manera:
Dentro del HTML ...
<div class='algo'>
 </div>

Dentro de la hoja de estilo.
.algo {
background: #dd1919;
}
En funcionamiento quedaría algo así:

Un div rojo

Un div azul

Un div de ese color
Estos contenedores no tienen nada, es decir solo estan vacíos, entonces a lo que vamos es que cada cosa que se ve en la estructura del blog está dentro de un contenedor, podemos aplicar los cambios que queramos ya que todo está ahí.
Para aplicar un color de fondo al cuerpo del post ubicamos esta etiqueta:
.post-body {
...Aquí aplicamos el fondo como lo hicimos en ese ejemplo...
}
Aplicar fondo a la cabecera o header, buscamos esta etiqueta:
.header-outer {
...Aquí va el color...
}
De esa manera se pueden ubicar todos los elementos y cambiarle los colores, cabe destacar que estas cosas se hacen muy fácil mediante el diseñador de las plantillas, pero yo en lo personal prefiero hacerlo manualmente ya que cuando aplicas cambios con el diseñador todo queda desordenado, y además así aprendemos algo de diseño web, aunque sea amateur.

La estructura de las plantillas de Blogger y de cualquier página web está formada por contenedores, dentro de estos se ubican los diferentes elementos de la estructura, como son la cabecera, el cuerpo, el pie de página, y muchos más, todos estos son identificados con un atributo Div.
Si contiene algo, ese algo se puede editar de infinitas formas, incluyendo el fondo, a cada uno de estos contenedores podemos aplicarle un determinado fondo, de esta manera se puede empezar lo que sería un diseño agradable y salir un poco de las cosas planas que traen por defecto cada plantilla.
Ejemplo:
<div class='algo'>
 </div>
Esto es la estructura HTML, para aplicar los estilos deben ubicar la hoja de los mismos dentro de su platilla, en este caso es dentro de la línea del <b:skin> que es donde van todos los estilos.
Para aplicarlo seria de esta forma:
.algo {
...Aquí van todos los estilos que le queramos agregar…
}
Hay que recordar siempre que debemos aplicar la etiqueta de estilo con corchetes tanto para abrir como para cerrar, si no se aplica uno de estos la plantilla puede quedar mal formada.

Para agregar un determinado fondo el atributo seria denominado background, esto no es más que el fondo de cada cosa de la estructura, para aplicarlo hay que agregar el color y se aplica con una paleta de colores RGB como la que vemos en Photoshop, por ejemplo un color rojo sería de esta manera: dd1919
Y para aplicarlo basta agregar el simbolo numeral # junto a la etiqueta de cierre que es el punto y coma ; 
El ejemplo completo sería de esta manera:
Dentro del HTML ...
<div class='algo'>
 </div>

Dentro de la hoja de estilo.
.algo {
background: #dd1919;
}
En funcionamiento quedaría algo así:

Un div rojo

Un div azul

Un div de ese color
Estos contenedores no tienen nada, es decir solo estan vacíos, entonces a lo que vamos es que cada cosa que se ve en la estructura del blog está dentro de un contenedor, podemos aplicar los cambios que queramos ya que todo está ahí.
Para aplicar un color de fondo al cuerpo del post ubicamos esta etiqueta:
.post-body {
...Aquí aplicamos el fondo como lo hicimos en ese ejemplo...
}
Aplicar fondo a la cabecera o header, buscamos esta etiqueta:
.header-outer {
...Aquí va el color...
}
De esa manera se pueden ubicar todos los elementos y cambiarle los colores, cabe destacar que estas cosas se hacen muy fácil mediante el diseñador de las plantillas, pero yo en lo personal prefiero hacerlo manualmente ya que cuando aplicas cambios con el diseñador todo queda desordenado, y además así aprendemos algo de diseño web, aunque sea amateur.

Implementa google font en tu blog

Una de las primeras cosas que debemos tener en cuenta sin duda es la tipografía principal de nuestro blog, sobre todo si queremos hacer un buen proyecto con nuestro sitio.
Implementar Google Font es muy sencillo, primero vamos a tener en cuenta ciertas cosas:
Lo ideal sería usar un par de fuentes o quizás tres como mucho, ya que no es recomendable usar tantas debido a que la carga de nuestro espacio se hará muy lento, con 2 o 3 la carga será excelente.
La primera y la más importante es sin duda la fuente que usaremos en el post-body que es en si el cuerpo de cada post.
La segunda fuente será la que identificará los encabezados de los títulos <h1> <h2> <h3> etc.
Se puede usar una tercera fuente para algunas otras cosas como: enlaces, archivos del blog, etiquetas etc. Pero esto es opcional.
Bien ya que tenemos en cuenta esas tres cosas vamos a implementar Google Font, lo primero que haremos es ir hasta el sitio oficial Google Font

Ahora solo hay que elegir la fuente de nuestro gusto, una vez elegida pichamos el botón a la derecha que dice “add to collection” esto si queremos guardar la fuente, hecho esto pinchamos el botón pequeño que dice “Quick-use”.
A continuación nos mostrará 4 pasos el primero es la elección del grosor de de la fuente, esto es opcional así que si quieren lo omiten.
La segunda muestra el tipo de carácter que vendrá en la fuente, como el nuestro es latín lo dejamos tal cual como está.
Ahora el primer cogido será el que cargue la fuente en el blog, copiamos el código que es algo como esto:
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
Ahora lo que haremos es ir hasta la plantilla, y buscar esta línea <head>
Ahora vamos a agregarle una llave de cierre al final del código, ya que de esta manera el blog podrá leerlo. El ejemplo es el marcado en rojo
Queda de esta manera:
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'/>
Y lo pegamos justo debajo de esta línea <head>
Bien con eso ya tenemos la fuente en el blog, ahora el último paso es buscar esta línea: .post-body {
Y justo debajo pegamos el estilo que nos provee Google Font.
Como dijimos ese es el cuerpo del post, ahí ponemos modificar el color del texto, el alto y el porcentaje, en esa parte pegamos el estilo, quedaría algo como esto:

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
color: #fff;
font-family: 'Play', sans-serif;
}
Guardamos la plantilla y listo con eso ya tenemos la fuente; para otras fuentes se hace el mismo procedimiento, si es para los títulos deben buscar las líneas correspondientes ejemplo: h1.post-title, .comments h4 etc, y justo debajo pegar el estilo que provee Google Font, con eso ya tenemos fuentes estéticas, livianas y atractivas.

¿Fácil? Yo creo que sí.

Una de las primeras cosas que debemos tener en cuenta sin duda es la tipografía principal de nuestro blog, sobre todo si queremos hacer un buen proyecto con nuestro sitio.
Implementar Google Font es muy sencillo, primero vamos a tener en cuenta ciertas cosas:
Lo ideal sería usar un par de fuentes o quizás tres como mucho, ya que no es recomendable usar tantas debido a que la carga de nuestro espacio se hará muy lento, con 2 o 3 la carga será excelente.
La primera y la más importante es sin duda la fuente que usaremos en el post-body que es en si el cuerpo de cada post.
La segunda fuente será la que identificará los encabezados de los títulos <h1> <h2> <h3> etc.
Se puede usar una tercera fuente para algunas otras cosas como: enlaces, archivos del blog, etiquetas etc. Pero esto es opcional.
Bien ya que tenemos en cuenta esas tres cosas vamos a implementar Google Font, lo primero que haremos es ir hasta el sitio oficial Google Font

Ahora solo hay que elegir la fuente de nuestro gusto, una vez elegida pichamos el botón a la derecha que dice “add to collection” esto si queremos guardar la fuente, hecho esto pinchamos el botón pequeño que dice “Quick-use”.
A continuación nos mostrará 4 pasos el primero es la elección del grosor de de la fuente, esto es opcional así que si quieren lo omiten.
La segunda muestra el tipo de carácter que vendrá en la fuente, como el nuestro es latín lo dejamos tal cual como está.
Ahora el primer cogido será el que cargue la fuente en el blog, copiamos el código que es algo como esto:
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
Ahora lo que haremos es ir hasta la plantilla, y buscar esta línea <head>
Ahora vamos a agregarle una llave de cierre al final del código, ya que de esta manera el blog podrá leerlo. El ejemplo es el marcado en rojo
Queda de esta manera:
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'/>
Y lo pegamos justo debajo de esta línea <head>
Bien con eso ya tenemos la fuente en el blog, ahora el último paso es buscar esta línea: .post-body {
Y justo debajo pegamos el estilo que nos provee Google Font.
Como dijimos ese es el cuerpo del post, ahí ponemos modificar el color del texto, el alto y el porcentaje, en esa parte pegamos el estilo, quedaría algo como esto:

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
color: #fff;
font-family: 'Play', sans-serif;
}
Guardamos la plantilla y listo con eso ya tenemos la fuente; para otras fuentes se hace el mismo procedimiento, si es para los títulos deben buscar las líneas correspondientes ejemplo: h1.post-title, .comments h4 etc, y justo debajo pegar el estilo que provee Google Font, con eso ya tenemos fuentes estéticas, livianas y atractivas.

¿Fácil? Yo creo que sí.