Me hablan en muchos sitios de HTML, de CSS... y no tengo ni pajolera de a que se refieren. Como mucho llego a copiar y pegar y... ¡a veces me funciona!"
Si estás en esa situación, bienvenido a esta clase nivel BPT para intentar aclararte que es cada cosa, para qué sirve y como distinguirlas.
En Blogger, básicamente encontrarás dos tipos de código: HTML y CSS. Ambos son "lenguajes" que vuestro navegador interpretará de determinada manera para que una página se muestre tal y como tú la ves.
HTMLHyperText Markup Language = Lenguaje de Marcado de HiperTexto. Con él se diseña la estructura de la página: Cabecera, cuerpo/s, pie, barra lateral... También mediante HTML introducimos nuestro texto, imágenes, enlaces, etc.
Por ejemplo, si tecleamos
<div width="400px" height="200px">HOLA QUE TAL</div>
estamos diciéndole al navegador que nos reserve un espacio (DIV - /DIV) de 400x200 pixels (WIDTH + HEIGHT) y que dentro de él nos escriba HOLA QUE TAL.
Siendo muy puristas, Blogger funciona con XHTML que es una versión avanzada de XML y una evolución de HTML. Pero para nuestro fin, podemos considerar perfectamente que hablamos del mismo lenguaje.
CSSCascading Style Sheets = Hojas de Estilo en Cascada. Este es un código complementario del HTML que sirve para separar el contenido del formato. La hoja de estilo controlará precisamente el formato, la apariencia de la página.
Si en una página hago una referencia a un CSS, ésta se mostrará con el formato preestablecido. Si en todas mis páginas escribo una línea que "llama" a mi hoja de estilo, todas las páginas tendrán el mismo formato y no tendré que teclear todo el código correspondiente al formato en todas y cada una de ellas.
Si además un buen día, pretendo cambiar alguna cosa, como por ejemplo el tamaño de la letra, sólo tendré que cambiar ese parámetro en el archivo CSS y se cambiará en todas a la vez. Si no existiera, tendría que modificar una a una todas las páginas. Realmente es una gran ventaja.
Un ejemplo de instrucción CSS sería
background: #000000;
Se deduce pues, que el HTML es imprescindible para crear una página o una web entera, pero que las Hojas de Estilo no son absolutamente necesarias, pero sí muy recomendables.Habreis visto ya que hay diferencias en la formulación de ambos códigos. HTML funciona con TAGS (etiquetas) que van entre los símbolos < ... >. Un tag de apertura y otro de cierre que tiene el símbolo /. Entre ambos irá texto u otros elementos HTML.
Ejemplo de HTML
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
En CSS se declara una etiqueta y entre corchetes {...} se ponen las intrucciones,
Ejemplo de CSS
body {
background:$bgcolor;
margin:0 5px 0 5px;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
background:$bgcolor;
margin:0 5px 0 5px;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Cuando se crea una web, cada página será un fichero distinto terminado en .htm o .html y la hoja de estilo será otro fichero también distinto, con extensión .css. En cada página .htm se invocará con una instrucción (una línea de código), al fichero de la hoja de estilo. Así, el navegador cargará los datos, pero con ese formato que nosotros hemos diseñado para nuestro espacio.
Se pueden crear distintos estilos para distintas páginas dentro de la misma web. Sólo hay que llamar desde cada página al estilo que se quiera poner, aunque lo cómodo y lo estético, como se ha comentado, es que haya una hoja de estilo común.
.../...
Dentro de ciertas etiquetas de HTML, se pueden incorporar instrucciones de CSS, mediante el tag STYLE.
<div style="border:1px solid #000000; text-align:center;background:url(http://www.web.com/imagen.jpg);">HOLA QUE TAL</div>
No sé si exclusiva o principalmente, pero ésto se usa normalmente dentro de un DIV o un SPAN, de la forma que se ve en el ejemplo superior: dentro de la etiqueta, se añade un parámetro STYLE y entrecomillado, código CSS. Todo seguido y con los puntos y coma correspondientes.
Saber más en Wikipedia: HTML y CSS.
¿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...
Muy bueno, me hace acordar a los cursos para dummies que tantas veces he bajado cuando estaba aprendiendo jejeje. Avisame si quieres intercambiar enlaces con mi web que tiene una temática similar.
ResponderEliminarhttp://www.comohacerunaweb.com
jaja esta bueno tu blog.... aonq la verdad de a poco se empieza jaja
ResponderEliminarMe Gusta tu página, la he puesto en favoritos.
ResponderEliminarGracias Patricia.
ResponderEliminarGracias por la explicación.....osea puedo cambiar "solo" el CSS de una plantilla, modificando y/o reemplazando desde el body hasta el footer y con eso mantener el HTML original pero con una apariencia nueva en lo anterior.....osea, entendí bien...??? o estoy para plantar cabezas (entre esas la mía).
ResponderEliminarEs así sólo que las referencias para Blogger no son esas. La parte CSS está entre
ResponderEliminar<b:skin><![CDATA[/*
y
]]></b:skin>
y todo lo demás es HTML.
Hay una excepción y es que fuera del SKIN, puedes meter estilo (CSS) si lo encierras entre las etiquetas
<style type='text/css'>
y
</style>
Okis, entendí....por fin, gracias por la pronta respuesta, me ha ayudado un montón, le agradezco la voluntad y el espíritu desinteresado que muestra al compartir sus conocimientos con personas ignotas, como yo.
ResponderEliminarSaludos y queda entre mis favoritos de todas maneras.
No hay de qué gaxgax.
ResponderEliminargrcais se aprende con usted xD
ResponderEliminars asu explicran todo el mundo caray
Hola oloman, realmente tu blog me ha servido mucho, pero necesito saber como darle estilo al menú principal de mi blog, me gustaria que me colaboraras con algunas css's que indiquen el tamaño de letra y depronto la forma solo para ese menú, please ayudame...
ResponderEliminar(comercializadoramyc.blogspot.com)
Hola.
ResponderEliminarNo conozco esa plantilla, pero parece que desde edición de fuentes y colores, debes acceder al aspecto de esas pestañas, ya que tienes una variable definida para la clase SELECTED que es la que controla su aspecto:
Variable name="tab.selected.background.gradient" description="Selected Tab Background" type="url"
default="url(http://www.blogblog.com/1kt/transparent/white80.png)"
Por otro lado, tienes varias clases, incluida esa misma, que también controla el aspecto del enlace y del HOVER:
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
...
En esos dos sitios es dónde tendrás que modificar atributos para modificar el aspecto del menú.
Si prefieres reconstruirlo por completo, echa un vistazo a esta entrada.
HOla men, lo unico q no entiendo es como subir plantillas a blogger q tengan archivos CCS, PHP e imagenes como las de tu blog, ya que dentro de la imagen se encuentra el vinculo HREF como por ejemplo las etiquetas de tu blog, si me pudieras colarborar te agradecería, conozco como manejar el codigo HTML pero no PHP ni las CCS styles.
ResponderEliminarGracias aquí esta mi blog por si le quieres echar un vistazo.
proyectoquimicasena.blogspot.com
Blogger no permite PHP. Para meter algo en ese lenguaje tienes que usar alojamientos externos.
ResponderEliminarPero para el resto no deberías tener problemas. El CSS va en la plantilla directamente, entre las etiquetas SKIN. Las imágenes se suben directamente desde el editor de entradas y desde ahí mismo, se pueden incorporar los enlaces (a href).
mucha verdad
ResponderEliminardefinitivo, a favoritos
ResponderEliminarBuenas noches. Ya que usted tiene experiencia con los torpes :), ya se la diferencia entre HTML y CSS y quizas entiendo que para instalar en mi blog un menu desplegable seria necesario acudir al codigo CSS. Ahora gran pregunta - partiendo de que uno es ignorante total, dedonde consigo la info para poder crear estos codigos o donde quizas conseguirlos ya creados??? Gracias
ResponderEliminarPues los puedes conseguir más o menos por aquí... ;)
ResponderEliminarEstimado, muy buen blog. Lo encontré buscando ayuda.
ResponderEliminarTe cuento: hace poco quise empezar un blog, pero me pille con un problemilla. He usado de base una planilla simple, sin embargo, al cambiar el background a una imagen mia, esta me queda oscura. Según lo que busqué, es porque la imagen tiene un código que la hace transparente, y eso opaca las fotos posteriores que puedan ponerse. ¿Como puedo sacar la transparencia?, este es el código:
Según una amiga, es ahí donde debo cambiarlo, pero no me funciona. Espero me ayudes.
No sé, porque yo aprecio el mismo tono. Esta es la imagen que usas para tu fondo
Eliminarhttp://4.bp.blogspot.com/-WYYsoqyz3HQ/UkyJsrP7ulI/AAAAAAAAAKA/UBkWQ94klug/s0/4bd5293a219ef-2.jpg y para mí que es lo mismo que se ve en tu blog.
Oloman, tengo una pregunta, he creado una página web con wix, con un diseño que me gusta mucho y una bonita plantilla. ¿Cabría la posibilidad de trasladar esa plantilla a Blogger? Un saludo y gracias de antemano
ResponderEliminarLa respuesta es sí, Alicia, pero no hay un sistema automático. Habría que reconstruir eso mismo en Blogger y para ello hacen falta conocimientos profundos de HTML y CSS.
EliminarHola , acabo de descubrir tu blog y me ha gustado mucho .
ResponderEliminarYo tengo problemas con el código CSS , lo intento aplicar a mi plantilla simple de blogger y no me funcionan ( son códigos que veo ya hechos )
Los he colocado en el "añadir CSS" y en el HTML de mi plantilla entre los y nada . No creo que los códigos estén equivocados porque leo en los comentarios lo bien que les va a todos los demás , la verdad es estoy un poco decepcionada .
Espero que me puedas ayudar , gracias de antemano .
Saludos
Hola.
EliminarMe resulta difícil imaginar qué te pasa, pues como dices, los códigos son los que son y funcionan. Como dices hay un par de sitios en Blogger desde el que se puede añadir CSS, desde Personalizar y desde Edición HTML.
En el primero tengo mis dudas, pero en el segundo caso -directamente en la plantilla- no te deberían fallar si lo pones justo al final del CSS, es decir, justo antes del cierre del SKIN.
Si te pasa con todo resulta muy extraño y no voy a poder adivinar cual es el problema, pero si tienes una cosa concreta y me indicas lo que intentas hacer y dónde, quizás sí te pueda ayudar.
Muchas gracias por contestarme , es que lo que quiero hacer es que los cuadraditos de los post relacionados que hay debajo de cada post se unan en una sola linea y si pueden ser también quisiera redondearlos .... Si quieres para verlo te dejo mi blog ...
Eliminarwww.decoraydiviertete.net
Muchas gracias .
Saludos
Bien. Eso es cuestión de que el CSS no está bien
EliminarAñade a tus reglas estas dos:
#related-posts div a {
width: 72px;
float: none !important;
display: inline-block;
vertical-align: top;
}
Gracias por responder , acabo de probar lo que me has comentado pero no funciona .. Te dejo todo el código original a ver si puedes ver alguna cosa que esté mal .
EliminarGracias de nuevo por todo
/* Post Relacionados
----------------------------------------------- */
#related-posts {
width:650px; /*Ancho del cuerpo de nuestras entradas*/
float:left;
height:100%;
min-height:100%;
padding-top:5px;
margin-left:20px; /*Variar si queréis que quede centrado o si lo necesitáis, sino borradlo*/
}
#related-posts h2 {
color:#555555; /*Color del título*/
padding:5px;
margin:0 0 10px;
text-align:center; /*Para que esté centrado*/
background:transparent;
font:normal normal 13px Arial; /*Tamaño y tipografía del título*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borradlo*/
}
#related-posts a {
color:#888888; /*Color de los títulos de cada enlace*/
overflow:hidden;
display:block;
width:80px;
height:155px;
}
#related-posts a:hover {
background:#fbfbfb; /*Color de fondo al pasar el ratón por encima*/
color:#000000; /*Color de las letras al pasar el ratón por encima*/
overflow:hidden;
}
#related-posts a img {
box-shadow:none;
padding:4px;
padding-top:7px;
}
#rptxt{
font:300 9px Muli;
letter-spacing:0px;
color:#333;
text-transform:uppercase;
}
#rptxt{
width:0px;
height:0px;
margin:0px;
font:normal normal 10px Arial; /*Tamaño y tipografía del título de las entradas*/
color:#333333; /*Color del título de las entradas*/
}
Saludos
Montse
Con eso no tengo suficiente porque además hay un JavaScript que es el que hace la mayoría del "trabajo", pero si añades lo que te puse justo al final de lo que tú me pegaste en tu anterior comentario, me apuesto un desayuno a que funciona como me pediste ;)
EliminarHola Oloman, fijte que tengo un problema, no se que le toque a mi blog sin darme cuenta y ahora no puedo ver las imagenes en la misma pagina sin necesidad de salir del blog o de abrir en una pestaña nueva, creo que era como el estilo que tu tienes aqui que si toco una imagen, puedo verla si necesidad de salir del post, sera que me puedes ayudar con ese problema, muchas gracias de antemano ;)
ResponderEliminarEso de la imagen en la misma página se llama "Lightbox". Mira en esta entrada por si la solución que ofrezco te sirve a tí. Está casi al final del post.
EliminarHola soy novata.
ResponderEliminartengo un problema con mi bloguer.
no consigo que me funcione Analitic.
inserte en bloguer mi Id pero no se si con esto basta.
Analitic me dio un código para pegar despues de Head pero no he sido capaz.
Cuando lo intento es como si no me dejase rscribir detras de head