Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.

Mostrando entradas con la etiqueta Css-Html. Mostrar todas las entradas

Ver entrada completa.
Dotted Background Generator: Crear fondos para el blog online

Dotted Background Generator Es una muy buena herramienta online.

Solo debemos indicarle la combinación de colores y apretar el botón de "Ok".

Una vez generada la imagen le damos sobre el fondo con el botón derecho del mouse "Ver imagen de fondo", cuando aparezca la imagen la guardamos y subimos a Blogger.

Subir imágenes a Blogger

Para agregar el fondo ir a Diseño, Edición de HTML y buscar la etiqueta body:

body {

Ver el resto de esta entrada »

Ver entrada completa.
Modificar el diseño del blog: Propiedades y valores

Las propiedades y valores corresponden al CSS de la plantilla.

Para entender un poco más, es necesario leer la entrada anterior.

CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML.

Todas las propiedades necesitan un valor.

En CSS, las declaraciones son así: "propiedad : valor" y están separadas por un punto y coma.

propiedad : valor;
propiedad : valor;

No es necesario que estén en otra línea, pueden estar en una misma línea.

propiedad : valor; propiedad : valor;

Las propiedades y valores son lo que le dan un estilo visual a una estructura.

Puede ser aplicado a un elemento, el cual establecerá el estilo visual de dicho elemento.

En este caso va todo encerrado entre los signos { y }.

Ejemplo:

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Modificar el diseño del blog: Algo para entenderlo un poco más

Ya en otras entradas anterior vimos que son los: Elementos span y div y Diferencias entre Class e ID

Si no lo vistes, es importante que lo hagas para entender un poco mas los estilos CSS de una página o blog.

Podemos modificar el diseño de nuestro blog, no solo desde el Diseñador de plantillas, también lo podemos hacer manualmente desde Edición de HTML.

Hay muchos casos en los que utilizamos plantillas antiguas o descargadas de otras páginas dedicadas a compartir templates para Blogger.

En esos casos con el Diseñador de plantillas no vamos a poder modificar nuestro diseño.

Lo primero que tenemos que tener en cuenta que el blog tiene una estructura la cual se encuentra dentro de <html> y </html>

Dentro de HTML hay dos partes importantes:

Head o Cabecera: que es el código comprendido entre las etiquetas <head> y </head>.

Body o Cuerpo: que es el código comprendido entre las etiquetas <body> y </body>.

Lo que esta dentro de BODY es lo que el visitante ve en la ventana de su navegador.

Y lo que esta dentro de HEAD no será visible en ningún momento por el visitante, en la ventana de su navegador.

Como verán todo tiene un principio y un final.

Las etiquetas empiezan en < > y terminan en </ >.

Principio < > y final </ >.

O apertura < > y cierre </ >.

Se darán cuenta que la diferencia se encuentra en el final que siempre tiene que tener / para cerrar la etiqueta.

No puede haber un principio sin un fin.

Hay algunos códigos que debemos meter en el encabezado y otros que solo funcionarán en el cuerpo.

La estructura en si es así:

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Diferencias entre Class e ID

Leer también Elementos span y div.

La principal diferencia entre utilizar un identificador o una clase para definir un estilo es que mediante un ID estamos identificando algún elemento de la página de forma única y por tanto sólo lo podemos utilizarlo con ese elemento. Esto se suele hacer porque luego posiblemente querremos realizar alguna acción sobre ese elemento.

Mientras que con una clase estamos definiendo un estilo genérico que luego podremos utilizar sobre cualquier elemento del HTML.

Class:

Los class se definen utilizando el signo "." seguido por el nombre del identificador y luego las propiedades del estilo.

Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a cualquier selector HTML o elemento de la página.

El estilo definido en una clase no está vinculado a una etiqueta o elemento concreto sino a una 'clase', y esta clase se puede anudar a cualquier etiqueta HTML o grupo de ellas.

Por ejemplo:

.Piepagina {
font-size:small;
}

La clase "piepagina" (definida en la cabecera de la pagina o en archivo externo) puede usarse con cualquier elemento, y visualizara con tipo de letra pequeña el texto al que afecte:

<p class="Piepagina">
<h1 class="Piepagina">
<div class="Piepagina">
<span class="Piepagina">

La clase así definida puede usarse en cualquier elemento o selector: en el primer caso, afectaría al texto dentro del párrafo; en el segundo, a la cabecera h1; en el tercero, a todo el bloque div (cualquiera que fueran las etiquetas que incluya); y en el cuarto, al bloque span.

Solo una clase se puede especificar a la vez para cada etiqueta HTML.

P.miclase.miotraclase

Sería inválido.

Pero si pueden establecerse clases separadas.

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Texto vertical

Ejemplo:

Parque del Plata

- El Balneario "Parque del Plata" se encuentra situado a orillas del Río de la Plata, y pertenece al Departamento de Canelones, República Oriental del Uruguay, a unos 50 km al este de Montevideo.

- La belleza del lugar se acrecienta, porque sus playas son anchas con enormes dunas de arena fina y blanca, componen un ambiente natural característico de la costa de Canelones.

- Sus aguas son semi salinas, tranquilas, seguras y aptas para el disfrute de toda la familia.

- Es un balneario rodeado de pinos y eucaliptos.

- Otros de sus grandes atractivos es el arroyo Solís Chico, con un paseo muy pintoresco y natural. Muy adecuado para los deportes náuticos y la pesca, disfrutando de la paz con la familia y los amigos.

- Sin dudas Parque del Plata es uno de los balnearios más atractivos de la extensa costa de Canelones.

- Las características principal que define a Parque del Plata es la paz y tranquilidad que en él reinan, lo que lo cataloga como un balneario para todas las edades. A esto se suma que cuenta con todos los servicios necesarios que un balneario turístico internacional requiere para recibir visitantes de todas partes del mundo.

- Los principales servicios con que cuenta Parque del Plata son:

Hotelería.
Inmobiliarias para alquiler de casas, cabañas, bungalós y chalet.
Camping.
Sanatorios, policlínicas y emergencia médica.
Clubes deportivos.
Restaurantes.
Paradores.
Comercios en General.
Supermercados muy económicos.
Entretenimientos.
Playa.
Arroyo.
Plazas.
Internet.
Transporte.
Policía local.
Salvamento.

- Y Todas las Comodidades para pasar unas vacaciones muy confortables y tranquilas en un ambiente familiar.

¿Cómo se hace...?

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
La diferencia entre display:none y visibility:hidden

Los dos atributos CSS display:none y visibility:hidden permiten ocultar un elemento en el navegador.

Sin embargo, existe una pequeña diferencia:

visibility: hidden oculta el elemento, pero sigue conservando el espacio que ocupaba, los elementos adyacentes conservan su ubicación.
display:none quita el elemento definitivamente. El espacio que ocupaba, según sea el caso, es ocupado por los elementos adyacentes como si el elemento ya no existiera.

Imagen extraida de www.luiscanada.com

Ocultar imagen con display:none | Restaurar

Ocultar imagen con visibility:hidden | Restaurar

Esta entrada la hago porque varias veces me han preguntado lo mismo:

"Se me oculta la Navbar pero queda el espacio."

Al fijarme en el código veo que tiene el atributo visibility:hidden y no el display:none.

He notado muchas veces que en una ID o Clase, ponen los dos atributos. ¿Para que?, si solo con poner display:none cumple la función de ocultar.

Fuente: ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Formas con CSS

No todos los elementos funcionan con Internet Explorer.

Square

#square {
width: 100px;
height: 100px;
background: red;
}

Rectangle

#rectangle {
width: 200px;
height: 100px;
background: red;
}

Circle

#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Oval

#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

Triangle Up

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Manual xhtml-css

Muy buen manual para los primeros pasos.

El creador es Belén Albeza de la página Demasiada Cafeína.

Descargar

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
La propiedad white-space

Una buena propiedad poco utilizada.

white-space: valor
Valores permitidos: normal | pre | nowrap | pre-wrap | pre-line
Definición: La propiedad white-space establece el tratamiento de los espacios en blanco.

normal: los espacios en blanco sobrantes y los saltos de línea se eliminan. No obstante, el texto se muestra en tantas líneas como sea necesario para que sus contenidos no se salgan del elemento contenedor.

Ejemplo:

[white-space: normal] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.