Blog Personalizado

Como hacer un blog personalizado de manera fácil, practica y sin mucho conocimiento web. (al final del post esta la pagina que se hizo mientras creaba este tutorial) Bueno pos les dejo este pequeño entremés, espero les guste…
Términos
Etiqueta : esto es como se seleccionan las publicaciones para ordenarlas.
Blog : pagina sencilla, creada para publicación personal
Plantilla : Cajón muestra de diseño, esquema con banners espacios de publicaciones y artilugios
XML : eXtensible Markup Language (lenguaje de marcas extensible) plantilla codificada para la integración a la red
HTML : codificación del sistema o del diseño de nuestras paginas o de algunos artilugios
Widget : publicaciones codificadas y/o programadas de forma sencilla (artilugios) ejemplo a un costado de los blogs.
PNG : Portable Network Graphics (formato recomendado para las imágenes de publicidad dado su pequeño tamaño y su funciones de transparencias)
PX : sistema de medición digital 2d (alto y ancho)
Impr-Pant : botón ubicado en el teclado luego de todos los “F” usado para tomar foto de toda la pantalla de tu monitor

Fase 1. Herramientas (en lo personal ocupe estas)
- Navegador: Mozilla 3.5 (para visualizar plantilla y publicación)
- Software de diseño: Photoshop CS3 (Crear diseño y conocer los códigos de los colores)
- Pagina: Blogspot (Sistema de google junto con el correo de Gmail, este servirá para crear y posterior publicación de la pagina)
- Pagina de plantilla de muestra: Btemplate (plantilla base ya avanzada)
- EXTRA: Winrar (para descomprimir la plantilla)
- Pagina servidor de imágenes: Picasa (lugar donde guardaremos algunas imágenes para luego importarlas vía código)

Fase 2. Bajar plantilla, crear correo y blog, ingresar la plantilla descargada al sistema de blogger.

Bueno primeramente ingresemos a la pagina btemplates.com y seleccionamos la plantilla de nuestro agrado (al clickear en ellas las veras en grande y en tiempo real). Estará el botón de Download, bájalo a tu maquina y luego expórtalo (archivo comprimido .rar) y nos percatamos de que en realidad este, él archivo XML (este es nuestra plantilla codificada).








Luego nos iremos a la pagina de Blogspot.com, (en caso de no tener correo con Gmail –recomiendo crearlo-) ingresamos via tu correo de Gmail (porque es esto, pues picasa, blogspot, gmail, y google entre otros forman parte de la misma familia y se nos hace mas factible) estando dentro del escritorio de blogger entramos en crear un blog, esto nos llevara al primer paso en el cual ingresaremos los datos pedidos.


- Titulo del Blog: (Que titulo llevara)
- Direccion del blog: (el nombre que nos ayudara
a llegar directamente a la web)
-comprueba la disponibilidad-
- E ingresa el código de seguridad

Paso 2, escoge una plantilla dale siguiente y por ultimo empezar a publicar. Y listo nuestro blog ya tiene su dirección y ya se encuentra en internet.



OPCION VISTA PREVIA: en todo el tramite de modificación, antes de publicar verifiquemos si va bien el código y el diseño como? La opción vista previa, te dara una mirada antes de darle publicar, (también ayudara si existe algún error en el código modificado te lo dira)

Lograr identificar la opción de diseño, en la subopcion de Edición de HTML, NO TE ASUSTES CON TANTO CODIGO, esto lo modificaremos de una forma sencilla. Lograras ver la opción de cargar una plantilla desde tu ordenador le daremos examinar, seleccionaremos la plantilla anteriormente descargada y le daremos subir. En algunas plantillas te dará una advertencia de mantener o eliminar Widget (es tu elección). Ya dándole publicar y nos dirigimos a la dirección que ya le habíamos puesto a la pagina nos daremos cuenta que ya contamos con la plantilla. Ahora personalicémosla.

Fase 3. Personalizarla (adecuemos las imágenes, los colores, los botones, y/o tamaños de toooodo)

Empecemos con los botones superiores, por decisión mía estos botones serán páginas amigas… (Links para otras paginas). Con la opción Ctrl+F extendemos en Mozilla la opción de búsqueda, y le ponemos Home, y le damos siguiente, siguiente hasta que encontramos el código de los 4 botones, en este caso les dejo ya la codificación del botón y lo que ustedes le ingresaran para su Edicion:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirv7lPPQRI6Z0lPd6Xp3nfVItqxzJSEnJMq4lRcqhlzRdfqfBWFZMGURFpLNDogCpGBL0wmKKGBgtHFVxFlf_Efv2oCor_lGRme29WfmVR2vr2QwM2BpEMudgOsZbIwIbyWcPZkDyeNsk/s1600/codigo.jpg

#: es el link a donde se dirigirá el botón al darle clic
EDIT THIS LINK: es el texto que sale de descripción cuando tu pasas sin dar clic sobre el botón
HOME: será el texto que publicara el boton

Modificándolo y dándole al botón vista previa veremos que nuestros botones ya están ahí, y si le damos publicar a los cambios, estos serán parte yá de la plantilla.

Quiero cambiar el botón de suscríbete por un botón que yo diseñare de facebook. Lo que haremos es darle clic derecho a la imagen de twitter (ejemplo) y le daremos ver imagen, en esta copiare la dirección donde esta ubicada la imagen, esto esta en la barra superior. Para que me servirá? Para darle buscar en el código y no estresarme intentando encontrar la imagen, ya cuando la haya encontrado, me paso a PHOTOSHOP, creo rápidamente mi logo y le doy guardar en formato png (conste que el botón nuevo cuenta con el mismo tamaño del botón del twitter –como vi esto clic derecho a la imagen y en propiedades encontramos la dimensión en PX-)




Abriremos aparte la pagina de Picasa (guardaremos acá la imagen y solo la redireccionaremos con su respectivo URL) entramos a trabes de nuestro ya mencionado correo de gmail, creamos un álbum y en lo opción subir seleccionamos nuestra imagen. Ya en la web como muestra la imagen le daremos clic derecho y seleccionaremos ver imagen y copiamos la dirección. Regresamos a nuestro código e intercambiamos la imagen, y usa la misma opción de edición de código para personalizarlo.







Ahora cambiaremos la imagen de fondo en caso de no encontrarla busca en el código la palabra background, tendrá que tener la dirección de una imagen, verifica copiándola y abriéndola en otra ventana que es la imagen de fondo. Diseña o dibuja el fondo que tu quieras (personalizalo). Y con el mismo método anterior del logo, lo subimos a Picasa y trasladamos la dirección de la imagen y publicamos.


Ok ahora cambiaremos algún color en este caso el color de fondo. SENCILLO COMO DECIA EL MONO MARIO: con el botón Impr-Pant tomaremos foto de la pagina y la llevaremos a photoshop, donde seleccionaremos con el cuenta gotas o la opción i, el color que deseamos cambiar, abrimos la ventana de colores, esta se encuentra en la parte baja de las herramientas, cuando tengas abierta la ventana de colores veras en la parte inferior el código del color cópialo y dale búsqueda en el código y cámbialo con otro color, que puedes generar de la misma forma en la opción de colores en Photoshop.

Observaran que he modificado también el código del segundo banner de botones, de la misma manera del primero. Pero a diferencia del anterior este no tendrá una dirección de una página externa si no interna.

PON MUCHO ATENCION A ESTA ETAPA: (para publicar, en el escritorio del blog veras la opción de creación de entradas) publica las posibles opciones dentro de tu blog, ejemplo galería, en este, aparte de subir alguna imagen, poner texto u otra cosa, pon un titulo, en la parte inferior de todo veras la opción ETIQUETAS, crea la etiqueta galería, automáticamente estará vigente. Ahora la dirección de la etiqueta en este caso este GALERIA: es la etiqueta

http://nombredeweb.blogspot.com/2010/10/galeria.html

Entonces en vez de ubicar otra dirección en el espacio “#” pondremos la dirección de la etiqueta. (esta la lograras ver cuando publiques la entrada y salga la opción de la etiqueta, clickeala y copia el link y únelo al código de los botones)



Blogspot
Btemplate
Blog Personalizado (el blog demo de como quedo el blog a partir de este truco)

powered by Blogger | WordPress by Newwpthemes | Converted by BloggerTheme