Como Editar tu blog - Presentation Transcript

1. Presenta: ¿Editar un blog es difícil? 2. Para empezar con este práctico tutorial, tengo dos indicaciones por seguridad: 1.

Entra a tu blog, en la pestaña diseño busca la opción “edición HTML”, y haz clic, tal y como lo muestra la imagen. Acto seguido vas al cuadro donde esta escrita la plantilla en códigos HTML, y copias todo el texto en una hoja word o block de notas. Todo esto es con el fin de que si en la edición de tu plantilla cometes errores y no obtienes los resultados que buscas, tengas respaldada tu información previa. Para que así la puedas volver a poner y listo. INTRODUCCIÓN

3. ¿Como crear una segunda, tercera o más columnas laterales? Primero debes saber que las columnas laterales en un Blog y en idioma HTML, son llamados sidebar . También debes tener en claro que todas las plantillas de los blogs, son distintas así que debes tomar este tutorial, como un ejemplo, y tienes que tomar lo que mejor te ayude. 1º Tienen que ver la plantilla, en un comienzo les costará entenderla pero intentando y con persistencia les aseguro que resultará. Tienen que ir a la sección que dice “/* Variable definitions “ , dentro de esta parte, están ==================== situadas todas las variables de tu blog, lo que es texto color, etc; ustedes deben buscar en todas las variables, las que tengan el nombre sidebar. Como se ve en la imagen, en mi plantilla solo aparecía las variables de “sidebarBgColor1” y la “sidebarBgColor2 ”, ambas corresponden a la columna 1 y 2. Para la tercera columna copio la variable “ siderbarBgColor2” debajo de las dos variables anteriores y le cambio el nombre de “siderbarBgColor2” a “siderbarBgColor3”, y la que me resulta es la variable que queda en verde, como muestra la imagen.

4. 2º Después sigues bajando, y buscas la sección con el nombre “ /* Content ” es en esta donde está el contenido de tu blog. Primero tienes que ubicar la siguiente imagen: En esos códigos ubican el que dice “ width ” que significa anchura. En i blog vino con 950px, y como ven lo modifique a 1100px si deseas puedes poner 100% para facilitar el trabajo. 3º Después sigues bajando, y ubicaras los códigos de cada sidebar, tal y como se ve en la imagen, deben hacer el mismo paso de las variables, en este caso yo copie la información del “ #sidebar2-wrapper {“ , y le cambie el nombre a “#sidebar3-wrapper {” , y me quedo como pueden apreciar en la imagen con sombreado verde.

5. 4º Después encontrarán la sección “ `/* Left Sidebar Content”, la cual no modificaremos, sigues bajando y encontrarás /*Right Sidebar Content , en la Que verás resaltado en verde, cada parte tiene el nombre de sidebar2 , ya que corresponde a la segunda columna. Como nosotros queremos crear una tercera columna, copiamos toda la información de esa sidebar, y los nombres resaltados se cambian por sidebar3, en mi plantilla, al modificar esto, la tercera columna quedo tal y como muestra la imagen de la derecha. Si se dan cuenta todo lo resaltado con amarillo, son los nombres de sidebar2, modificados por sidebar3.

6. 5º Por último el paso final, siguen bajando y encontrarán la sección “/* Footer”, siguen bajando y llegarán a unos códigos más raros, el que deben encontrar para sentirse encaminados es el <div id='sidebar-wrapper'>, si lo encontraron siguen bajando hasta encontrar <div id='sidebar2-wrapper'> que representa la segunda

columna entonces copian esa información y cambian el nombre a <div id='sidebar3-wrapper'>, tal y como muestra la siguiente imagen: Quedará tal y como muestra la imagen, mi resultado fue los códigos que están sombreados, obviamente que el contenido de esa parte no es tal igual a la sidebar2, porque yo ya la modifique, cosa que harán uds, después de lograr la tercera columna. Los resultados quedarán como se muestra en el siguiente blog: http://www.renato-tube.blogspot.com Finalmente haces clic en GUARDAR y a disfrutar de tu blog.

7. FIN Tutorial hecho por : Renato-tube. Patrocinado por: El ocio de Renato. Visita: http://www.renato-tube.blogspot.com