MR.BLOGG

"Regala un pescado a un hombre y le darás alimento para un día, enséñale a pescar y lo alimentarás para el resto de su vida" (Proverbio chino)...
Cualquier mago que se precie, si quiere ser considerado como tal, debe por empezar con los trucos básicos, para, posteriormente realizar aquellos mas asombrosos y espectaculares. Podemos hacer magia con cartas, magia con monedas, magia con libros,..., y, podemos hacer magia a través de Internet. ¿Como? Haciendo que lo que pensamos o escribimos puedan verlo los demás desde la silla de su casa, sin moverse de su ciudad. Es como la magia de la tele, pero, con un ordenador. Cuanto más espectacular sea la forma en que el otro lo vea, mayor éxito tendremos. Por tanto, nuestra "hoja de papel" debe ser lo más atractiva visualmente posible...Pues bien, de eso se trata... Ayer, después de varias intentonas, conseguí crear mi blog. Y, quiero, desde aquí compartir los frutos de mi trabajo, ya que si alguien se decide alguna vez a hacer otro, creo que esto le va a poder ayudar.
Así que vamos a ello...


Material necesario:
Unas cuantas dosis de paciencia (cada cual la que tenga).
Otras tantas de reciclaje de todo aquello que sepa acerca de la Informática
Algo de Ingles :a mí con el que tengo que es Begginer,y, un diccionario de Internet me valió.
Conocimientos de Photoshop, o, cualquier programa de tratamiento de Imagen.
Darse de alta en un hospedaje de fotos en Internet
Y, lo más fundamental, y, regla básica: El método Prueba- Error. Es decir, si no funciona de una manera, probar de otra.
Nota importante

Tened en cuenta que todo lo que publiquéis en vuestro blog deberá ser ó de vuestra propia cosecha o "free". De otra manera estaríamos cayendo en plagio.


Primeros pasos
Antes de hacer nada, deberéis de pensar que es lo que queréis contar, ya que esa idea será la base principal del blog, y, de la que dependerá todo lo demás.
  • Una vez que tengáis la idea, deberéis de pensar también (así pensamos un rato que de vez en cuando no está de más) si queréis que vuestro blog sea funcional, u original, o una mezcla de ambos. Me explico un poco mejor. Pongamos por ejemplo que queréis poner un contador para ver el número de visitas de vuestra página. Podéis buscar uno "free" sencillito sin necesidad de registrarse en ninguna página ó bien, uno "fashion", que o bien requiere registro o previo pago. La elección es libre. En mi caso como vereis es funcional a tope.
  • Deberéis elegir donde queréis que este alojado vuestro blog (es decir un hospedaje). El mío está en blogger, pero, hay alguno que otro más. Yo os explicare los pasos que he seguido en blogger.
  • Entras en la página de blogger, te das de alta y sigues los pasos que te van indicando.
  • La primera parte es muy sencilla, y, lo "retorcido", por no decir otra cosa es cuando llegas al tema de la PLANTILLA, ya que es aquí donde se encuentra "la madre de todas las batallas". Para esto utilizaré otro punto
  • LA PLANTILLA: Así, subrayado y en negrita. La plantilla va a ser nuestra carta de presentación ante el resto de espectadores, y, donde vamos a invertir unas cuantas horas para darle la apariencia que nosotros queramos. Tenemos dos opciones:
  1. Crear una 100% propia. Lo positivo: que será única. Lo negativo: Necesitamos saber lenguaje XML o CSS
  2. Elegir una de las que te ofrece blogger, y, el resto será escribir lo que queramos. Lo más positivo que tiene es que te da la mayor parte del trabajo hecha. Lo más negativo, es que no será nada original, y, tendremos poco donde elegir.
  3. Buscar una "free" por Internet y a partir de ahí modificarla. Cuando la busquemos tendremos que tener pensada ya la estructura de nuestro blog, pues las ahí con una columna, dos, tres y cuatro. Lo más positivo: Tienes más donde elegir. Lo más negativo: Cuando estáis en DISEÑO, la mayoría de las opciones para modificar la plantilla están inhabilitadas y hay que tocar  el código XML

  • Una vez aclarado el punto anterior prosigamos con la explicación. Si optáis por el punto número tres, es decir "plantilla free", lo único que tendréis es que previamente descargarla en vuestro PC y subir posteriormente el archivo xml.
  • Pues, si habéis hecho todo correctamente, cuando le deis a finalizar, ya tendréis vuestro blog creado.
Un inciso y ahora proseguimos....

...bien, finalizado dicho inciso es hora de seguir....
Una vez creado nuestro blog accederemos a él para ver como nos ha quedado. De momento, nada original ya que hemos utilizado una plantilla prediseñada. Dice mucho de otros, pero, nada de nosotros. Y otra cosa más, si entramos en Diseño- Diseño de páginas, vemos que la mayoría de las opciones han quedado desactivadas, por tanto, no nos quedará mas remedio que entrar en Diseño - Edición HTML, armarnos de paciencia, y, empezar a modificar cosas siguiendo el metodo prueba-error, ya que hay veces que haremos cambios que ni siquiera veremos en la "Vista previa". Aunque lo pone bien claro, recordar "Guardar la plantilla" con los cambios que nos convencen, y, así si cometemos un error "mu gordo" siempre podremos retroceder para empezar de nuevo.
Cuando vamos a salir de "fiesta", nos acicalamos, empolvamos, y, buscamos nuestros mejores trapos para "ser lo más". Pues esto, es un poco de lo mismo. Vamos a salir con nuestro blog de fiesta y queremos hacernos notar. Lo primero que vamos a modificar es el "body" y para hacerlo primero nos daremos la curra en Photoshop, creando una imagen  que sea acorde con el titulo del blog. Luego subiremos la foto a un hospedaje  - hay varios-, cada cual que elija el que quiera-. Copia el link de la foto y sustituye el que había por el tuyo. Ahora bien, ¿Donde está el "body"? Lo que deberéis de buscar es lo siguiente...
body {
background:url("http://lh6.ggpht.com/_i2w31O07HJ8/TJolsbEqZiI/AAAAAAAAAHc/H7IQrzobi9s/s512/Cuerpo%20Blogg.jpg") repeat scroll 0 0 transparent;
color:$textcolor;
font:small Georgia Serif;
margin:0;
text-align:center;
Y, como vereis, la parte subrayada es en la que tendreís que poner el link de vuestra foto. Y, con esto, ya estamos vestidos.
  •  Vale, ya tenemos el fondo "trasero". Ahora vamos a "lavarnos" un poco la cara. Para esto lo más sencillo es currarnos otra segunda foto en Photoshop, pero, con el inciso de que la tenemos que hacer de la misma medida que figura en el header-wrapper. Para ver dichas medidas entramos en Diseño- Edición Html y buscamos esa línea, apuntamos las medidas y con esas medidas trabajamos en Photoshop. Si incluís el titulo en la propia imagen adelantaréis bastante trabajo. Con la imagen hecha, vamos a Diseño - Elementos de la página - Cabecera -Editar y cargamos nuestra imagen. Damos a Vista previa para ver como queda. ¿Que no nos gusta? Pues elegimos una de las otras opciones que se nos ofrece.
  • Ya estamos "a medio vestir" y "recién lavados". Lo siguiente es el maquillaje. Por tanto, toca modificar el color de los textos, y del "fondo principal". Antes de hacerlo, nos levantamos un rato de la silla del ordenador y nos vamos a tomar un café, dar una vuelta, echar unas risas,..., porque la tarea es larga.
Primero, buscaremos en Internet una página donde vengan los COLORES HEXADECIMALES por código -poner esto en vuestro buscador y es una de las primeras-, y la siguiente que debéis de buscar es aquella que os permita meter un código y os de el color a que corresponde. Yo, no os las pongo, porque lo mismo lo hago y me "cuelgan" del palo mayor.
Los colores en HTML van con códigos hexadecimales y por tanto es necesario saber dichos códigos. Para que veáis lo que es os pongo la primera sesión de maquillaje.
  1.  Buscamos lo siguiente...
    .
    .post {
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhigjU61IPavBm1Ix5a1M9QT-Ul37_z4opGUFECgJswGu27n5CxLOa4DDl7vWUjHiRTu3OpkkuElVAqTQVp_r9YBxChLvoxUOKnDnLOV1LsGDTcBNVLYs2apwERNeg9J_6lF7CpyWz3vIcN/s1600/fade.png") repeat-x scroll 0 0 #FFFFFF;
    border:1px solid #FF0000;
    margin:0 0 1.5em;
    padding:10px 10px 0;
    }

    Buscamos .post { y suprimimos la parte subrayada en azul. ¿Que no está y está directamente la linea de abajo? Mejor para vosotros. ¿Que no es así? Lo dicho, suprimimos y añadimos la siguiente fila debajo de post
    background: #FFFFFF;

    y colocamos en lugar de #FFFFFF; el color que queramos. Con esto modificamos el color de fondo de todas las entradas.
         #FFFFFF este es el código hexadecimal del que os hablaba

Sigamos con la explicación...

Una vez que ya hemos modificado el color del fondo, vamos a ir modificando más colores de otras zonas y así poco a poco iremos haciendo un poco más personal nuestro blog.
  • Para modificar el color de la Sidebar...
Para ello deberemos de buscar el siguiente código

h2 {
border-bottom:1px solid #FF0000;
font:$headerfont;
color:$sidebarcolor;
letter-spacing:0;
margin:0;
text-transform:none;

y cambiar el código hexadecimal que aparece por el que nos guste. En este caso lo pone de color rojo.
  • Para modificar el color de la fecha de entrada
Buscamos el código

h2.date-header {
border:medium none;
color:#0101DF;
font:12px arial;
letter-spacing:0;
margin:0 0 1px;
padding:0 10px 0 0;
text-align:right;
text-transform:none;

Y de nuevo modificamos el código hexadecimal. En este caso pone el color azul.

  • Modificar el color del borde de las entradas
De nuevo buscamos otro parte del HTML

post {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhigjU61IPavBm1Ix5a1M9QT-Ul37_z4opGUFECgJswGu27n5CxLOa4DDl7vWUjHiRTu3OpkkuElVAqTQVp_r9YBxChLvoxUOKnDnLOV1LsGDTcBNVLYs2apwERNeg9J_6lF7CpyWz3vIcN/s1600/fade.png") repeat-x scroll 0 0 #FFFFFF;
border:1px solid #FF0000;
margin:0 0 1.5em;
padding:10px 10px 0;


Y sustituimos el código hexadecimal por el color que queramos
  • Modificar el color del texto de las entradas
Buscamos esta parte en el código HTML


body {
background:url("http://lh6.ggpht.com/_i2w31O07HJ8/TJolsbEqZiI/AAAAAAAAAHc/H7IQrzobi9s/s512/Cuerpo%20Blogg.jpg") repeat scroll 0 0 transparent;
color:#0404B4;
font:small Georgia Serif;
margin:0;
text-align:center
Y nuevamente modificamos el código hexadecimal.
  • Modificar el color de la parte superior de la entrada
Buscamos está parte del código HTML
 
#main-wrapper {
Y añadimos la siguiente línea
background:$bgcolor;
 Sustituimos $bgcolor; por el color que querámos y con esto ya tendríamos otra parte más "maquillada"

  • Cambiar el color de las páginas estáticas
Una página estática es una página individual, independiente de la principal donde querámos monstrar un determinado contenido fijo. En mi caso MR. BLOGG, ya que es como un pequeño tutorial para no naufragar en blogger.
Hecha está pequeña explicación, para modificar su aspecto deberemos de hacer lo siguiente....

Entrar en Diseño > Edición de HTML y pega antes de ]]></b:skin> lo siguiente:
/* Menú de páginas
----------------------------------------------- */
#PageList1 {
width: 100%;
border: 1px solid #625e00; /* Color del borde del menú */
background-color: #E0ECF8; /* Color de fondo */
}
#PageList1 ul li a {
color: #000; /* Color de los enlaces */
text-decoration: none;
font-weight: bold;
padding-right: 20px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWBgFJjtBUWVxrLKXI7f9gm4VoO0t_qk_wSLCOInLKwmCbAKADzkKIw-5Je3rzmRoHJ8-fgJFL38-Y_8893asCBpgo0YGJH0r65S88J2shv2lSKNc82yVrjEU_DsoBej7h6YaiL1I7euQ/s320/vertical.gif) center right no-repeat;
}
#PageList1 ul li a:hover {
color: #ccc; /* Color del texto al pasar el mouse */
position: relative;
left: 1px;
top: 1px;
}
 

Bueno, ahora que hemos personalizado un poco más nuestro blogg, podemos subir algún material de nuestra propia cosecha - tipo tutorial- para ayudar a aquella persona que lo necesite. Una forma sencilla de hacerlo es crear nuestro tutorial en Word y posteriormente subirlo en formato pdf. De este modo la gente puede "descargarlo". Los pasos son los siguientes...

  1. Si ya tenemos el archivo que queremos subir, nos saltaremos este primer paso y empezaremos por el segundo. En caso contrario, deberemos de convertir nuestro documento en pdf. Para ello hay sitios en Internet que nos permitén crearlos de forma gratuita., y, lo único que nos solicitan es la cuenta de correo a la cual quieren que nos lo envien.

  1. Una vez que tenemos el pdf creado nos vamos a Google docs, donde con el nombre de usuario y contraseña que utilizamos para blogger nos logaremos.

  1. Una vez logados , damos a upload y en la siguiente pantalla daremos a Select files to upload. Buscamos donde está nuestro archivo y comenzamos a subirle.


  1. Una vez subido, debemos poner el archivo como PÚBLICO para que todo el mundo pueda acceder a él. Para ello seleccionaremos el archivo y en la parte superior donde pone SHARE, picaremos, eligiremos share settings y lo pondremos como público. Guardamos los cambios y abrimos el pdf.. Al hacerlo en la parte derecha nos aparecen dos links. Copiamos el primero que nos aparece
  2. Volvemos a nuestro blog y le damos a crear Entrada nueva. Ponemos un titulo para referenciar nuestra entrada y posteriormente damos a enlace, donde insertaremos el enlace que copiamos. Y, posteriormente lo comprobamos

  1. El último paso es vista previa y publicar.


Y con esto ya tendríamos el pdf en nuestro blogg. Un ejemplo lo teneis en la página principal, en la entrada del 05/10/10 titulada "Como crear un gif"



No hay comentarios:

Publicar un comentario

Suscribirse a: Comentarios (Atom)