Cuando se tienen pocos o ningún conocimiento de programación web, copiar y pegar es el recurso más fácil y socorrido para conseguir modificar una plantilla siguiendo las instrucciones de otros. El problema viene cuando las referencias que citan para localizar el lugar dónde insertar el código que nos facilitan, no coinciden exactamente con las líneas de nuestra plantilla. Si encima sólo me dicen cosas como que pegue ese algo en la parte CSS, ya sí que me han fastidiado bien ¿dónde narices está eso?Creo que conocer la estructura de la plantilla Blogger, aunque sea básicamente, ayuda bastante no sólo a ir siguiendo instrucciones, sino también a poder incluir modificaciones por nosotros mismos. Y eso es lo que vamos a intentar explicar a continuación.
Una plantilla Blogger tiene en un principio la misma estructura que cualquier otra página web:
<HTML> <HEAD> <TITLE>Título página</TITLE> </HEAD> <BODY> Contenido </BODY> </HTML>
Lo que veis entre los símbolos < y > son etiquetas HTML o tags. Cada etiqueta tiene que tener necesariamente su correspondiente cierre, que consiste en una etiqueta igual pero con una barra delante de su nombre. Entre ambas es dónde se tiene que poner el contenido que corresponda. A propósito, comentar que el hecho de que los símbolos antes mencionados sirvan para definir etiquetas HTML, es el motivo por el cual cuando intentais pegar código en un comentario o en una entrada, este no sale. El navegador interpreta que lo que viene detrás es código y sencillamente no lo muestra, sino que lo interpreta. Ya vimos anteriormente la forma de publicar código "visible", así que eso lo saltamos.
Como podeis ver en el código anterior, toda la página tiene que estar entre etiquetas HTML, cosa imprescindible cuando se usa este lenguaje. Anidados dentro de estas dos etiquetas, podemos ver también dos bloques diferenciados: HEAD y BODY.Dentro de HEAD (cabeza, cabecera) se detalla el prólogo del resto del archivo. Habitualmente son pocas las tags que van dentro de ella, pero como veremos, en Blogger se suele incluir algo muy importante: el estilo. Destaca la etiqueta TITLE que da título a la página y que es lo que luego se verá en la pestaña del navegador. En esta que estais leyendo, ese título coincide casi con el título del post: Blogger. Estructura básica de la plantilla || Oloblogger. Para saber cómo cambiar esos títulos, podeis acceder a la entrada Cambiar títulos de páginas.
Dentro de BODY va el resto del contenido del documento y para estructurar toda la información que allí mostramos, se utilizan DIV's que van formando los distintos bloques de información.
Pero antes de seguir, volvamos al HEAD. Aquí es dónde pueden ir las instrucciones que darán determinada apariencia a nuestro blog: el estilo o CSS. Lo más recomendable para una página web estándar (por llamarles de alguna manera), es que la hoja de estilo esté en un documento aparte y que la página en cuestión sólo se ocupe de cargar esos datos mediante una solicitud del tipo <link href="mihojadeestilo.css" rel="stylesheet" type="text/css">
Otra manera (menos eficiente) de hacer lo mismo, es mediante la inclusión directa dentro de HEAD, de la etiqueta <STYLE> y entre ella y su cierre, todos los selectores, clases, ID's... con sus correspondientes propiedades o atributos CSS. Esta segunda es la opción que utiliza Blogger, pero para rizar el rizo, no utiliza STYLE sino algo un poco más largo que incluye la palabra mágica SKIN (piel, carátula)...
<HTML> <HEAD> <TITLE>Título página</TITLE> <b:skin><!--[CDATA[/* Código CSS ]]--></b:skin> </HEAD> <BODY> Contenido </BODY> </HTML>
Este es un ejemplo de código tipo CSS del que os encontrareis entre dichas etiquetas SKIN. En este caso, define el aspecto general de las entradas (siempre que se haya utilizado ese mismo nombre para ello):
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Así que ya sabemos que toda la parte de estilo está entre las citadas etiquetas SKIN. Por comodidad, las incorporaciones de nuevas clases (selectores) se suelen hacer justo antes del cierre, de manera que si luego queremos quitarlas para deshacer el cambio, las localizaremos rápidamente. Si los selectores son subclases de otras ya definidas, lo normal será insertarlas a continuación de las clases principales. Esto sólo es por tener una plantilla lo más ordenada posible. No afecta al resultado.
.post {
background:#ffffff;
}
.post ul {
list-style-type:none;
}
background:#ffffff;
}
.post ul {
list-style-type:none;
}
Y como esto está quedando ya muy largo, el resto del contenido del HEAD y el del BODY lo dejamos para otra entrada.
Tarea para casa: localizar en vuestra plantilla los títulos de las páginas y la parte de código CSS ;)
Actualización: Estructura básica de la plantilla II.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Exelente explicacion!!!
ResponderEliminarEspero con ansias el la segunda parte:)
saludoS!!
y porcierto muy bueno el gif del head y el body :)
Enorabuena, tienes razon casi siempre las modificaciones se hacen copiando y pegando.
ResponderEliminarMe apunto "por si pasas lista a la clase"
Amigo Oloman,
ResponderEliminarTendrías que cobrar honorarios por estas lecciones magistrales que nos das. ¡Y todo esto de gratis!
De bien seguro que los de Blogger tendrían que asignarte un suel fijo por la labor que haces.
Un abrazo,
Antonio
Donde dice
ResponderEliminarasignarte un suel fijo por la labor que haces.
quise decir
asignarte un sueldo fijo por la labor que haces.
Excelente, siempre había querido un esquema así, estaré pendiente de lo que viene :-)
ResponderEliminarBilosony2™ el gif es un poco cutre, pero no se me ocurrió otra manera mejor de explicarlo con una imagen.
ResponderEliminarNolo, no suelo pasar lista, pero por si acaso, trae el trabajo hecho la próxima vez :)
Antonio, la errata no impedía entender lo que decías, pero el número de personas que hacen cosas de este tipo en otros blogs, sí que impide que Blogger nos pueda poner un sueldo, sin una merma importante en su cuenta de resultados.
Silvi, por aquí seguiremos.
Than youuuuu
ResponderEliminarHola....no se si estará bien que lo pida...pero me estoy volviendo loca....y no consigo darme cuenta cual de todas las cosas que le hice a mi pobre plantilla es la que lo desmotó todo...si me pueden ayudar porfiiiiiiiiis!!!! no se por que en la primera página los post salen de un tamaño....y a partir de ahí se hacen más anchos...bueno....tampoco todos, y en elementos de página...la parte de las entradas y las dos columnas laterales...solo ocupan la mitad de la plantilla....no entiendo nada...es mi culpa por no hacer la maldita copia de seguridad y encima ponerme a jod....con el código sin saber y sin dormir...PERO QUIERO RECUPERAR MI BLOG COMO ESTABAAAA....PLEASE...juro que después de eso no lo toco más...
ResponderEliminarun beso y gracias
Nona ¿qué quiere decir más anchas? A simple vista parecen todas iguales ¿o es que ya lo arreglaste?
ResponderEliminarHola!Lle vo ya un tiempo intentando entender esto del html y el css pero es que no lo pillo. Quiero crear una nueva plantilla para mi blog y no soy capaz. ¿Podrías decirme exactamente el código que tengo que pegar para que aparezca un fondo con una imagen que yo quiera una columna a la derecha, y un cabecero? Y otra pregunta: Si yo creo mi propia plantilla despues puedo poner las aplicaciones de blogger, tipo: los seguidores, las pestañas...? Por favor echame una mano que me estoy volviendo loca!!Gracias
ResponderEliminarwww.meencantamiropa.blogspot.com
Marta, me voy a permitir recomendarte esta entrada. Ahí se explica brevemente una nueva utilidad de Blogger que te va a facilitar mucho eso que quieres hacer. Suerte.
ResponderEliminarEs facinante ver un blog como este, es una toda una página web con la automatizacion de blogger, y casi nadie ayuda a otros bloggers, Yo también recien modifique la plantilla de mi blog hace 2 dias, hoy es el tercero y estoy modificando las variables, con la nueva forma de diseñador de plantillas, todavia me falta ver sobre la modificacion de los gadgets, esta página es de gran ayuda ;)
ResponderEliminarPues suerte con ello RubnNV
ResponderEliminarHola recién llego al mundo blog, y encontrarme contigo ha sido un milagro. Llevo en esto de la informática desde que las pantallas eran negras y escribías en verde fosforito, pero hasta ahora no vi que yo podía interactuar, y eso es lo que pretendo.
ResponderEliminarGracias por echar una mano.
No hay de qué Isabel. Sólo acuérdate de pasar por aquí cuando aprendas cosas y gustes en compartirlas. Saludos.
ResponderEliminarHola Oloman, no se donde poner esta cuestión, por mas que he mirado.
ResponderEliminarEs la siguiente: desde hace un tiempo resulta que cuando bajo al final de mi blog, acaba toda la informacion y sigue un espacio en blanco que quiero eliminar y no se como, no se si he puesto algun fragmento de codigo que alarga la pagina, no sé.
No se si me puedes ayudar, de cualquier forma gracias muchas...
Aborico, después de esto...
ResponderEliminar...<a href="http://aborico.blogspot.com/p/aviso-legal.html">Aviso Legal</a> l <strong><a href="http://aborico.blogspot.com/">Aborico</a> 2009</strong>
...tienes un montón de <br/> que provocan ese salto. Echale un vistazo a la plantilla.
La Virgen .......... eres mi idolo, toma de mi lo que quieras, jajaja
ResponderEliminarUn abrazo y gracias mil
Si eres varón lo dejamos para otra ocasión. Soy hetero :D
ResponderEliminarHola! acabo de encontrar tu blog y me parece genial! el motivo de mi búsqueda es porque estoy rediseñando uno de mis blog`s y la cabecera del diseño no la puedo editar porque no aparece la pestaña de editar sino la imagen directamente, esto nunca me había pasado, ahora quiero cambiar la imagen y no puedo hacerlo...me podrías ayudar?
ResponderEliminarMuchas Gracias
Susan, explicado con detalle aquí.
ResponderEliminarSaludos.
Simplemente cojonudo
ResponderEliminarhola buena explicacion queria preguntar si me pueden alludar con mi blog
ResponderEliminar-tiene un ploblema de comentarios es decir no se pueden dejar comentarios y e intentado areglarlo pero no e podido
mi blog :
http://animelegends-x.tk/
saludos
Nagato, acabo de dejar un comentario sin problemas...
ResponderEliminarlo siento oloman se me olvido comentar pero decidi crear denuevo el blog con la plantilla mas actualizada
ResponderEliminaresta era la plantilla :
http://nagato17.blogspot.com/
gracias por la ayuda = :)
saludos
hola a todos.. mi pregunta es que tengo una plantilla .css pero al ingresarla en blogger obviamente con los pasos mencionados me sale error como hago para que no me aparezca
ResponderEliminarKatensa, no sé cómo lo estás haciendo para intentar incorporar una plantilla determinada a tu blog, pero ya te advierto de que Blogger es algo especial para eso.
ResponderEliminarEn otras plataformas, se crea una hoja de estilo (.css) en un fichero aparte y luego se incorpora mediante la etiqueta LINK a la página. Esto también se puede hacer en Blogger, pero sólo para algunas pocas cosas.
Hay artilugios propios imprescindibles que guardan y muestran los comentarios, entradas, etc. Entonces, una plantilla Blogger debe incluir todas esas cosas y no sirve cualquiera que encuentres. Tienes que usar plantillas específicas para Blogger.
Oloman, Tengo una preguntica! en que parte de la plantilla es que tengo que colocar los botones sociales (Facebook, twitter, bitacoras) Para que me queden arriba del texto... similar a como tu los tienes. En la parte de arriba.
ResponderEliminarEn tu caso, Arte Digital, encima de dónde tienes las etiquetas. Es decir, antes de
ResponderEliminar<span class="post-labels" style="">
Hola oloman paso a molestarte por aqui, tengo un problema con una plantilla resulta que tiene un sistema de sumarios para las entradas y mi problema es que tambien las aplica a las paginas, es decir a las paginas que secrean con el comando crear pagina y pues no puedo hacer ningun link a una pagina sin que este acortada por el sistema de sumarios, el link al codigo html de la plantilla este http://goo.gl/AMGPL si me peudes dar una guia por favor para solucionar esto te lo agradeceria mucho.
ResponderEliminarEl problema seguro que es de las condiciones que usas en la parte de DATA:POST.BODY, Dreamare. Echa un vistazo a la segunda parte de este post (http://goo.gl/NbDxF)e intenta replicar la estructura de los IF - ELSE. No es necesario que modifiques nada en el script y si no te digo que copies exactamente esa parte, es porque quizás tu llamada al script, no sea exactamente igual.
ResponderEliminarWow soy tan feliz de haber encontrado este blog, yo soy una blogger súper, súper principiante pero he tenido la fortuna de encontrar tutoriales buenísimos que me han ayudado a optimizar bastante mi blog y gracias a ello recibo de 1500 a 2500 visitas diarias. Aunque le he hecho de todo a mi blog me considero principiante porque como bien comentas soy de las muchas personasque se dedican al copy- paste sin tener ni idea de lo que estan haciendo, por eso quisiera pedirte si me puedes decir de mi blog:
ResponderEliminarhttp://nocturna-scarlett.blogspot.mx/
¿Cómo puedo mover los botones de redes sociales para que queden por debajo del enlace ...CONTUNÚA »?
Hola.
ResponderEliminarEn tu plantilla tienes dos capas DIVS que construyen esas dos partes. Una tiene la clase post-share-buttons y corresponde a los botones y la otra tiene la clase jump-link, que es la del corte (CONTUNÚA). Lo único que tienes que hacer es cortar uno de los DIV y todo su contenido hasta el cierre correspondiente (/DIV) y moverlo delante (o detrás según cual muevas) del otro.
Mil gracias, fue más fácil de lo que pensé, aprovechándome un poco de tu paciencia tengo otra duda, el Analizador SEO de Bing me dice que Falta la etiqueta {h1} y la acción recomendada es agregar un encabezado a la página mediante una etiqueta {h1} e incluirla dentro de la etiqueta {body} del código fuente de la página.
EliminarUna vez más no tengo idea de como hacerlo ya que aún con los artilugios expandidos no encuentro la etiqueta {body}, ¿me podrías decir que debo hacer?
Body si tienes -con total seguridad porque si no no existiría el blog-, pero H1 no. Ese encabezamiento se lo deberías poner al título del blog, en la parte HTML (dentro del body XD):
Eliminar<div class="region-inner header-inner">
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
POR AQUÍ MÁS O MENOS
Déjame ver si entendí, lo que hice fue poner la etiqueta [h1] justo después de la cabecera o algo así ¿no?
ResponderEliminarYo creo q me voy a poner a estudiar lenguaje HTML porque prefiero saber el ¿por qué? y no ¿cómo se hacen las cosas?
Con esto de mi blog siento como si estuviera tratando de ligarme a un alemán y mi cuate que sabe idiomas me recomendara que decirle, quizá lo que hago está funcionando, pero no tengo ni la menor idea de lo que pasa en realidad, me tendré que poner a investigar más a fondo.
Nuevamente gracias por tu tiempo y tu paciencia.
Las etiquetas Hx son unas marcas de encabezados (Header) y los números indican la relevancia. H1 es para el más importante (en un principio el título del blog), H2 para la siguiente (por ejemplo, títulos del post)... y así sucesivamente. En el ámbito SEO, la manera en que etiquetas cada cosa es importante, pero tampoco te has de comer mucho el coco con ello.
EliminarNinguna Roberto. Todo lo que publiques en la Red puede ser copiado de una manera u otra.
ResponderEliminarHola! Te he hablado antes por Twitter y me dijiste que me pasara por aquí :) Verás, estoy editando una plantilla partiendo de la plantilla Axis (http://demo.fabthemes.com/axis/) para un blog sobre un role player inspirado en Harry Potter. Le he puesto un menú desplegable en la parte superior, y como me impedía navegar por los menús, conseguí bajar un poco la descripción, (aunque me gustaría que quedara más abajo, en el final, y si pudiera ser posible que desapareciera la linea roja que "carga" la imagen que quedaba completamente arriba) También me gustaría que en el título de la imagen se pudiera incluir un enlace para ir a una entrada o página determinada. ¿Podría ser posible hacer estos cambios? Te dejo la página en la que he llevado a cabo estos cambios, por el momento: http://miblogdepruebas83.blogspot.com.es/
ResponderEliminarDe antemano, muchísimas gracias ^^
Hola Staff SHPF
EliminarComenzamos con lo de la barra roja. Puedes hacerla desaparecer, pero quizás te guste más "llevarla a su sitio". Prueba a localizar este código en tu plantilla y en ese TOP dónde pone 260px, cambia esa cifra por un 60px:
#progress-back {
z-index: 5;
position: fixed;
top: 260px; /* Cambiar esto por 60px */
left: 0;
height: 2px;
...
Si definitivamente la quieres borrar, entonces añade ahí dentro un display: none; y desaparecerá.
Para cambiar el rótulo del slider, busca esto otro:
#slidedetail {
width: 60%;
margin: 400px 0px 0px 40px;
background: url(http://1.bp.blogspot.com/-WB-v-DtdKCU/T9an83PwYaI/AAAAAAAADwk/jW0TUtExZWs/s000/bg-black.png);
position: relative;
padding: 20px 20px;
}
Lo tienes que sustituir por esto:
#slidedetail {
width: 100%;
margin: 0;
background: url(http://1.bp.blogspot.com/-WB-v-DtdKCU/T9an83PwYaI/AAAAAAAADwk/jW0TUtExZWs/s000/bg-black.png);
position: absolute;
padding: 20px 20px;
box-sizing: border-box;
bottom: 30px;
left: 0;
}