Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

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 Manuales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Manuales. Mostrar todas las entradas
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:

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 ...
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 ...
Muy buen manual para los primeros pasos.

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

... ¡¡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 ...
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.

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: normal;">
<strong>[white-space: normal]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
</div>

pre: no se eliminan los espacios en blanco sobrantes y sólo se muestran los saltos de línea incluidos en el texto original. Este comportamiento puede provocar que los contenidos de texto se salgan de su elemento contenedor.

Ejemplo:

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

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: pre;">
<strong>[white-space: pre]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
</div>

nowrap: se comporta igual que normal en los espacios en blanco, pero no añade saltos de línea en el texto original, por lo que los contenidos se pueden salir de su elemento contenedor.

Ejemplo:

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

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: nowrap;">
<strong>[white-space: nowrap]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</div>

pre-wrap: se comporta igual que pre, pero se introducen los saltos de línea que sean necesarios para que los contenidos de texto nunca se salgan de su elemento contenedor.

Ejemplo:

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


Acá mas.




Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: pre-wrap;">
<strong>[white-space: pre-wrap]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.


Acá mas.



</div>

Pre-line: se eliminan los espacios en blanco sobrantes, pero se respetan los saltos de línea originales y se crean tantos saltos de línea como sean necesarios para que el contenido de texto no se salga de su elemento contenedor.

Ejemplo:

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

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: pre-line;">
<strong>[white-space: pre-line]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
</div>

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 ...
Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.

Estos dos elementos de HTML no añaden nada al documento en sí.

Pero con CSS se pueden usar para añadir características visuales distintivas a partes específicas del documento.

Los elementos <div> y <span>, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos. Estos elementos especifican si su contenido es en línea (span) o en bloque (div)

<span> sirve para aplicarle estilo a una pequeña parte de una página HTML.

Con <div> también podemos aplicar estilo a partes de la página HTML.

La diferencia entre <span> y <div> es que con esta última podemos aplicar estilo a una parte más amplia de la página, por ejemplo a tres párrafos. Además que la etiqueta <div> tiene un uso adicional que es el de crear divisiones en la página a las que podremos aplicar una cantidad adicional de atributos para modificar sus comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la división al centro, izquierda, derecha o justificado.

Recordar que los id's se referencian con el prefijo "#" y las clases con "."

Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.

Dentro de estos elementos <span> y <div> podemos poner distintos contenidos a los cuales se le dara una estructura con ayuda de los atributos class e id o estilos CSS.

Veamos uno ejemplos:

Caja 1 de 200px x 100px

Código utilizado:
<div style="width: 200px; height:100px; border: 1px solid #000000; color: #ffff00; text-align: left; background: #6699FF;">Caja 1 de 200px x 100px</div>

Caja 2 de 200px x 70px





Código utilizado:
<div style="width: 200px; height:70px; border: 2px solid #0000ff; color: #ffffff; text-align: right; background: #ff0000; float: right; ">Caja 2 de 200px x 70px</div>

Caja 3 de 200px x 100px con imagen dentro

Código utilizado:
<div style="width: 200px; height:100px; border: 3px solid #0000ff; color: #ffff00; text-align: left; background: #6699FF;"><img style="float: left;padding:5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHz_C1CHflRxhS6i1KUK78i5UB4z3FN22WIOxOqghiDmrFwJ-nIlT5QHMUrw2mUaQZsTMhVZLc46M4Pb0MkQKWZ9M5BOHFSRhjZibsLysQ9mVVlUKRuh0zOF0KVyraF9UuMnBs5zycz3X/s1600/vkucfsb.png"/>Caja 3 de 200px x 100px con imagen dentro</div>

Caja 4 de 200px x 150px con menú

Código utilizado:
<div style="width: 200px; height:150px; border: 3px solid #ffff00; color: #ffffff; text-align: center; background: #ccc;">Caja 4 de 200px x 150px con menú
<ul>
<li><a href="#">página</a></li>
<li><a href="#">página</a></li>
<li><a href="#">página</a></li>
</ul>
</div>

En los ejemplos anterires yo puse el estilo directo en el div, pero también se puede poner afuera con los atributos class e id.

Ejemplo:

Caja 5 de 250px x 100px con imagen dentro con los atributos class e id.


Código utilizado:
<div class="caja5"><img id="caja5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHz_C1CHflRxhS6i1KUK78i5UB4z3FN22WIOxOqghiDmrFwJ-nIlT5QHMUrw2mUaQZsTMhVZLc46M4Pb0MkQKWZ9M5BOHFSRhjZibsLysQ9mVVlUKRuh0zOF0KVyraF9UuMnBs5zycz3X/s1600/vkucfsb.png"/>Caja 5 de 250px x 100px con imagen dentro con los atributos class e id.</div>

CSS:
<style>
.caja5 {
width: 250px;
height:100px;
border: 3px solid #0000ff;
color: #ffff00;
text-align: left;
background: #6699FF;
}

#caja5 {
float: left;
padding:5px;
}
</style>

Si ponemos solo <div class="caja5"></div>

Se muestra la caja vacia sin contenido, pero con los estilos puestos en la clase caja5


También utilicé dos veces la misma clase, si fuese un id, eso no lo podría hacer.

El contenido dentro de un div o span puede ser muchas cosas, hasta otro div o span.


Leer también:

Guía de referencia CSS.
Manual HTML Básico. ... ¡¡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 ...

... ¡¡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 ...


Pasos para desinfectar el pc:

Descargar el programa:  MSNCleaner:
                                          
Seguir los siguientes pasos:


A.- Deshabilita el Restaurar Sistema.


B.- Mostrar las extensiones de archivos.


C.- Activa la opción Ver Archivos Ocultos.


D.- Reinicia en Modo a Prueba de Fallos.


E.- Utilizar el programa MSNCleaner.


A.- Deshabilitar la opción "Restaurar sistema":

1- En el panel de Inicio pulse sobre Mi PC
2- Haga clic en "Ver información del sistema"
3- Seleccione la etiqueta "Restaurar sistema"
4- Marque la casilla "Desactivar Restaurar sistema en todas las unidades" y pulse en "Aplicar".
5- El sistema le preguntará si está seguro de querer deshabilitarlo. Confírmelo pulsando en .
6- La opción que muestra el estado de los discos en la ventana "Configuración de la unidad" aparecerá deshabilitada (todo gris). Pulse en el botón Aceptar.

Al tener esta opción activa se realiza un respaldo automático de los archivos esenciales del sistema para poder restituirlos ante cualquier modificación crítica. Sin embargo, algunos virus, por copiarse en ciertas carpetas o ubicaciones especiales, también son "respaldados", causando problemas a los antivirus al intentar eliminarlos. Por ello es necesario deshabilitar la Restauración del Sistema para llevar a cabo la eliminación de virus y, a continuación, analizar su sistema con un programa antivirus en "Modo a prueba de fallos" (como se indica más adelante).


B.- C.- Para que muestre las extensiones de archivos y activar la opción Ver Archivos Ocultos:

1- Haga clic en Mi PC.
2- Haga clic en el menú Herramientas, y después en Opciones de carpeta.
3- Haga clic en la pestaña Ver.
5- Quite la marca en "Ocultar extensiones de archivo para tipos de archivo conocidos".
6- En la carpeta "Archivos ocultos" seleccione "Mostrar archivos y carpetas ocultos".
7- Quite la marca en "Ocultar archivos protegidos del sistema operativo".
8- Haga clic en Aplicar, y después en Aceptar.


D.- Para iniciar Windows XP a pruebas de fallos:

1- Prender el PC y pulsar repetidas veces en el inicio la tecla F8 hasta que la pantalla quede negra y nos de las opciones.
2- Ahí elegir la opción que dice "Modo a prueba de fallos" o "Modo Seguro" y darle "Enter"
3- Cuando Windows inicie nos preguntara si estamos seguros de querer entrar en ese modo y que hay cosas que no funcionaran y le damos que SI

**Nota**Para terminar el Modo a prueba de fallos, reinicie normalmente.

Usted deberá iniciar su computadora en modo a prueba de fallos, para resolver algún problema puntual, o para ejecutar un antivirus o borrar manualmente algún virus. En el modo a prueba de fallos, Windows carga los archivos de inicio mínimos, de forma que los mecanismos de la mayoría de los virus para engancharse al inicio de Windows no funcionarán.


E.- Utilizar el programa MSNCleaner:

• Descomprimir el archivo MSNCleaner.rar
• Ejecutar el archivo MSNCleaner.exe
• Activa la casilla de: Desbloquear el Navegador Internet Explorer al analizar
• Activa la casilla de: Habilitar el Administrador de Tareas, Panel de Control, Regedit, .......
• Hacer Clic en el botón Analizar, Si se detecta algún archivo nocivo, se activará el botón Eliminar
• Seleccionar las opciones "Eliminar archivos temporales" y "Restaurar el archivo Hosts" si no estan activadas
• Hacer Clic en el botón Eliminar

Manual de MSNCleaner:



Reinicias tu ordenador en Modo Normal.
Activa la opción Restaurar Sistema. 
FIN. 

... ¡¡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 ...


... ¡¡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 ...


Nunca esta de mas otro manual.

Este es muy básico pero como para empezar o recordar algo de lo ya aprendido es bueno.

Si quieren algo mas completo, fijarse entre mis otros aportes que encontraran .





Ver manual:

Descargar Manual: ... ¡¡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 ...
VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?