Posteamelo

Bueno, después de que mi vieja me _1@#|@#|@#| los huevos, se me ocurrió la brillante idea de crear un lindo post ilustrativo para aquella gente que no casa ni la hora digital.

Qué es blog?

En mi definición crioya, es como un diario.. tanto personal como público, orientado al gusto que vos se te dé la gana. Ordenado cronológicamente.

Ahora realmente qué es un blog?

Un blog, o en español también una bitácora, es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente. El término weblog proviene de las palabras web y log ('log' en inglés = diario). El término bitácora, en referencia a los antiguos cuadernos de bitácora de los barcos, se utiliza preferentemente cuando el autor escribe sobre su vida propia como si fuese un diario, pero publicado en Internet en línea.

(

Cómo |@#|@# me hago 1?

te creas una cuenta y llenas todos tus datos. Es recomendable para aquellos usuarios que usan iGoogle.

Ya me creé la cosa, ahora?

Vas a la parte de arriba, donde dice "escritorio" si no te aparece, te aparecerá algo como esto

lo cual van a ir a "configuración primero" y aparecerán estas cosas fáciles de entender:

Titulo
Descripción
¿Deseas añadir tu blog a nuestras listas? [SI]
¿Deseas permitir que los motores de búsqueda encuentren tu blog? [SI]
¿Mostrar Edición rápida en su blog? [SI]
¿Mostrar enlaces de envío de entradas?

Contenido para adultos [ Esto es para los que van a hacer de su blog algo PORNO o No apto ]

¿Mostrar el modo de composición para todos sus blogs? [SI]
¿Habilitar transliteración? [Para la gente que entra de otros países, traslada el idioma de la página a su idioma]

Luego, van a la solapa "Publicación" donde le das el nombre que va ser el blog, en este caso el mio es http://innommine.blogspot.com/ .
La solapa "Formato" Dejenla regular, es lo mejor.

Ahora vamos a la parte de diseño y vamos diréctamente a Seleccionar plantilla

Elijan, las primeras que aparecen en la fila de la izquierda.. las que son todas blancas y muy simples.. (Hay una que ubica las entradas a la derecha y otra a la izquierda) "guardar planilla" y luego vamos a "edición HTTP" que es donde vamos a darles los toques más artisticos.

Debajo de esto:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

ponemos este código:

body {
background-image:url(LINK DIRECTO DE IMAGEN);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}

Ejemplo

body {
background-image:url(http://pixelea.com/s/6c30914186.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}

Esto va ser el "fondo del blog".
Hasta acá ya estamos (...)

Vamos a "Fuentes y colores" y te fijas qué color es el que más te va gustando como queda con tu fondo de pantalla.. Acordate que el texto de las entradas tiene que ser de un color que se note.

Ahora vamos a "Diseño"

Esto es una visualización de las partes de tu blog. Las entradas (los artículos que vas a realizar) y los GadGet (Dispositivo de función propia). En la parte de la cabezera si van a "editar" pueden agregar una imagen de Cabezera su blog así queda mucho mejor.
Es decir, en un GadGet podremos agregar fotos, reproductores de audio, videos, JAVA, etc.
Vamos a empezar por algo simple..
Abrimos el GadGet..

Vamos abajo y donde dice "imagenes" le das click y buscas una imagen desde tu equipo, le das aceptar y listo. Luego con el mouse, podés ir moviendo el GadGet.. es decir, fijate con el mouse apretando el click izquierdo y movelo a una posición que te guste.

Y bualá, tu blog ya tendría que estar maaaaaaaaaaaaaomenos armado como el mío.. jaja..

Para agregar GadGets.. paso a dar algunas páginas como tengo yo en mi blog
Para las madres, que quieren expresar sus ideologías artísticas y que cada persona que pase les deje un mensajito, les recomiendo esto..

Vas a "create your shoutbox now" llenás los campos que pide.. y luego, buscá algo que diga "get code"

te va dar un código fuente.. Abajo.. algo que vas a ver con <> y simbolos raros.. seleccionalo con el mouse, copialo y después pegalo en un GadGet de JAVA.

Para el reproductor de música

http://www.playlist.com/

Para agregar un album de fotos tipo video, que quede re lindo

http://www.slide.com/arrange?bc=16777215&fx=0&tt=11&sk=0&cy=bb&th=0&sc=0

Si quieren ver mi blog

http://innommine.blogspot.com/

Para agregar imagenes al fondo.. primero tenes que subir la imagen.. acá dejo algunos links de host de imagenes gratis

http://pixelea.com/
http://www.idivimage.com/

Una ves que subiste la imagen, fijate siempre que al agregar el link en los ( ) tenes que agregar el LINK DIRECTO A LA IMAGEN, acordate.. LINK DIRECTO.. buscá esa palabra cuando hostiaste la imagen, ya que cuando subis una imagen te pasa varios links.. el que dice "link directo" es el que vas a poner

Si queres bajar plantillas prediseñadas, con otros estilos, formatos, etc etc..

http://btemplates.com/

Para subir las plantillas, vas a "diseño>Diseño HTTP" cargar plantilla.. y donde dice examinar, buscamos un archivo ".xml" ok??
Luego carga la plantilla y listo, somos re felices..

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

------------------------------- COMO USAR OTRO CÓDIGO FUENTE -----------------------------

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

Lo voy a explicar sensillo, para que todos lo entiendan. Esto requiere un poco más de habilidad o ganas de hacerlo manualmente para que nuestro blog quede woooooooooh..
Por ejemplo, nos bajamos esta plantilla que me baje yo.. de kung fu panda.. onda..?? nose que onda, pero igualmente no importa..

La plantilla es asi..

Qué hacemos nosotros?

Vamos a chequear el código fuente..
y veremos que hay links de imagenes..

-----------------------------------------------*/

#header-wrapper {
background: url("http://3.bp.blogspot.com/_h2Z5-se9eC4/SRPcNlKjQUI/AAAAAAAAAeM/FR0m0yy0HUU/s1600/kungfupanda_01.jpg" no-repeat;
width:980px;
height:370px;
margin:0;
padding:0;
text-align:left;
}

Entonces.. abrimos el explorer y ponemos la dirección "http://3.bp.blogspot.com/_h2Z5-se9eC4/SRPcNlKjQUI/AAAAAAAAAeM/FR0m0yy0HUU/s1600/kungfupanda_01.jpg" y la guardamos en una carpeta con un nombre que podamos reconocer.. pongamosle.. "1"

ahora seguimos mirando el Código y..

----------------------------------------------- */
#outer-wrapper {
background:url("http://4.bp.blogspot.com/_h2Z5-se9eC4/SRPcN2pzLOI/AAAAAAAAAeU/8UYjSCkXmEQ/s1600/kungfupanda_02.jpg";
background-repeat: repeat-y;
width: 980px;
margin:0 auto;
padding:0;
text-align:left;
}

Repetimos el mismo paso de la imagen y con todas las imagenes que encontremos..

Ahora bien.. que vamos a hacer..

Veamos las imagenes..

1:

2:

3:

Vamos a notar que consiste en 3 partes.. que estas 3 partes unidas forman una imagen..
Abrimos Paint o photoshop.. (lo voy a hacer así nomás..) y entramos a modificar..
Claro que si te tomas un lindo tiempo te va salir FAaaaaaaaaaaaaaaaaaaa que producción teté..

el mio salio medio mocho pero buen, es para mostrar..
así fui armando en paint para demostrar..

1:

2:

3:

y finalmente reemplazamos el código fuente con las nuevas imagenes.. en el orden que iban.. te quedaría algo así como ves en las fotos.. una cagada digamos.. pero lo bueno sería que te tomes tu tiempo siempre en trabajar las imágenes.. si no bajá el dreamwaver y crea las plantillas en diseño web.

(Recomiendo usar imágenes que no contengan muchos pixeles (Fotos lizas lo más recomendado).. o trata de realizar un buen trabajo. Si sos experto en photoshop, esto va ser pan comido para vos)

CUALQUIER DUDA PREGUNTAR, ESPERO QUE LES SEA UTIL :

Blog [Fácil de Personalizar]

Dejá tu comentario

Autor del Post