epespad

Tutorial personalizando blogger

Basado en el nuevo blogger




Tutorial personalizando blogger

Ya cuando tengamos nuestra cuenta y elegido una plantilla de la que nos ofrece blogger comenzaremos con el proceso de personalizarla a nuestra manera.Solo he colocado lo que me parece basico , para los principiantes ybueno espero que les sirva a todos igual . web

bloggerVamos a: tutorial Diseño personalizando Diseñador de plantillas; aqui haremos los cambios basicos del blog, como ves te apareceran 5 opciones :

Plantillas

FondoTutorial personalizando blogger
Les recomiendo esta página web encontraran muchos fondos lindos ^-^ web



blogger


tutorial




Diseño
Ajustar ancho
Avanzado

"Abajo van viendo la vista previa de todo lo que vayan haciendo."

Los demas solo tienen que ponerse a mirar y cambiar los colores y todo sin miedo xD, lo del fondo queria compartirles la página y una pequeña introdución para quien no sepa ^-^.
Una vez hayamos realizado los cambios que nos parezcan damos click en Aplicar al blog y damos click en volver a blogger.



personalizando




Tutorial personalizando blogger Una vez alli estaremos en la pestaña de Elementos de página, vamos a cambiar la cabecera de imagen para que se vea mucho mas linda.
Encontre esta web donde ya ahi imagenes para utilizar en la cabecera, tal vez les sirva n--n.
web

Cuando hayan guardado su imagen vamos al elemento cabecera y damos click en editar ,


blogger



el titulo los identificara en la web ya que es el que aparecera en las pestañas de los navegadores y asi sera como la gente podras buscarlos, click en examinar y buscamos la imagen que pondremos si quieren reducirla (y es lo mas recomendado si uds no ajustan la imagen de cabecera al ancho del blog) den click al cuadrito reducir hasta ajustar antes de buscar la imagen, escojan una de las opciones q mas les convenga y den guardar. ^-^ listo ya tenemos lo mass basico de nuestro blog.

Ahora si quieren hacer una cabecera propia la pueden hacer hasta en paint solo es cuestión de creatividad y ganas tutorial, si quieren hacerla mucho mas detallado les recomiendo descargar y aprender un poquin de photoshop *--*.

personalizando Otra cosa si quieren saber de que ancho necesitan la imagen de cabecera solo tienen que tomar la medida en ajustar ancho y tomen la medida donde dice blog completo.


Tutorial personalizando bloggerAñadir un gadget
Me imagino que han visto en un blog umm un reloj o un calendario, chat`s, contadores de visita en fin.... bueno esos son gadgets aplicaciones , para tener algo vistoso y practico.
para agregar uno de estos haremos lo siguiente:



web

blogger




Damos click al mas y estaremos dentro, si quieres puedes ponerle titulo si no, no pasa nada, dentro de contenido pegaremos el codigo que nos ofrezca la persona que posteo* el gadget por ejemplo en esta página ahi unos reloj muy lindos con calendario y todo xD click para ir a la página bien, mas abajito ahi unos codigos esos son los que necesitas para poner tu reloj copias y pegas eso, luego le das guardar. listo tienes un reloj-calendario en tu blog jejeje, igual si quieres colocar otro gadget vas alli y pegas el codigo que te den.



tutorial




En los gadgets que ofrece blogger pueden ver que hay para poner solo texto, imagenes, presentaciones, gadgets basicos ^-^.



personalizando




Tutorial personalizando blogger Editando el HTML, esta parte me gusta muchis :3 aver les dare unos truquillos para poner en el blog.

webblogger



tutorial




esa barra que aparece arriba llamada navbar se puede quitar facilmente. Vamos a: personalizando Diseño Tutorial personalizando blogger Edición de HTML ; insertan el código html antes de la etiqueta <head>


web
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>
blogger



tutorial




personalizando Un tip que les dare es que cuando necesiten buscar una palabra en especifico en el codigo de la plantilla como cuando te dicen pega esto antes de </body> o <head> y haci entonces presiona Ctrl + F y ahi te saldra un buscador escribes la palabra de referencia y listo, mas sencillo que ponerte a buscar palabra por palabra en toda la plantilla ^-^


Tutorial personalizando bloggerweb



blogger




Concepto ♥ Un favicon es la imagen que identifica una web con un logo sencillo y que aparece en la barra de direcciones de una web, al añadirlo a favoritos (o marcadores) y en las pestañas de las distintas ventanas abiertas con el navegador.

Ahora deben tener una imagen de 16x16 pixeles, si asi de pequeña para que se vea bien. Ahora vamos a editar la plantilla;
tutorial Diseño personalizando Edición de HTML, justo antes de <title> coloquen el siguiente código:

Tutorial personalizando blogger
<link href='Urldetufavicon=)' rel='icon' type='image/gif'/>
<link href='Urldetufavicon=)' rel='shortcut icon' type='image/gif'/>
web

okii ya esta , ahora donde dice urldetufavicon=) es donde debes cambiarlo por la url que te el servidor (picasa,photobucket...) donde subas tu imagen, en la etiqueta type donde coloque en rojo es lo que tendrias que cambiar según el formato de la imagen si es jpg,gif,png... si no sabes solo mira el final de la url de tu imagen ahi te dice ^-^.



blogger




tutorialpersonalizando

para colocar un cursor en tu blog, vamos a: Tutorial personalizando blogger Diseño web Edición de HTML ; justo antes de la etiqueta </body>

<style type='text/css'> body {cursor:url(Urldelcursor),default} </style>
o bien las páginas donde esten los cursores les daran el código solo recuerden pegarlo antes de </body>

Páginas de cursores para web: Totally Free Cursors / Cursores golosinas / cursores kawaii

bloggertutorial

Para colocarle al cursor brillitos colocamos este codigo despues de ]]></b:skin>, o antes de </head>, Para el color solo deben cambiar al principio esto: var colour="#FBBDDB"; lo que esta en rojo es el codigo de color

personalizando
Link
Tutorial personalizando blogger

Lo subi como .txt para que puedan ver el codigo mejor, solo tienen que abrirlo ademas el codigo es muy largo y aqui en taringa se ve mal ><.


webblogger

cuando seleccionan un texto se les vera azul como es por defecto, pero con este codigo podran ponerle el color que combin o prefieran para su blog =).
Pegar antes de tutorial

personalizando
/* Color texto seleccionado *
::-moz-selection {background: #ffb7b7; color: #fff;}
Tutorial personalizando blogger

entonces les quedaria asi *^-^*:


web



bloggertutorial

El blockquote sirve para citar algo en nuestro blogger o que queramos que se note mas podemos poner <blockquote> </blockquote> o bien utilizar el botón personalizando; si queremos personalizar este debemos hacer lo siguiente.
Buscamos .post body{, debajo pegamos este codigo:

Tutorial personalizando blogger
blockquote {
padding: 4px;
border: 1px solid #44EBFA;
background-color:#E0FFFF;
color: #9a9a9a;
font-family:Courier New;
}
web

eso seria un ejemplo ya uds pueden cambiarle los valores y si quieren en vez de un color de fondo poner una imagen solo cambien por esto background: url(URL DE TU IMAGEN), pueden agregarle otro tipo de fuente,etc.. ^-^


blogger




tutorial Páginas estaticas , estas son ideales si quieres hacer páginas que sean permanentes por ejemplo, una página sobre ti con un chat..no se lo que quieras xD aver les enseñare como poner una página estaticas y se van familiarizando ^-^

Vamos a: personalizando Creación de entradas Tutorial personalizando blogger Editar páginas.

Oki, alli les aparecera página nueva ,click ^_^. Ahora pondremos un titulo y el contenido , yo de ejemplo hare una página sobre mi y dentro del contenido pondre una imagen que habia echo hace ratooo para facebook jijiji lito demos publicar página, nos aparecio esto



web




eligamos pestañas del blog, ahora tendremos un menú debajo de la cabecera con las páginas estaticas que vayamos subiendo son muy practicas para ir a algo especifico y que necesites que este alli siempre.



blogger




tutorial Páginas ayuda para bloggerCiudad Blogger/ El balcón de Jaime/ El Escaparate de Rosa/ OloBlogger/

personalizandoChat

Aqui les dejo unas páginas de chat para que coloquen en su blog, el que mas me gusta en C-box ^-^ es muy sencillo y fácil de personalizar.



Tutorial personalizando blogger webblogger




tutorialTabla de coloresColores web

Espero que estos pequeños apuntes los ayuden al empezar su blog y buena suerteeee ! ^-^



personalizando




Tutorial personalizando blogger

webblogger


tutorial



11 comentarios - Tutorial personalizando blogger

Robbii +2
me encantan tus posts y tu web
me sirve mucho el tutorial,gracias
y tambien habia entrado a tu pagina de blogger antes y me baje los juegos y los pinceles
gracias x todo!! =^.^=
saludos y suerte!

PD.: te dejaria puntos,pero soy novata :S
Elviel +2
Aww mereces ser nfu!! +10
Stivenson
Muñekita justo buscaba lo de las páginas estáticas, muchas gracias.
Toma 10 mamasita
rodrigohg1 +1
muchas gracias me sirvio mucho tu info
Agu32 +1
alto laburo te mandaste
Cannesu
me sirvio mucho el tutorial,solo que la parte de texto seleccionado con un color diferente no me funciono TT___TT
igual muchas gracias! dejaria puntos pero soy newbie
andrufg
Que buen post vampiresa muy buena informacion +10 ¿como puedo poner un menu en la parte de arriba como el que tienes en tu blog? con about, afiliados, imagenes, etc