Google Fonts: cambia la fuente de tu blog

¡Buenas noches!

Os traigo un nuevo tutorial que creo a muchos os puede interesar y es: ¿ Cómo cambiar la fuente predeterminada de mi blog? . No es algo dificil de hacer, solamente necesitaremos un poco de conocimiento HTML y CSS ( y si no esta este tutorial ;p)  y utilizar la web Google Fonts.

Google Fonts es una gran galería de google en la que podremos encontrar cientos de Fonts compatibles con blogger, pudiendo poner tantas como queramos pero tampoco sin abusar.

Lo primero iremos a Google Fonts:

Buscamos la fuente o fuente(s) que nos interesen, en mi caso he elegido Dancing Script. La ventaja de esta web es que podremos previsualizar el texto que queramos antes de instalar la fuente:

El siguiente paso, será darle al signo de +:

Veremos que abajo aparece una ventana confirmando la selección. Le daremos al icono - de color blanco:

La ventana se expandirá dando los códigos necesarios para instalar la fuente, NO LA CERRÉIS:

A continuación vamos a nuestro blog, a la pestaña Plantilla y Edición de HTML:

La sección que nos interesa es la que va DESPUÉS de :

 <head>

Cómo podéis ver yo ya tengo algunas fuentes instaladas, pero el proceso es el mismo. Deberemos ir a la página de Google Fonts, donde tenemos los códigos de la fuente y copiar el primer de ellos:

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">

A continuación lo pegamos en nuestra plantilla:

Google Fonts tiene un fallo importante, y es que este código es erróneo para nuestro blog, y si quisiéramos guardarlo tal cual nos saldría este aviso:

Para solucionarlo, primero deberemos añadir el siguiente código entre "stylesheet" y > :

type='text/css'/

Lo siguiente será cambiar las " por ' de tal manera que el código quedará así:

A continuación, buscamos la sección  < b:skin> y la expandimos:

Ahora buscaremos la parte de la plantilla dónde queremos tener la fuente. Yo la pondré en el título de la Sidebar/ Columna del blog, por tanto buscare:

#sidebar-wrapper-left h2{

Aquí veremos que, como en mi caso, ya tengo una fuente instalada.

Tanto si tenemos una instalada como si no, deberemos copiar/sustituir esta parte:

font-family: 'Poiret One', cursive;

Por este segundo código de la pagina de Google Fonts:

font-family: 'Dancing Script', cursive;

Y quedará así:

Finalmente Guardamos los cambios y...

RESULTADO FINAL

Espero que os haya resultado útil este tutorial, y si tenéis cualquier duda, dejadla en los comentarios ^3^.

[HTML] Pon una cajita de texto simple en tu Blog.

Buenas noches ( aqui en españa) a todos/as!!

Hoy os traigo un tutorial HTML muy simple para poner una cajita de texto en el blog.

¿Para que sirve? Podemos poner un texto normal, un código ( ej: cuando queremos que nos afilien con una imagen + link) etc.

¡¡Comencemos!!

Copia este código:

<textarea cols="14" rows="3">TEXTO AQUI</textarea>

textarea cols Para modificar las columnas ( ancho) de la cajita.
rows Para modificar las filas ( alto) de la cajita).

Para poner el texto o código que quérais, debereís ponerlo donde pone TEXTO AQUI.
Yo pondré el código de mi Banner del blog:

<textarea cols="14" rows="3" title="Drag images into the text area to host them on ImageShack."><a href="http://www.honeydroops.blogspot.com"><img border="0" src="eligelaimagenqueteguste" /></a></textarea>

El resultado será este:

<a href="http://www.honeydroops.blogspot.com"><img border="0" src="eligelaimagenqueteguste" /></a>
Si queremos centrarla, le agregaremos

< center > CODIGO CAJITA AQUI < / center>

Y quedará así:
<a href="http://www.honeydroops.blogspot.com"><img border="0" src="eligelaimagenqueteguste" /></a>
Y esto es todo, cualquier duda que tengaís no dudeís en decirmela.
Ja nee <3

[B] Crear un Chatbox con cbox

Aqui os enseñare a poneros un Chatbox como el que tengo yo aqui en el blog. ¿Para que sirve? Un chatbox es un chat integrado al blog, en el cual tanto nosotros como los usuarios que visiten el blog, podrán dejarnos un mensaje que podremos leer en cualquier momento.

Vamos a la pagina Cbox

Le damos a Sign Up ( registrarse):

Nos saldrá una nueva ventana y rellenamos todos los campos:

+Cbox Name : El nombre de nuestro chat. Podemos utilizar el nombre del blog.
+Email Adress: nuestro e-mail.
+Password: La contraseña que usaremos cada vez que entremos en Cbox.
+Confirm Password: Confirmamos la contraseña.
+Website: La URL de nuestra WEB.
+Language: Elegimos nuestro idioma ( Spanish)
+Style: Elegimos un estilo ( después podremos personalizarlo) para el Chat.

Aceptamos los términos, y le damos a Create my Cbox!.

Estaremos en nuestro panel de control. Ahora pasaremos a personalizar nuestro chat.

Tamaño

Vamos al menú Look & Feel > Layout Options y nos saldrá esta ventana:

--> Width and Height
Width es el ancho que queremos poner para el chatbox.
Height es el alto.
Form Height no lo tocaremos, pero es para cambiar el alto de la vista de los mensajes.

-->Form Layout
Message Lines: nº de lineas que puede tener un mensaje.

-->Messages
Nº of messages to display : es el numero de mensajes que se podrán mostrar en el chatbox de una tirada ( después saldrá el mensaje de cargar más mensajes). Podremos poner un máximo de 20 ( los demás son de pago).

In order: es el orden en que queremos que aparezcan nuestros mensajes. Newest at top es poner los mensajes más recientes arriba y los más antiguos abajo. Oldest at top es al contrario, los más antiguos arriba  y los más recientes abajo.

Cuando acabemos damos a Save ( guardar).

Estilos

En un principio tuvimos que elegir un estilo para crear el chat, pero ahora podremos cambiarlo por uno de los que nos ofrece Cbox en Look & Feel > Style Presets.

Color y tipo de letra

Vamos a Look & Feel>Colours & Fonts:

Nosotros tocaremos solo estas partes:

-->Post Frame

Main BG : Color principal de fondo.      
Main Text: Color de texto principal.        
Main Date: Color de fecha principal        

Alt. BG: Color de fondo alternativo
Alt. Text: color de texto alternativo
Alt. Date: Color de fecha alternativo

Los colores que usemos en MAIN son los colores que tendrá el primer mensaje, el siguiente mensaje dejado en el chat serán los colores de ALT, da igual si los escribe el propietario del blog o no, eso no influye.

-->Form Frame

Field BG: Color de fondo de campo a rellenar.              
Button BG: Color de los botones.                                
Form BG: Color de fondo de formulario.                      

Field text: Color del texto a rellenar.
Button Text: Color del texto de los botones.
Field Borders: Color del borde de los campos.

Border: Color del borde del Chat.

Link ( Active): Color del enlace al pasar el ratón por encima.

Link ( Normal): Color del enlace.

-->Fonts

Font: Nombre de la fuente que queremos en el chat. Viene por defecto Arial.

Main : Tamaño de la fuente.        
Date: Tamaño de la fuente de la fecha.          
Form: Tamaño de la fuente del formulario.

El tamaño de las fuentes viene por defecto y se ven bien, pero siempre lo podemos modificar.

Una vez modificado, damos a Apply ( aplicar).

Cuando lo tengamos como queremos, finalmente vamos a publicarlo en nuestro blog. Vamos al menú Publish! :

Nos saldrá una ventana como esta. Bajamos hasta donde sale el código de nuestro chat. Lo copiamos y lo pegamos en un gadget HTML / Javascript en nuestro blog y guardamos. ¡ Ya tendremos nuestro ChatBox!

Espero que os haya servido de ayuda. ¡Ya sabéis, cualquier duda dejad un comentario o en el chatbox!

Ja nee <3

[B] Enlace CON imagen, con y sin HTML en Sidebar etc.

Este tutorial es útil si queremos utilizar una imagen para redirigir a otra web ( por afiliación etc). Como en el tutorial de Enlaces normales, enseñare a ponerlo con y sin HTML.

SIN HTML

Vamos al apartado Diseño del blog:

Después, vamos a la Sidebar y añadimos un gadget:

El gadget que buscamos es Imagen:

Nos saldra una nueva ventana:

+Titulo: Titulo de nuestra imagen/gadget.
+Pie de foto: pequeña descripción de nuestra imagen ( opcional)
+Enlace: enlace al que queremos que la imagen redirija ( opcional)
+Imagen: Podemos elegir entre subirla de nuestro ordenador ( bastará con buscar y seleccionarla) o copiar la URL de una imagen de internet.

En la opción Reducir hasta ajustar, podremos seleccionarla o no. Si la seleccionamos, significara que la imagen colocada, se pondrá del tamaño que más abajo se nos describe, el cual es normalmente el tamaño de ancho que tiene nuestra Sidebar ( columna). Si no queremos que la redimensione, deseleccionamos esta casilla.

Una vez tengamos todo en orden, guardamos y comprobamos que este como nosotros queremos.

Con HTML

Más o menos es parecido a poner un Enlace normal, con la diferencia que el código a utilizar será algo distinto y la imagen que utilicemos tendrá que estar subida a internet ( hay varios servidores como Imageshack, Photobucket, Dropbox etc.)

Añadiremos un gadget HTML/ Javascript en la columna, y pegaremos el siguiente código:

<a href="ENLACE"><URL DE LA IMAGEN" /></a>

Substituimos ENLACE por el enlace que queramos y URL DE LA IMAGEN por la imagen que queramos utilizar, y el código quedaria asi:

<a href="http://cristalrosegarden.blogspot.com"><img src="https://dl.dropboxusercontent.com/u/100050878/ima2sleder.png" /></a>

Comprobamos que este correcto y guardamos.

Este código se puede usar también en las entradas del blog, e inclusive se le pueden añadir más atributos que cambien el ancho y alto con el que queremos que se visualice, pero eso ya en otro tutorial =D

Espero que os haya servido, y cualquier duda, ¡dejad un comentario o escribidlo en la ChatBox!

Ja nee <3

[B] Crear enlaces SIN imagen con y sin HTML

Ohayo minna =D

Pues hoy os traigo un tutorial de blogger ( y HTML) muy básico sobre como poner enlaces en nuestro blog que no contengan imagen ( vamos, simple y llano texto).

 Lo dividire en 3 partes:

Enlace en Entradas

Creamos una Nueva Entrada.


Miramos en la " Barra de Herramientas" que nos proporciona Blogger, y le damos donde pone Enlace:

Nos saldrá esta ventana:

Donde pone Texto para mostrar irá el nombre del enlace.
Donde pone Dirección Web ponemos la URL del enlace como muestra la imagen de arriba.
Ejemplo 1

Si lo que queremos es poner nuestro e.mail, le damos donde pone Dirección de correo electrónico.
Seguimos los mismos pasos que haríamos en un enlace normal, pero en lugar de poner una URL, ponemos nuestro correo:

Ejemplo 2

Enlace en entradas con HTML

Poner un enlace con HTML puede parecer dificil , pero en realidad es mucho más facil de lo que uno cree, ya que normlamente es hablar de HTML o CSS y ponerse los pelos de punta ( al menos yo XD).

Vamos igual a crear una nueva entrada.

Clicamos donde al lado de Redactar, pone HTML:

Veremos que nos salen varios codigos. El primer codigo:

<div dir="ltr" style="text-align: left;"trbidi="on"> 

Hace referencia a la alineación del texto de la entrada, pero de momento no nos interesa.

Los 2 siguientes códigos son el enlace que hemos creado antes y el enlace que hicimos al e-mail.

Para poner un enlace simple, basta con copiar y pegar este cogido en la entrada:

<a href="DIRECCION DE LA PAGINA A LINKAR">NOMBRE DE LA PAGINA</a>

Substituimos lo que esta en mayúsculas y le damos otra vez al botón Redactar:

Acabamos de redactar nuestra entrada y publicamos. Si lo emos hecho bien, el enlace tendría que funcionar a la perfección.

Enlace en Sidebar ( columna lateral)

Poner un enlace en la Sidebar no es tan "automático" como podría ser en una entrada ( gracias al primer ejemplo que puse) por tanto tendremos que crearlo mediante el codigo HTML. Pero la pregunta es: ¿como colocarlo?

Simple:

Vamos a la sección Diseño de nuestro blog:

Una vez estemos, nos saldrán todos los elementos que conforman nuestro blog. Le damos a Añadir un Gadget en la Sidebar ( columna):

Nos saldrá una nueva ventana donde tendremos a disposición varios gadgets. Bajamos hasta encontrar HTML/Javascript:

Nos saldrá otra ventana nueva donde tendremos que colocar el código utilizado antes:

<a href="DIRECCION DE LA PAGINA A LINKAR">NOMBRE DE LA PAGINA</a>

Simplemente substituimos y guardamos.

Finalmente comprobamos que el enlace funcione:

¡Y ya esta! En realidad explicado parece más que una vez se hace ( intenté explicarlo lo mejor posible ^^U). Si teneis alguna duda, dejad un comentario o decidlo en la ChatBox.

Ja nee <3