Está en la página 1de 40

ndice

Qu parte del cdigo de mi plantilla es la que da forma a todas esas partes? ....................... 3
Reconocer las partes del blog dentro del cdigo ...................................................................... 6
Saber buscar aquello que queremos personalizar pero no sabemos ubicarlo ......................... 7
Recursos en cuanto a vocabulario ............................................................................................. 7
Mucha paciencia ........................................................................................................................ 8
Tu blog como Host de imgenes ................................................................................................ 9
Cambia el Fondo de tu blog ..................................................................................................... 10
Imagen en la cabecera del blog ............................................................................................... 11
Pon y personaliza el Borde de tu blog ..................................................................................... 13
Pon una Flechita para subir arriba en tu Blog .......................................................................... 15
Con la Tecnologa de Blogger. FUERA!!! .............................................................................. 17
Cmo usar Otros tipos de letra para nuestro blog! (Google fonts) ......................................... 18
Cmo usar fuentes personalizadas en tu blog! ....................................................................... 20
Qu son y para qu sirven Las Etiquetas?.............................................................................. 23
Men horizontal para tu Blog! ................................................................................................. 25
Cmo poner el botn de "Leer ms" en las entradas de tu blog (Blogger) ............................. 30
Cmo activar los Comentarios Anidados (botoncito de Responder) ...................................... 32
Sidebar: Agregar widgets a nuestro blog ................................................................................. 34
Comentarios Recientes con Avatar!! ....................................................................................... 34
Poner un banner ...................................................................................................................... 36
Poner iconos de Redes Sociales ............................................................................................... 39

Como todas comentasteis al final he decidido hacer una recopilacin de todo lo que hemos
aprendido y un poquito ms.
Aqu encontrareis paso a paso los tutoriales necesarios para personalizar vuestro blog de
cabo a rabo, a parte una pequea gua explicativa de cdigo Css y Html.
Como vimos en el curso 1, ya conocemos la estructura externa de la plantilla, lo referente a
encabezado, cuerpo de las entradas, sidebar etc... Pero en este curso veremos esa
estructura internamente.

Qu parte del cdigo de mi plantilla es la que da


forma a todas esas partes?
Para empezar la plantilla se compone de 2 tipos de cdigo funcional por as decirlo. El
primero, el que da forma, el que lo pone bonito y hace que tengamos un blog mono, es el
cdigo CSS.
En este cdigo Css es en el que nos centraremos, puesto que lo que queremos es
personalizar al mximo nuestro blog, ser autnomos en cuanto a diseo grfico, sin que
tengamos que recurrir a empresas o particulares que se dedican al diseo Web.

Suele estar en la parte superior del cdigo, despus de las meta tags, links, etc. mirad:

En la parte de arriba del cdigo Css es donde solemos poner los meta tags y otro tipo de
cdigo de informacin de nuestra pgina o blog, como el ttulo, si usamos fuentes

personalizadas etc... Creo que es ms prctico utilizar esta parte antes del Css para este tipo
de cosas.

El cdigo Css normalmente viene con apartados dentro, es decir, los programadores por
costumbre, cuando personalizamos partes del cdigo solemos sealarlas.
Me refiero a esto:

Gracias a esto, podremos personalizar nuestra plantilla ms fcilmente. Acostumbraos


tambin a marcar lo que personalicis, as en otra ocasin sabris dnde ir directamente.
Ahorra tiempo y esfuerzo.
Si sabis diferenciar esto, tenis ya un 80% ganado. La otra parte restante es saberse el
cdigo, como se llama cada cosa, pero eso, no hace falta que empollis nada.
Si realmente tenis ganas de aprender lo mejor es que os metis de lleno dentro de una
plantilla y veris que al final os aprendis el cdigo porque es facilsimo.
Por ejemplo, las fuentes se las llama Font, a las familias de fuentes o sea ms de una pues
Font family. Cosas as aunque no est de ms que os pase una chuleta con cdigo bsico
para que de momento os defendis.

Primero vamos a hacer una explicacin de cmo est estructurado el cdigo HTML:
El comienzo del documento HTML lo indica la etiqueta <html> Adems un documento
HTML ha de estar delimitado por las etiquetas
<html>.... </html>
La Cabecera del documento (Header, cabecera en ingls) est delimitada por <head>......
</head>
Donde colocaremos etiquetas normalmente informativas como el ttulo de la pgina.
Adems se usa para dar informacin sobre el documento, por ejemplo la versin de HTML.
El Cuerpo del documento (BODY, cuerpo en ingls) flanqueado por las etiquetas
<body>...</body>
Es probablemente la parte ms importante de un documento HTML. Es donde el usuario
disea o maqueta a travs de las etiquetas (tags) la pgina web.
Esta estructura puede observarse a continuacin:
<html>
<head>
</head>
<body>
</body>
</html>

Cuando cualquier cdigo lleve esta barrita al principio / significara que cierra. Si no la lleva es
que empieza.
Siempre que escribamos cdigo pondremos si empezamos o si terminamos.
Esto es para que sepis diferenciar entre dnde empieza y dnde termina una lnea de
cdigo HTML, para poder aplicar tutoriales y para poder localizar aquello que estemos
buscando, saber dnde empieza y dnde termina, y obviamente saber dnde buscarlo si en
body, en head...etc...
Ahora toca lo concerniente al Css. Todos los cdigos son muy parecidos, es como el
castellano, viene del latn al igual que el francs, el italiano, etc... Pues con el cdigo pasa lo
mismo todos vienen del HTML.
Yo misma no saba nada de Css pero saba mucho HTML, por eso no me cost nada aprender
rpido Css aunque como todo, son lenguajes que evolucionan con el tiempo.

Lo ms importante para personalizar nuestro blog es:


Reconocer las partes del blog dentro del cdigo
Saber buscar aquello que queremos personalizar pero no sabemos ubicarlo
Recursos en cuanto a vocabulario
Mucha paciencia

Reconocer las partes del blog dentro del cdigo


En la imagen siguiente vemos cmo se estructuran las partes del Blog en etiquetas de cdigo
Css.
Si queremos personalizar alguna de estas partes, ahora ya conocemos el nombre, podremos
ir a nuestro cdigo fuente, buscar la parte que nos interesa y personalizarla.

Saber buscar aquello que queremos personalizar pero


no sabemos ubicarlo
Muchas veces decimos, quiero cambiar el color del borde del blog. Pero en el cdigo no
sabemos ubicarlo y por lo tanto no lo encontramos.
Pues se termin, no s si se os haba ocurrido alguna vez o si lo hacis...pero bueno os lo
cuento porque es lo que yo hago.
Todas deberamos tener o tenemos un editor grfico como Photoshop. Pues bien cuando no
s ubicar algo de mi blog, lo hago por los colores, as que hago una screen de la pantalla, la
pego en el Photoshop y con el selector de color (cuentagotas) selecciono el color de aquello
que quiero cambiar.
Copio el numero hexadecimal del color, que te lo da Photoshop, no es ningn misterio
obtenerlo.
Voy al cdigo de la plantilla, hago un click dentro de la ventanita donde est el cdigo
(porqu si no hacemos click no se activa el buscador) le doy a Ctrl+F y pego el cdigo, lo
busco y si lo encuentro ms de una vez miro a ver dnde est.
Con lo que sabis ahora, si veis que el color est en Header, no lo tocaremos porque no es lo
que queremos. Nosotras queremos cambiar el borde y entonces el color estar en algn sitio
que diga border.
Es muy fcil y te ahorra mogolln de tiempo de andar leyendo cdigo. De esta manera, con
prctica encuentras las cosas y los errores en un momento.
Y si no es un color, sino que es digamos...una imagen? Bueno pues busco en el cdigo por el
nombre de la imagen para ver dnde est. Y si es texto pues lo mismo.
Hay que tener recursos para todo.

Recursos en cuanto a vocabulario


Si alguna vez quiero introducir alguna parte de cdigo, pero no s cmo se dicen las cosas,
por ejemplo:
Quiero poner un formulario y personalizarlo para que no sea como el de todo el mundo,
pero claro en mi cdigo no hay nada de Css de un formulario porque no tena, tengo que
hacerlo de 0.
Primero lo marco, como en la primera foto que veamos.

Luego empiezo por darle nombre, si el cdigo de funcin que me han dado se llama <div
formularioTuyo> pues en el cdigo Css pondr #formularioTuyo o .formularioTuyo (en
algunas plantillas con . y en otras con #)
Y a partir de ah pues ya le dir si lo quiero con borde, de qu color, etc... Pero si no tengo
claro cmo hacerlo pues San Google lo sabe todo. Har una bsqueda que diga por
ejemplo... Personalizar formulario para blogger o cdigo css para personalizar formulario.
Y seguro seguro que encuentro mucha gente que me da muchas posibilidades de cdigo
para personalizar lo que yo quiero. Incluso seguramente terminaris haciendo un combo de
todos para dejarlo como os gusta.

Mucha paciencia
La vais a necesitar, sobre todo al principio, ya sea porque al no tener prctica os cueste
encontrar las cosas o ubicarlas. Ms adelante porque no daris con el cdigo preciso para lo
que queris.
Otras veces (como a m la ltima vez) descubrs que el cdigo al final va en un sitio que
intuas pero era tu ltima opcin, como el fondo del men que yo por lgica lo meta en un
sitio y resulta que iba 3 lneas de cdigo ms arriba pero al final lo saqu.
Practicar, intentadlo una y otra vez, hacedlo vosotras porque se aprende rapidsimo y da
muchsimas recompensas ver que lo habis hecho vosotras.
Y que sepis que esto no es magia, no siempre funciona un mismo cdigo, seguro que estis
hartas de que os den un tutorial que a todo el mundo le ha ido bien pero a vosotras no os
funciona. Pues esto es as, buscar donde est el fallo y arreglarlo a base de preguntar aqu o
all pero al final se aprende y pocas son las cosas que se te resisten, y si se te resisten sabes
que en 2 o 3 horas las solucionas.
As que por favor practicar, acaba siendo un hobby agradecidsimo.
Si lo hacis y no sabis algo, tenis dudas, queris ayuda ya sabis donde estoy siempre para
echaros un cable.
Espero haberos ayudado un poquito ms.

Despus de esta introduccin para saber un poco ms cmo es el funcionamiento interno de


nuestro blog vamos a ordenar los pasos para personalizar nuestro blog
AVISO: para utilizar las URL slo tenis que hacer click sobre el vnculo.

Tu blog como Host de imgenes


Sube tus imagenes como si hicieras una entrada pero sin publicarla, en Blogger una vez
subes las imgenes ya se quedan guardaditas.
Vais a Nueva entrada y ponis las fotos que os interesen.
Cuando la tenis ya puesta picis arriba a la izquierda donde dice HTML y veris el cdigo:

Pues como veis en la imagen guardis esa URL que os aparece ah porque es donde el blog
ha alojado la imagen.
Y ya la tenis alojada y guardada para utilizarla siempre que queris. As utilizaremos nuestro
blog como host de imgenes para la cabecera, fondo, etc..

Cambia el Fondo de tu blog


Vamos a Plantilla y Editar HTML (no os olvidis de la copia de seguridad antes de tocar nada
y lo de siempre si no sabis como se hace Curso y aprendiendo :P)
Bien una vez en el cdigo HTML de nuestra plantilla desplegamos artilugios (no hace falta
todos, solo el de <b:skin>.
Ah buscaremos este segmento:
body {
font: normal normal 14px Delius;
color: #222121;
background: #dfdede url(http://4.bp.blogspot.com/TVUTSZgpKh0/UuMkjBf_diI/AAAAAAAABoA/qJwlEuH1pjI/s1600/fonsflors.jpg) repeat fixed
bottom center;
padding: 0 40px 40px 40px;
}
Es el primero que os debera salir.
Muy bien donde dice:
background: #dfdede url(http://4.bp.blogspot.com/TVUTSZgpKh0/UuMkjBf_diI/AAAAAAAABoA/qJwlEuH1pjI/s1600/fonsflors.jpg) repeat fixed
bottom center;
Cambiaremos lo que aparece entre parntesis y pegaremos la URL que habamos guardado
de nuestra imagen.
Seguimos ms abajo, encontraremos la misma URL que la que hemos sustituido:
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: #dfdede url(http://4.bp.blogspot.com/TVUTSZgpKh0/UuMkjBf_diI/AAAAAAAABoA/qJwlEuH1pjI/s1600/fonsflors.jpg) repeat fixed
bottom center;
}
Esa que est entre parntesis, tambin la cambiamos.
Solo tenemos que cambiar estas dos, las que estn dentro de .body y .body-fauxcolumnouter .cap-top
Hacis una vista previa a ver si os gusta y ya est, no tiene ninguna complicacin, solo es
cambiar esas dos URL por la URL de vuestra imagen.

10

Imagen en la cabecera del blog


Muchas veces vemos que la Cabecera del Blog es el ttulo a secas, pues bien podemos hacer
dos cosas.
Con photoshop o algn otro editor de imagen hacernos nuestra propia cabecera, como
he hecho yo :)
Buscar en San Google una imagen bonitsima y ponerla de cabecera junto con el ttulo.
Lo que haremos es colocar y ajustar una imagen en la cabecera.
Recomiendo encarecidamente que la imagen sea del mismo ancho que el blog. Si no fuera
posible bueno...puede que no quede perfectsima, pero queda muy bien :P.
Para saber cunto mide el ancho del blog (lo determinas tu mismo en las plantillas nuevas),
selecciona la pestaa Plantilla, luego vas a Personalizar->Ajustar ancho, ah vers el valor
que tienes definido para el ancho del Blog.

VAMOS A SUBIR LA IMAGEN


Ve a la pestaa Diseo, click en "Editar" en la seccin que corresponde a la cabecera.

Asegrate de tener ticada la opcin Reducir hasta ajustar, si la imagen es ms grande o


igual que el ancho del blog.
Reducir hasta ajustar

Tambin, selecciona las opciones para la ubicacin de la imagen, de las opciones que
permite, como:
Detrs del ttulo y la descripcin (ser un fondo para el ttulo y la descripcin de tu blog)
En lugar del ttulo y la descripcin (El ttulo y la descripcin NO aparecern, la imagen los
sustituye. Ideal para los que se hacen ellos mismos las cabeceras enteras)
Colocar la descripcin despus de la imagen (Debajo de la imagen aparecer la
descripcin de tu blog, el Ttulo ser la imagen.)

11

Sube la imagen, desde tu ordenador o desde otra URL (direccin de internet)

Pica en Guardar y Voil!! Tu header ya es una imagen :)

12

Pon y personaliza el Borde de tu blog


Aqu tenis una imagen de todos los bordes con su nombre.

None y Hidden son dos opciones para que no se vea el borde, en el caso de None, es que no
haya borde y en el caso de Hidden, el borde est oculto.
Una vez hemos elegido qu marco pondremos a nuestro blog, tenemos que buscar en
nuestra plantilla y con los artilugios desplegados buscaremos este texto:
.content-outer seguramente debajo habr ms texto y entero ser algo como esto:

.content-outer {
border-right: 2px dashed #C785DB;
border-left: 2px dashed #C785DB;
border-top: 2px dashed #C785DB;
border-bottom: 2px dashed #C785DB;
margin-bottom: 1px;
}

13

Muy bien, donde dice 2px pondris los pxeles que queris que tenga vuestro marco, o
sea, si queris que sea finito pondris 1 o 2 y si lo queris ms gordito pues pondris ms
pxeles, yo lo tengo a 2.
Donde dice dashed pondris el nombre del tipo de marco que queris. El Dashed es el que
tengo yo, a rayitas discontinuas, pero podis elegir cualquiera de los que os he enseado
ms arriba.
Donde dice #C785DB esto es el color, est en Hexadecimal, yo para elegir los colores lo
que hago es abrir el Photoshop y elegir el color que quiero, luego le doy a la paleta y te
muestra el cdigo hexadecimal del color, lo copio y lo pego en el cdigo. Si no tenis ningn
editor de imgenes que os diga los colores, podis buscar en San Google paleta de colores
Hexadecimal.
Elegs uno, copiis el cdigo y listo. (con # delante eh!)
El ; es importantsimo, no lo borris y antes de darle a guardar revisar que todos los ;
estn puestos.
Por ltimo el margin-bottom no hace falta que lo toquis, solo establece el margen inferior y
no tiene nada que ver con el borde. No lo tocaremos.
Si no tenis ese texto en vuestra plantilla lo pondremos. Cmo? Muy fcil mirad, en vuestra
plantilla buscaris <b:skin> y lo primero que encontrareis seguramente ser algo parecido a:
body {
Si os fijis tiene { esta llave luego texto y luego } esta otra llave pues muy bien cuando veis
} este simbolito inmediatamente despus, hacis 2 Enter o Intro, que queden 2 lneas en
blanco ms o menos (ms que nada para que la plantilla est ordenadita que es muy
importante) e inmediatamente despus de esos espacios en blanco pegis esto:
.content-outer {
border-right: 2px dashed #C785DB;
border-left: 2px dashed #C785DB;
border-top: 2px dashed #C785DB;
border-bottom: 2px dashed #C785DB;
margin-bottom: 1px;
}
Y para personalizarlo pues hacis lo que he explicado arriba.

14

Pon una Flechita para subir arriba en tu Blog


Aqu tenis unas cuantas flechitas y para poder elegir a parte de las instrucciones de cmo
instalarlas en vuestro blog.

http://3.bp.blogspot.com/9letcFTrhpw/UsttR86vbeI/AAAAAAAABNI/vTn1TelWZAs/s1600/flechita1.png

http://2.bp.blogspot.com/-5ir4CTU554/UsttRyQjazI/AAAAAAAABNU/YjMZFWENWJY/s1600/flechita2.png

http://3.bp.blogspot.com/-6k5_Fz7DItE/UsttSO3TJWI/AAAAAAAABNM/5B7tqnEeI4/s1600/flechita3.png

http://3.bp.blogspot.com/mRI1An_ikn8/UsttSgCEgeI/AAAAAAAABNk/Hn949mI7X6E/s1600/flechita4.png

http://4.bp.blogspot.com/dyzS_x7UEgE/UsttS_WNG4I/AAAAAAAABNg/FjkuosMpMS4/s1600/flechita5.png

15

Estas son las flechitas y la direccin que tiene cada una. Debajo es donde est alojada la
imagen para que podis copiar y pegar la direccin en el cdigo que ms abajo os dejo para
instalar la flechita en el blog.
Vamos a ver cmo se instala despus de que hayis decidido qu flechita os quedis.
Este es el modo "Cutre salchichero" slo os dirn este procedimiento aquellas personas que
o bien no tienen ni idea de programar cdigo o bien no tienen ganas de que vosotros
aprendis a pescar en lugar de daros un pez. (Entendis?)
Copiar este cdigo:
<a style="display:scroll; position:fixed; bottom:4px; right:4px;" href="#" title="Subir
arriba"><img src="URL_deTU_Imagen" /></a>
Vamos al blog, Diseo->Aadir gadget: elegimos uno de HTML/Javascript y pegamos el
cdigo.
Guardamos, Guardamos disposicin.
Vemos cmo queda en el blog.
Modo NORMAL: Este es el modo bueno porque a ver, en el pie de pgina de todos los blogs
(si as lo dice la plantilla y en las predefinidas suele decirlo) hay como un marco flotante que
se superpone a TODO lo que haya en la pgina para mostrar el pie (footer)
Por lo tanto lo que haremos es ir a:
Plantilla
Editar HTML
Buscar el siguiente cdigo:
</footer>
Y justo encima escribimos el cdigo de la flechita
<a href='#' style='display:scroll; position:fixed; bottom:0px;right:1px;' title='subir arriba'>
<img src='URL_de_tu_Flechita'/>
</a>
Ya est, guardad y ya ir perfecta incluso a pie de pgina con cualquier plantilla.
Donde dice bottom: bla bla bla; eso es para que podis moverla si la queris ms arriba, ms
abajo, ms a la derecha etc...

16

Con la Tecnologa de Blogger. FUERA!!!


Nos vamos a Diseo y vemos que hay un gadget que se llama Attribution.
Est bloqueado, qu quiere decir? Pues que si le damos a Editar no aparece la opcin de
Eliminar. Lo que haremos es hacer que aparezca la opcin de eliminar.
Ya sabis que antes de toquetear el cdigo HTML de vuestra plantilla, tenis que hacer una
copia de seguridad.
Vamos a plantilla y editar HTML, dentro damos como muchas otras veces a Ctrl+F y
buscamos esto:
Attribution
Encontrado!

Fijaros en el recuadrito rojo, veis que dice True? Pues borradlo y poned false
Y donde veis: showaddelement='no'
Quitad el no y poned yes.
Solamente eso no toquis nada ms del cdigo
Y os quedar as:

17

Guardamos la plantilla en Guardar plantilla.


Ahora nos vamos a diseo y picamos en Editar del gadget de Attribution.
Ahora s nos aparece ELIMINAR, pues borradlo!
Ahora si queris poner vosotros lo que queris le daremos a Aadir gadget yo lo he elegido
de TEXTO a secas, pelao y mondao, y escribs lo que os guste:
Perica y Sus cosas
Ya est.
Nota: Esto es por si queris poner texto solamente claro, si queris poner un link o alguna
pijadita as necesitaris escoger uno de HTML/Javascript.

Cmo usar Otros tipos de letra para nuestro blog!


(Google fonts)
Normalmente Blogger dispone de unos tipos de fuentes limitados, pero tranquilidad, Google
ofrece su servicio de Google fonts!!!! Ahora os explico cmo usarlo y poner el tipo de letra
de nuestro blog ms bonito y personalizado.
Iremos a Google Web Fonts, y cogeremos la letra que ms nos guste.
Una vez escogida la fuente, abajo veremos algo as

Seleccionamos ''Use This Font''


Nos saldr una pantallita en la que hay 2 cdigos distintos
Cdigo 1:
<link href=http://fonts.googleapis.com/css?family=LA_QUE_HAYAMOS_ESCOGIDO
rel=stylesheet type=text/css

Cdigo 2:
H1 { Font-family: LA_QUE_HAYAMOS_ESCOGIDO, arial, serif; }
Insertamos la fuente en nuestro Blog
Ahora vamos a Diseo -> Edicin HTML, y buscamos (con Ctrl+f) la siguiente lnea:
</head>

18

Justo encima pegamos el cdigo 1, pero una cosita, al final del cdigo ponedle una /, o sea
que os quede as:
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'
type='text/css'/>
(Si no le ponemos la barrita / blogger cree que nos hemos dejado el cdigo a medias y
rechaza el script.)
Bien ahora el cdigo 2 solo utilizaremos la lnea que dice:
''font-family'':
h1 { font-family: LA_QUE_HAYAMOS_ESCOGIDO, arial, serif; }
Este cdigo lo pegaremos donde queramos utilizar la fuente. Si quieres que el blog entero
utilice esa fuente, por ejemplo pues lo pondrs en body, tal que as:
body {font-family: "LA_QUE_HAYAMOS_ESCOGIDO" !important;}
Ahora la decisin es tuya, yo solo puedo decir que este cdigo hay que pegarlo antes de:
]]></b:skin>
Nota: Para usar la fuente, recordad que donde diga Font family tendris que poner el
nombre que apareca en google fonts, vamos que os debera quedar algo as all donde lo
pongis:
.post h3 {
font-family: LA_QUE_HAYAMOS_ESCOGIDO;
}

19

Cmo usar fuentes personalizadas en tu blog!


Queremos utilizar un tipo de fuente que por desgracia no est en Google Fonts, entonces
qu hacemos?
Primero de todo descargarla en nuestro ordenador.
Hay muchsimas pginas donde podis descargar fuentes, si no sabis ninguna escribir Free
Fonts en google o mirad esta pgina
Bien, la dejamos ah guardadita.
Ahora para que los navegadores (Firefox, Explorer, Opera, Chrome) sepan que la fuente de
nuestro blog hay que ir a cargarla a otro sitio, porque es genuina y muy nuestra (jeje)
debemos utilizar una regla de CSS que se llama @font-face. As que como la gente utiliza
navegadores diferentes, y queremos que todo el mundo nos vea de la misma manera, lo que
haremos es convertir nuestra fuente en cada uno de los formatos que utiliza cada
navegador.
Cmo se hace eso?
Muuuy fcil, iremos a esta pgina donde nos generara automticamente el archivo que
necesitamos.
Os acordis que hemos descargado la fuente que queramos? Pues si esta en zip o rar o
comprimida del modo que sea, la descomprimimos!
Bien ahora en el generador de archivos de fontsquirrel aadimos la fuente que nos hemos
bajado, aceptamos los acuerdos legales (tildndolos) y le damos a kit de fuentes.

20

Ya lo tenemos, en la carpeta que nos han dado en esta pgina tenemos los archivos
necesarios.
Descomprimimos!
Ahora iniciamos sesin en nuestra cuenta de Dropbox. Si no tienes una cuenta pues
regstrate! Es gratis, rpido, fcil y muy cmodo. Un servicio de hosting de archivos muy
estable.
Nos logueamos en nuestro Dropbox y en la carpeta Public, subimos los archivos SVG, EOT,
WOFF y TTF que acabamos de descomprimir. (Si hay algn archivo mas esos no los subimos)
Bien, los veis ah subidos, pues ahora algo ms fcil si cabe!. Abrid el Bloc de notas, dejroslo
a mano. En los archivos subidos hacemos Click derecho y copiar link pblico. Vamos al bloc
de notas y pegamos el link. As de los 4 archivos.

Nota: En los archivos que nos hemos bajado hay un archivo llamado stylesheet.css. Pero esta
todo apelotonado, as que ni caso, os pongo el cdigo ms abajo y os resultar mucho ms
fcil hacerlo.
Editamos!
Ahora vamos a nuestro blog, plantilla y hacemos una backup!!! Muy importante.
Ahora editamos el HTML, bien abrimos con Ctrl+F el buscador y buscamos esto:
]]<b:skin>
Justo encima pegaremos el cdigo:
@font-face {
font-family: 'HOLASOYTUFUENTE';
src: url('URL DE TU FUENTE.eot');
src: url('URL DE TU FUENTE.eot?#iefix') format('embedded-opentype'),
url('URL DE TU FUENTE.woff') format('woff'),
url('URL DE TU FUENTE.ttf') format('truetype'),
url('URL DE TU FUENTE.svg#pacificoregular') format('svg');
21

font-weight: normal;
font-style: normal;
}
*donde veis que dice URL DE TU FUENTE poned los links que habais copiado en el block de
notas. Fijaros en las extensiones pepito.SVG o pepito.TTF, cada uno en su sitio. Es muy fcil.
Usamos la fuente en nuestro blog!
Bien ya tenemos todo listo, ahora que tenemos la fuente la pregunta es, dnde la usamos?
En el cdigo que hemos usado deca en Font family: HOLASOYTUFUENTE. Ese es el nombre,
la etiqueta, la marca registrada de nuestra fuente, as que all donde la pongamos, se usara
esa fuente.
Ejemplo: si en las etiquetas (h1, h2, h3, h4) de nuestra plantilla le decimos en Font family
que use HOLASOYTUFUENTE todos los elementos que usen esas etiquetas usaran esa fuente
automticamente.

22

Qu son y para qu sirven Las Etiquetas?


Qu son las etiquetas?
Las etiquetas son las definiciones que resumen nuestra entrada. Es decir, si hacemos una
entrada sobre moda, en las etiquetas pondremos algo como: moda, look, estilismo, ropa,
mango, zara etc.
Para qu sirven?
Sirven para organizar nuestras entradas en secciones, tambin sirven para los buscadores,
encuentran la informacin ms rpido si est organizada.
Es importante utilizar las etiquetas?
Segn, si no vas a hacer ningn tipo de men o barra de navegacin para que tus lectores
naveguen por tu blog con ms comodidad no lo necesitas.
Ahora ES IMPORTANTISIMO si quieres hacer un men en tu blog para que tus lectores
puedan encontrar con 1 click aquello que buscan.
Dnde estn esas etiquetas?
Bueno hay blogs que no las publican, y otros que s, lo normal es encontrar las etiquetas
justo debajo de la entrada.

En el blog, como lectores, podemos ver las etiquetas en bastantes sitios, segn donde haya
querido el autor del blog mostrrnoslas.
En el diseo del Blog las etiquetas estn en la columna derecha del editor de Entradas.

23

Al clickar en Etiquetas se abre y obtenemos una lista de las etiquetas que hayamos usado. Si
nunca lo hemos usado, escribimos lo que queramos usar como etiqueta y le damos a Listo.

Y ya tendremos una o varias etiquetas asignadas a esta entrada.

IMPORTANTISIMO: Siempre que hagamos una entrada la etiquetaremos, siempre


siempre siempre!!! As en un futuro nos resultara muy fcil hacer un MEN HORIZONTAL

24

Men horizontal para tu Blog!


Lo primero que debemos de hacer es tener una idea clara del tipo de men que queremos y
asegurarnos de que tenemos todas las entradas bien etiquetadas y las etiquetas puestas en
las entradas deben estar en consonancia con el tipo de men que queremos hacer.
Por ejemplo este es mi men:

Al clickar en Tutoriales nos llevar a todas las entradas etiquetadas con Tutoriales (o
palomitas, gallinas da igual, lo que cuenta es que sea la MISMA etiqueta para todas las
entradas que englobar Tutoriales.
Una vez organizadas las entradas, cada una con su correspondiente etiqueta para ser
agrupada en la seccin que queremos y que se mostrara en el men, vamos a buscar las
URL(direcciones) de cada entrada.
Es algo rudimentario y si tienes muchas entradas, te llevar un rato. Solamente tienes que
abrir en pestaas nuevas todas y cada una de las entradas de tu blog. Hazlo por tongadas,
seccin a seccin, es decir, haremos primero la seccin Tutoriales, pues bien, yo soy la
autora del blog y s perfectamente dnde est cada entrada, rpidamente las encontrar y
las abrir.
Copiamos la direccin de cada una en un block de notas mismamente y al ladito, para no
despistarnos de cul es cul, el ttulo de la entrada.
Tal que as:
http://lireth.blogspot.com.es/p/blog-page_8.html----> Tutoriales
Una vez tengamos las direcciones iremos al apartado de Pginas dentro de diseo de
blogger. Pulsaremos Pgina Nueva y seleccionamos Direccin Web.

25

Por ltimo, se nos abrir una pequea ventana donde escribiremos el nombre de la seccin
(Tutoriales) y la url (direccin que hemos apuntado en el block de notas).

Pulsamos Guardar y tambin, que no se nos olvide, pulsamos el botn situado en la esquina
superior derecha Guardar disposicin.
Ahora slo nos queda crear las pginas estticas de Inicio, Sobre m o Contacto.
Vamos de nuevo a Pginas y all pulsamos Pgina nueva.

26

La pgina de inicio la crearemos como las anteriores, slo que esta vez pondremos la
(direccin) url de nuestro blog a secas: www.tublog.blogspot.com.es .
As cuando el usuario pulse en inicio, le llevar a la pgina inicial del blog.
Para el resto de pginas elegiremos Pgina en blanco.
En esta pgina, pondremos el ttulo que queramos que aparezca en el men horizontal, por
ejemplo Contacto. Podemos escribir texto e imgenes y guardamos. Igualito que una
entrada normal.
Por ltimo, para dejarlo todo activo y que se vea en el blog, pulsamos Pestaas principales y
Guardar disposicin.

Y ya tendramos un men horizontal en el blog. Repreciossimo.


Quiero el men pero con una imagen de fondo
Si queris el men pero con una textura o una imagen haremos lo siguiente:
En el cdigo CSS que ya sabis dnde est, buscaremos lo siguiente:
.tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left
Si no lo encontris pues buscis .Tabs a secas y pegis el siguiente cdigo:
.tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left{
background: url(http://1.bp.blogspot.com/-fWvznofYNU/UvQr1IzlqBI/AAAAAAAAACE/KEUoYyz0juk/s1600/barrita-menu.png) repeat left;
color: #F9F5EC;
font-weight: normal !important;
}

27

Si lo encontris veris que tenis que poner donde dice background la direccin de la imagen
que queris que tenga el men. Tal y como veis en el cdigo que os he dado.
OJO!!!: Resulta que en la vida de la programacin y la informtica, las cosas no tienden a
ser tan sencillas como parecen sobre la pantalla jijiji.
Seguramente os habr salido el men, si, pero alineado a la izquierda verdad?
Bueno pues vamos a hacer algo muy sencillito para que se centre ^^
Es muy sencillito, solamente tendremos que:
Ir al Diseador de Plantillas (que est dndole a Diseo y arriba a la derecha os sale un link
para ir al diseador de plantillas)
Avanzado
Aadir CSS
Y pegamos este cdigo:
.PageList {text-aling:center !important;}
.PageList li {display:inline !important; float:none !important;}

Aplicamos al blog
Y Voil, ya tenemos las pginas centradas.

No se han centrado? Malditas variables... Bueno veo que a muchas os da problemas este
temita as que os explico un poco ms en profundidad.
Si no se os ha centrado poned este cdigo:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important; text-align:center !important;}
div#PageList1 div.widget-content > ul > li > a {
text-transform:none;
}

28

Si insertndolo con el Diseador de plantillas no os hace caso, hacis una copia de seguridad
y luego vais a Plantilla y editar HTML.
Una vez ah desplegis artilugios y buscis esto:
.Tabs
A bajo de todo de ese apartadito, despus de la ltima } pegis el cdigo que os he puesto
antes y guardis. Y ahora ya s que os tiene que salir centrado a narices ajajajaja.
Os sale centrado horizontalmente, pero os queda pegado arriba o abajo, es decir, no est
en el centro en cuanto al eje vertical?
Fcil, en el mismo sitio que le habis dicho el color que queris que tenga el men o el
fondito, le diremos las medidas que queremos para nuestro men, de ancho y de alto.
Tal que as:
height: 40px;
line-height: 40px;
weight: 1100px;
Anda! Y la lnea que dice line-height? Para qu es? Es para que se quede centrado en el eje
vertical y SIEMPRE le daris la misma cantidad que el alto que sea el men o sea, que el
valor que tenga height.
Truco y aprendemos Cdigo de paso: si lo queris alineado a la derecha el cachito de cdigo
donde dice: text-aling:center; lo cambiis por text-aling:right; , que lo queris a la izquierda
pues en lugar de right poned left.
Donde veis text-transform:none; si queris que las letras, ellas solas se pongan en
maysculas poned text-transform:uppercase;
Es muy fcil cuando se sabe hacer.

29

Cmo poner el botn de "Leer ms" en las entradas


de tu blog (Blogger)
Hay dos formas de hacerlo:
Si queremos nuestro Leer ms en texto solamente, es la forma ms sencilla o si la queremos
con una imagen prediseada como la que tengo yo.

Slo texto leer ms: Lo primero que vamos a hacer es ir administrador de nuestro blog y
picar en Diseo, una vez en diseo seleccionamos Entrada y al pie vemos editar, hacemos
clic y nos aparece lo siguiente:

Como vemos en la imagen lo que est envuelto en rojo es el texto que nos aparecer,
ponemos lo que ms nos guste: Leer ms, seguir leyendo, ms informacin etc. lo que
queramos.
Guardamos y Guardamos muy importante!

30

Ahora nos vamos a Entradas y hacemos como si furamos a publicar una con total
normalidad pero fijaros!:
En el nmero 1 vemos el icono que al picarlo, nos aparecer en nuestro post la raya que
vemos en el nmero 2.
Esa lnea divide el post en 2 partes la de encima es la que aparecer en nuestra pgina
principal y la de debajo de la lnea es la que no aparece en la pgina principal y solo ser
posible leer si damos a nuestro mgico botn de leer ms!
Entendido? Es decir esa lnea es la que nos divide el post y sobre todo intentad ponerla en
una parte que atraiga al lector, despus de una pregunta o una propuesta para hacer un
poco ms de gancho.
Y ya tenemos nuestro texto de leer ms.
Ahora vamos a hacerlo con una imagen prediseada que obviamente ya habremos
conseguido y subido a algn host como imageshack, dropbox, skydrive como hemos
comentado en otros posts anteriores o en nuestro blog, como comentbamos al principio de
este curso-gua.
Bien nos vamos a Plantilla y hacemos un Guardado de seguridad por si metemos la pata, es
muy importante hacerlo siempre que se toca el cdigo de nuestra plantilla.
Picamos en editar HTML, picamos con el cursor dentro del texto de html y apretamos las
teclas CTRL y F a la vez nos sale una cajita para buscar y en ella buscamos este texto:

31

<data:post.jumpText/>
Cuando encontremos este texto en nuestra plantilla lo sustituimos por este:
<img src="URL de tu imagen"/> (donde dice URL de tu imagen pondremos la url, direccin
de nuestra imagen de leer ms)
Ya est, guardamos plantilla y hacemos una entrada.
All donde queremos que vaya a aparecer el botoncito de Leer ms haremos click en el
iconito que hemos visto antes, el salto de lnea y publicamos!

Ya aparecer nuestro botoncito de leer ms en nuestros posts.


Nota: Si queris que aparezca en todas las entradas antiguas deberis abrirlas una a una y
poner el salto de lnea all donde queris que aparezca el botoncito de leer mas. (Es una
faena s pero es lo que hay :P)

Cmo activar los Comentarios Anidados (botoncito de


Responder)
Los comentarios Anidados, qu son?
Cuando hacemos un comentario en una entrada, debajo de nuestro comentario aparece
el botoncito de Responder.
A este sistema de comentarios se le llama comentarios anidados.
Hay muchas plantillas que bsicamente no soportan este sistema, porque no tienen el script
necesario y habra que ponrselo a manita, a muchos no os importar hacerlo pero muchos
otros preferirn cambiar de plantilla.
Consejo: Si a una plantilla no le funciona el sistema de anidados, yo soy partidaria de tirarla a
la basura, porque seguramente no ser la nica incompatibilidad que tenga, es ms muchas
veces hay plantillas tan mal programadas que a pesar de que les pongas el script no
funcionan porque hay otra cosa que crea conflicto. Lo dicho, empezad una plantilla de cero e
ir aadindole cositas y personalizndola.
Es lo mejor.
A lo que iba, los comentarios anidados se activan solos por decirlo de alguna manera,
siempre y cuando en nuestra configuracin reunamos los requisitos pertinentes que son:

32

En el apartado Feed tenemos que tener elegida la opcin de Completo.


En la imagen ya veis que tenis que ir a Configuracin, Otros y ah veis este apartadito.

Nuestros comentarios, en la seccin de Entradas y Comentarios que la encontraremos en


Configuracin, tenemos que tener la opcin de Debajo de la entrada.

En pgina completa o ventana emergente no aparecern los anidados.


As que ya sabis si tenis el feed completo y los comentarios debajo de la entrada os
debera aparecer el botoncito de responder.
Si no aparece el problema es otro, si as fuere, hara un tutorial para poner los anidados
manualmente. Os servir si sabis y tenis idea de cdigo, si no tenis ni idea y no queris
liaros, cambiad la plantilla, hacedla de 0 es lo mejor!!!

33

Sidebar: Agregar widgets a nuestro blog

Comentarios Recientes con Avatar!!


Para tener el Widget hay que ir a esta pgina e
introducir los datos de tu Blog
Widget Ttulo: Ponemos el Ttulo de nuestro
Blog, o Comentarios Recientes. Podemos dejarlo
en blanco si queremos
Blog URL: La url de vuestro blog
Nmeros de comentarios recientes: El
nmero de comentarios que queris que
aparezcan
Mostrar imagen de avatar?: La gracia es
ponerle que SI pero si no queris, pues decidle
que no.
Avatar tamao de la imagen: Normalmente se deja en 60px, es un buen tamao.
Redondeado Imagen de Avatar?: si queremos que salga redondo le diremos que SI, si lo
queremos cuadrado diremos que NO.
Nmero de caracteres extracto comentario: Son el nmero de letras del comentario que
aparecern. 40 es un buen nmero.
En el siguiente paso tenemos que decidir si queremos que muestre un "Mostrar ms"
despus del cachito de comentario que se puede leer en el gadget.
En el siguiente podemos personalizar el More por Ms o lo que queramos.
En el siguiente podemos poner una imagen para que salga cuando alguien no tiene foto.
Por ltimo podemos decidir si se ve quin proporciona el gadget o no.
Una vez cumplimentado el trmite le damos a "Generar". Eso los llevar a una pgina donde
veremos un icono de Blogger.
Click en el icono para obtener el cdigo.

34

Pasaremos a una pgina en la que nos da la posibilidad de insertar el cdigo directamente,


pero es ms seguro y prctico hacerlo de forma manual.
As que le damos a "Editar Contenido" y copiamos todo lo que haya ah.

Despus lo copiamos todo en un gadget de los de HTML/Javascript.

Luego ponemos el gadget donde queramos que se vea, guardamos los cambios y ya est!!!

35

Poner un banner
Antes de todo, qu es un banner?
Pues un banner es un dibujito, ya sea con o sin animacin que representa tu pgina web o
blog:

Este es uno de los tres banners que hay disponibles, podis verlos aqu
Este es el banner de mi blog. Se suelen hacer con editores de imgenes ya sean online como
es Picmonkey o con photoshop, mucho ms elaborados.
Bien queremos poner en nuestra sidebar las imgenes de los blogs que seguimos en lugar de
que nos salga una lista.
As como lo tengo yo.

36

Pues bien nos vamos a Diseo y aadimos un gadget HTML/Javascript.


Una vez aadido lo colocaremos donde queramos que salga nuestra lista de blogs con
imagen.
Dentro del gadget pegaremos este cdigo:
<div class="separator" style="clear: both; text-align: center;">El nombre del Blog<br /><a
href="Direccin del blog" target="_blank"><img alt="Palabra que aparece al pasar el ratn
por encima de la imagen" border="0" height="170" src="Direccin de la imagen"
width="170" /></a>
Bien todo lo que vemos en azulito hay que cambiarlo por los datos de la imagen y el blog
que queremos anunciar.
Lo que veis en color verde es: center= centrado para que salga en medio, esto lo podis
alinear como ms os guste (left, rigth)
Si queris poner ms de un banner simplemente pegis el mismo cdigo tantas veces como
banners queris poner.
Importante: dimensiones
Yo os he dejado las dimensiones (tamao) que yo uso, pero para que cambiis las
dimensiones podis hacerlo de 2 maneras.
La primera, en el cdigo que os he pasado en el cachito que dice: height="170" y
width="170" Cambiis 170 por los pxeles que necesitis vosotras.
El otro mtodo es ir a Diseo, seleccionamos el widget y editar.
Clicamos arriba a la derecha donde dice Formato RTF.

37

Seleccionamos con 1 clic la imagen y la redimensionamos al gusto.

38

Poner iconos de Redes Sociales


Como siempre que queramos agregar un gadget nuevo nos iremos a Diseo y en nuestra
sidebar (barra lateral) agregaremos un gadget nuevo elegiremos el de HTML.
Se nos abre una ventanita como siempre y en el ttulo no pondremos nada, lo dejaremos
vaco esta vez. Slo rellenaremos el campo de cdigo con lo siguiente:
<div align="center"><a href="URL DE TU RSS" target="_blank"><img alt="Sgueme va RSS"
src="URL_DE_TU_IMAGEN" /></a><a href="URL DE TU FACEBOOK" target="_blank"><img
alt="Sgueme en Facebook" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE
BLOGLOVIN" target="_blank"><img alt="Sgueme en Bloglovin" src=" URL_DE_TU_IMAGEN"
/></a><a href="URL DE TU TWITTER" target="_blank"><img alt="Sgueme en Twitter" src="
URL_DE_TU_IMAGEN" /></a><a href="URL DE TU PINTEREST/" target="_blank"><img
alt="Sgueme en Pinterest" src=" URL_DE_TU_IMAGEN" /></a></div>
Cambiando lo que veis en AZUL por la direccin de vuestro sitio (ya sea facebook, twitter,
etc.) y lo ROJO por la URL de la imagen del botoncito que queris poner
As, todo seguido, os aparecer en el blog un icono al lado del otro horizontalmente, si lo
queris en vertical tan solo tendris que poner un enter entre cada </a> y <a>
Os quedara as:
<div align="center">
<a href="URL DE TU RSS" target="_blank"><img alt="Sgueme va RSS"
src="URL_DE_TU_IMAGEN" /></a>
<a href="URL DE TU FACEBOOK" target="_blank"><img alt="Sgueme en Facebook" src="
URL_DE_TU_IMAGEN" /></a>
<a href="URL DE BLOGLOVIN" target="_blank"><img alt="Sgueme en Bloglovin" src="
URL_DE_TU_IMAGEN" /></a>
<a href="URL DE TU TWITTER" target="_blank"><img alt="Sgueme en Twitter" src="
URL_DE_TU_IMAGEN" /></a>
<a href="URL DE TU PINTEREST/" target="_blank"><img alt="Sgueme en Pinterest" src="
URL_DE_TU_IMAGEN" /></a></div>

Y ya tenis los botones de vuestras redes sociales en el blog.

39

Esta gua de personalizacin de blogs ha sido una


compilacin de informacin del blog Lireths Notebook,
all encontrars las fuentes de los tutoriales si las hay y
mucha ms informacin.
Gracias por confiar en el blog!

40