Home » Archives for April 2011
Modificar el diseño del blog: Propiedades y valores
Posted by
Mrs Daddy
at
11:46 PM
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.
No es necesario que estén en otra línea, pueden estar en una misma línea.
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:
O puede ser aplicado directo en la estructura con el atributo style:
En este caso va después de style= encerrado entre " y " o ' y '.
Ejemplo:
Las propiedades más utilizadas en una estructura son:
Border, margin, padding, width, height, font, background y color.
Sobre border, margin y padding, pueden leer algo en una entrada anterior, acá:
Algo mas sobre border pueden ir viendo acá:
Mas adelante voy a hacer una entrada mas detallada sobre border.
Propiedades con su valor aceptado en CSS:
Esta propiedad establece el color con el que se muestra el texto contenido en un elemento. El color de la letra no puede ser transparente, ya que se debe indicar explícitamente un color.
Un valor de color es una palabra clave o una especificación numérica RGB
Las 16 palabras clave se toman de la paleta Windows VGA: celeste, negro, azul, fucsia, gris, verde, verde claro, marrón, azul marino, olivo, morado, rojo, plata, turquesa, blanco, y amarillo.
Los colores RGB se dan en una de cuatro maneras:
#rrggbb (por ej., #00cc00)
#rgb (por ej., #0c0)
rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204.0))
rgb(y%,y%,y%) donde y es un número entre 0.0 y 100.0 inclusive (por ej., rgb(0%,80%,0%))
La mas utilizada es la primera: RGB hexadecimal(#rrggbb)
Pueden ver los distintos colores RGB hexadecimal en esta: tabla de colores.
Longitud relativas:
PT (puntos): Valor en puntos.
PX (píxel): Significa pixeles y es un punto de la pantalla.
EM (M): Es una medida tipográfica que equivale al ancho de la letra eme.
% (porcentaje): Si un padre tiene como tamaño de fuente 20px y el hijo posee un tamaño de 50%, este tendrá un tamaño final de 10px.
Se recomienda usar pixeles (px).
Recuerda que no hay que dejar espacios entre el valor de longitud y la unidad de medida.
Ejemplos:
Esto esta mal:
Esto esta bien:
Leer la siguiente entrada: Tabla de equivalencias css
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:
p {
Propiedad:Valor;
Propiedad:Valor;
}
O puede ser aplicado directo en la estructura con el atributo style:
En este caso va después de style= encerrado entre " y " o ' y '.
Ejemplo:
style="Propiedad:Valor;Propiedad:Valor;"
Las propiedades más utilizadas en una estructura son:
Border, margin, padding, width, height, font, background y color.
Sobre border, margin y padding, pueden leer algo en una entrada anterior, acá:
Algo mas sobre border pueden ir viendo acá:
Mas adelante voy a hacer una entrada mas detallada sobre border.
Propiedades con su valor aceptado en CSS:
Márgenes
Propiedad | Descripción | Valores |
---|---|---|
margin | Ancho para varios márgenes individuales. | longitud % auto |
margin-top margin-right margin-bottom margin-left | Tamaño del margen superior, derecho, inferior e izquierdo. | longitud % auto |
Relleno
Propiedad | Descripción | Valores |
---|---|---|
padding | Tamaños para varios rellenos individuales. | longitud % |
padding-top padding-right padding-bottom padding-left | Ancho del relleno superior, derecho, inferior e izquierdo. | longitud % |
Dimensiones
Propiedad | Descripción | Valores |
---|---|---|
width | Ancho. | longitud % auto |
min-width | Ancho mínimo. | longitud % |
max-width | Ancho máximo. | longitud % none |
height | Alto. | longitud % auto |
min-height | Alto mínimo. | longitud % |
max-height | Alto máximo. | longitud % none |
line-height | Altura entre las bases del texto. | normal número longitud % |
Fuentes
Propiedad | Descripción | Valores |
---|---|---|
font | Atajo para establecer el resto de propiedades sobre las fuentes a la vez. | font-style font-variant font-weight font-size font-family line height caption icon menu message-box small-caption status-bar |
font-family | Familias de fuentes. | nombre-familia familia-genérica |
font-style | Estilo de la fuente. | normal italic oblique |
font-variant | Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas. | normal small-caps |
font-weight | Intensidad de la fuente. | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
font-size | Tamaño de la fuente. | xx-small x-small small medium large x-large xx-large larger smaller longitud % |
Fondo
Propiedad | Descripción | Valores |
---|---|---|
background | Propiedades individuales relacionadas con el fondo. | background-color background-image background-repeat background-attachment background-position |
background-color | Color de fondo. | color transparent |
background-image | Imagen de fondo. | URL none |
background-repeat | Repetición de la imagen de fondo. | repeat repeat-x repeat-y no -repeat |
background-attachment | Desplazamiento de la imagen de fondo. | scroll fixed |
background-position | Posición de la imagen de fondo. | % longitud left center right top bottom |
La propiedad color
Esta propiedad establece el color con el que se muestra el texto contenido en un elemento. El color de la letra no puede ser transparente, ya que se debe indicar explícitamente un color.
color:valor
Un valor de color es una palabra clave o una especificación numérica RGB
Las 16 palabras clave se toman de la paleta Windows VGA: celeste, negro, azul, fucsia, gris, verde, verde claro, marrón, azul marino, olivo, morado, rojo, plata, turquesa, blanco, y amarillo.
Los colores RGB se dan en una de cuatro maneras:
#rrggbb (por ej., #00cc00)
#rgb (por ej., #0c0)
rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204.0))
rgb(y%,y%,y%) donde y es un número entre 0.0 y 100.0 inclusive (por ej., rgb(0%,80%,0%))
La mas utilizada es la primera: RGB hexadecimal(#rrggbb)
Pueden ver los distintos colores RGB hexadecimal en esta: tabla de colores.
Las unidades de longitud en CSS
Longitud relativas:
PT (puntos): Valor en puntos.
PX (píxel): Significa pixeles y es un punto de la pantalla.
EM (M): Es una medida tipográfica que equivale al ancho de la letra eme.
% (porcentaje): Si un padre tiene como tamaño de fuente 20px y el hijo posee un tamaño de 50%, este tendrá un tamaño final de 10px.
Se recomienda usar pixeles (px).
Recuerda que no hay que dejar espacios entre el valor de longitud y la unidad de medida.
Ejemplos:
Esto esta mal:
propiedad: 12 px
Esto esta bien:
propiedad: 12px
Leer la siguiente entrada: Tabla de equivalencias css
Si queremos aprender a modificar el diseño del blog, no nos queda otra que leer mucho y hacer distintas pruebas.
En la Web hay muchos manuales sobre HTML y CSS.
O en este blog.
En la Web hay muchos manuales sobre HTML y CSS.
O en este blog.
0
comments
Labels:
Css-Html,
Manuales
Imágenes fantásticas de un mundo extraño
Posted by
Mrs Daddy
at
8:42 AM
0
comments
Labels:
25 imágenes,
Fantasy,
Imágenes Fantásticas,
Rar
Tributo a la naturaleza (fotografías en alta resolución)
Posted by
Mrs Daddy
at
8:20 AM
0
comments
Labels:
Hojas,
Hojas verdes,
Naturaleza,
Nature,
Plantas
COLA DE CABALLO
Posted by
Mrs Daddy
at
12:00 PM
Hola a todos!!.
Hoy os voy a hablar de una hierba muy buena: la cola de caballo. Esta hierba es muy conocida por su función de ayudar a bajar nuestro peso.
La cola de caballo es una planta perenne. En invierno, su color es pardusco y el tallo estéril, culmina en una espiga repleta de esporas.
En verano, el tallo es de color verde estriado con nudos circulares del os que surgen frágiles ramitas segmentadas. Prospera sobre suelos arcillosos, en terrenos húmedos, nunca muy lejos del agua, desde márgenes de ríos y arroyos a campos encharcados y en torno a
pastizales.
En verano, el tallo es de color verde estriado con nudos circulares del os que surgen frágiles ramitas segmentadas. Prospera sobre suelos arcillosos, en terrenos húmedos, nunca muy lejos del agua, desde márgenes de ríos y arroyos a campos encharcados y en torno a
pastizales.
La cola de caballo constituye una de las especies más diuréticas de todas las plantas. Es decir que posee una gran capacidad para eliminar agua del cuerpo, hasta el extremo que puede llegar a aumentar la orina en un 30 % más de lo que es habitual. Este hecho hace que su nombre científico Equisetum arvense aparezca en la composición de la mayoría de productos que habitualmente se venden para reducir peso. Esta propiedad se debe a la acción de varios componentes, entre los cuales hay que destacar la equisetonina y el potasio, pero también intervienen otros , como el calcio, el magnesio, ,y el ácido cafeico.
Esta planta tiene numerosas aplicaciones terapéuticas.
- La cola de caballo es la diurética: debido a su riqueza en sales de potasio, flavonoides y sapónidos, aumenta el fluido urinario. Por ello es ideal para remediar la retención de líquidos general o localizada, como para otros problemas genitourinarios: cálculos renales, infecciones urinarias, cistitis, uretritis, inflamaciones de la vejiga o próstata.
Ayuda a eliminar toxinas a través de la orina y es ideal para los días previos a la regla si eres de las que retienes líquidos. Combina muy bien con una infusión de manzanilla.
- También ayuda a perder peso. Además de sus cualidades diuréticas, que contribuyen a eliminar el exceso de líquidos, lo cual supone una pérdida sustancial de peso al comienzo de los regímenes para adelgazar, ayuda a eliminar las toxinas, lo cual ayuda a recuperar el equilibrio corporal e influye favorablemente para eliminar el sobrepeso.
- Otro de sus beneficios es que fortalece las uñas y cabellos. Contribuye a aumentar el crecimiento, mejorar el aspecto y corregir la debilidad de las uñas, manteniéndolas firmes, y del cabello, evitando que aparezcan canas, debido a su contenido de sílicio, un componente clave del tejido conjuntivo que forma estas partes del cuerpo.
Si se quiere endurecer o fortalecerlas uñas, se puede elaborar un cocimiento de 10 gramos de cola de caballo en agua por media hora y se introduce las uñas, cuando esta preparación ya esté fresca, por espacio de 15 minutos por la noche durante una semana.
- También es muy útil para curar las lesiones y hemorragias. Su capacidad astringente, de encoger o contrae los tejidos, debida a sus taninos, la hace adecuada para cicatrizar y cerrar las heridas sangrantes, frenar las hemorragias nasales y curar las úlceras cutáneas. Además es útil en diarreas, inflamaciones y enuresis.
Cómo ya he dicho, es muy útil en el tratamiento de enfermedades de la piel, como eccemas, o en heridas que presentan dificultades en su curación. Para ello limpiar la zona afectada con la infusión). En el caso de úlceras bucales, realizar enjugues con la preparación anterior. Esta misma propiedad puede utilizarse para tratar los ojos inflamados o doloridos , los orzuelos, o combatir la irritación o el picor que generan afecciones oculares, como la conjuntivis. (Aplicar con una gasa el líquido de la infusión)
- Esta hierba también es muy útil en el aparato genital femenino. Estas propiedades curativas en uso externo pueden aprovecharse para aliviar las inflamaciones o infecciones de la vulva y de la vagina ( vulvitis, vulvovaginitis, vaginitis ). Para ello realizar lavados con la decocción de 60 gr. de planta seca por litro de agua.
- La misma preparación anterior puede utilizarse para tratar externamente las almorranas, especialmente aquellas que sangran. ( Realizar lavados con la decocción de 60 gr. de planta seca por litro de agua).
- Esta preparación también es muy útil en los casos de hemorragias nasales: Aparte de usarla internamente, tal como se ha visto antes, es conveniente reforzar los capilares nasales externamente para impedir su rotura. Para ello introduciremos en el agujero nasal sangrante un trozo de algodón mojado con un poco de zumo de la planta tierna.
- Para las llagas y heridas, se elabora una cataplasma de hojas frescas la cual se aplican directamente, después de haberlas machacado un poco sobre las áreas afectadas.
- Asimismo tiene capacidad para reforzar los huesos y articulaciones. La salud y recuperación de los huesos y tejidos cartilaginosos, como son los tendones, cartílagos y fibras de colágeno, dependen de un buen aporte de sílice, por lo que el equiseto puede ayudar a prevenir la pérdida de masa ósea, curar fracturas y lesiones articulares, en combinación con los minerales necesarios y tratamientos prescritos por el médico.
Al actuar positivamente sobre la flexibilidad de los tendones y las paredes vasculares, el equiseto también es un buen reconstituyente para los deportistas que someten sus ligamentos a duras pruebas, como los tenistas, ciclistas, corredores.
La cola de caballo, se vende en farmacias, herbolarios y en algunos supermercados. Yo la compré en Mercadona, a un precio muy económico (aproximadamente 1.40 euros), y viene con un 3% de aroma de limón, que lo hace más agradable. Es dónde más barato lo he encontrado, aunque también lo tienen en cápsulas por algo más de 5 euros. La hay en infusión o en capsulas. Yo me la compré en una caja que lleva sobrecitos individuales de esta hierba. Tiene un agradable aroma que recuerda al de la manzanilla.
Tomar unas 2 ó 3 tazas diarias.
Precauciones:
Se debe evitar su empleo en caso de que exista irritación de la mucosa gástrica y no es recomendable su consumo en embarazadas ni durante el periodo de la lactancia, o tomando otros medicamentos como antinflamatorios o ácidos como aspirina, así como alcohol o comidas picantes, ya que irrita los jugos gástricos.
El uso de diuréticos en presencia de hipertensión o cardiopatías, sólo debe hacerse por prescripción y bajo control médico, dada la posibilidad de aparición de una descompensación tensional.
Espero que os haya ayudado para conocer más sobre los beneficios de esta hierba, un saludo y nos vemos en la siguiente entrada.
0
comments
Labels:
INFUSIONES,
OTROS
Modificar el diseño del blog: Algo para entenderlo un poco más
Posted by
Mrs Daddy
at
6:21 PM
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í:
Dentro del cuerpo tenemos distintas etiquetas las cuales tienen que tener una estructura a la que le tenemos que dar un diseño.
El diseño se lo damos mediante estilos CSS, que pueden ir dentro de la etiqueta o llamarlas desde la cabecera.
Ejemplo dentro de una etiqueta con el atributo style:
Ejemplo llamando desde la cabecera mediante atributo clase o id:
Dentro de la cabecera los estilo CSS van dentro de:
O con un link externo:
Y en Blogger vamos a encontrar los estilos dentro de:
Por eso siempre se recomienda que pongan el estilo CSS arriba de ]]></b:skin>
Cabecera es = a head.
Una estructura es en si, un cuadrado o rectángulo y tiene que tener un estilo para que se vea.
CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML.
Los atributos id y class:
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.
Primero indicamos la etiqueta a la que vamos a aplicar el estilo y después le indicamos el tipo de estilo que va a tomar.
Empieza con un punto (.) o un prefijo (#) dependiendo de que sea una clase o una id.
Seguido del nombre de la etiqueta.
Por último van las propiedades con su valor, todo encerrado entre los signos { y }.
Ejemplo:
En este caso lo que estamos haciendo es aplicar el estilo sólo a las etiquetas que contengan la clase llamada "menu", no le dará estilo a ninguna otra etiqueta.
Si agregamos los estilos dentro de la etiqueta no es necesario que tengan una clase o id.
Tener en cuenta que no solo le podemos dar estilos a una clase o a una id.
Hay otras etiquetas ya establecidas que no son clases ni id`s. (ver algunos ejemplos)
Las propiedades más utilizadas en una estructura son:
Font, border, margin, padding, width, height, color y background.
Les recomiendo leer también:
Guía de referencia CSS
Regla del reloj:
Tabla de equivalencias css
Tabla de Colores
Diferencias entre border, margin y padding
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í:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Dentro del cuerpo tenemos distintas etiquetas las cuales tienen que tener una estructura a la que le tenemos que dar un diseño.
El diseño se lo damos mediante estilos CSS, que pueden ir dentro de la etiqueta o llamarlas desde la cabecera.
Ejemplo dentro de una etiqueta con el atributo style:
<div style="Propiedad:Valor;Propiedad:Valor;">Contenido</div>
Ejemplo llamando desde la cabecera mediante atributo clase o id:
<div clase o id="nombre de la clase o id">Contenido</div>
Dentro de la cabecera los estilo CSS van dentro de:
<style type="text/css">
ACÁ EL CONTENIDO CSS
</style>
O con un link externo:
<link href="http://URL DEL ARCHIVO .css" rel="stylesheet" type="text/css">
Y en Blogger vamos a encontrar los estilos dentro de:
<b:skin><![CDATA[
ACÁ EL CONTENIDO CSS
]]></b:skin>
Por eso siempre se recomienda que pongan el estilo CSS arriba de ]]></b:skin>
Cabecera es = a head.
Una estructura es en si, un cuadrado o rectángulo y tiene que tener un estilo para que se vea.
Introducción a CSS.
CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML.
Los atributos id y class:
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.
Primero indicamos la etiqueta a la que vamos a aplicar el estilo y después le indicamos el tipo de estilo que va a tomar.
Empieza con un punto (.) o un prefijo (#) dependiendo de que sea una clase o una id.
Seguido del nombre de la etiqueta.
Por último van las propiedades con su valor, todo encerrado entre los signos { y }.
.clase o #id {
Propiedad:Valor;
Propiedad:Valor;}
Ejemplo:
.menu {
Propiedad:Valor;
Propiedad:Valor;
}
En este caso lo que estamos haciendo es aplicar el estilo sólo a las etiquetas que contengan la clase llamada "menu", no le dará estilo a ninguna otra etiqueta.
Si agregamos los estilos dentro de la etiqueta no es necesario que tengan una clase o id.
Tener en cuenta que no solo le podemos dar estilos a una clase o a una id.
Hay otras etiquetas ya establecidas que no son clases ni id`s. (ver algunos ejemplos)
Las propiedades más utilizadas en una estructura son:
Font, border, margin, padding, width, height, color y background.
Les recomiendo leer también:
Guía de referencia CSS
Regla del reloj:
Tabla de equivalencias css
Tabla de Colores
Diferencias entre border, margin y padding
No se aprende diseño en unos minutos, pero con algo hay que empezar.
Siempre es recomendable saber lo que hacemos y que es lo que hace el código que ponemos y si es posible como esta hecho.
Siempre es recomendable saber lo que hacemos y que es lo que hace el código que ponemos y si es posible como esta hecho.
0
comments
Labels:
Css-Html,
Manuales
DÍA DE LA MADRE
Posted by
Mrs Daddy
at
5:00 PM
Hola a todos!!
Este domingo es el Día de la Madre. . Se celebra en diferentes fechas del año según el país: en España, en la actualidad, se celebra el primer domingo de cada mes de mayo.
En esta fecha, las madres reciben las felicitaciones de los hijos y es que una madre es una madre. Siempre sabe cómo ayudar a su hijo, lo quiere incondicionalmente, sufre, ríe y lo da todo por él.
Pues bien, es típico hacer un regalito a nuestras madres en estos días. Os voy a dar unos consejitos, dependiendo vuestro presupuesto.
- En primer lugar, es muy bonito escribir una carta. Cualquier regalo es algo físico, pero una carta es algo que le va a llegar al corazón, porque esas palabras han salido de nosotros personalmente. Hay poemas y frases muy bonitos que nos pueden ayudar con nuestra carta. Aquí os voy a dejar unos enlaces.
http://www.cabinas.net/mensajes_de_texto/mensajes_dia_de_la_madre.asp
- Siguiendo con la temática de este blog, viene muy bien regalar productos de belleza para el rostro..Podemos hacer una cesta personalizada, con cremas que nos gusten, tónicos, mascarillas , exfoliantes, limpiadores faciales, etc. Vamos una cesta del tamaño que queramos según nuestro presupuesto. Y del mismo modo con productos corporales: geles de baño, exfoliantes, esponjas, cremas, aceites, sales de baño…
- También podemos realizar una cesta con productos de maquillaje: pintalabios, sombras de ojos, rimmel, polvos, maquillajes, brillos…O bien comprar un estuche de maquillaje.
- Otra opción que siempre gusta son las flores. A mí la verdad que los ramos de flores naturales me parecen preciosos, pero me da mucha pena que en pocos días ya se han estropeado. Así que otra opción , es comprar plantas interiores o exteriores. Hay múltiples opciones de plantas preciosas para regalar.
- Ahora está muy de moda regalar sesiones de spas, y la verdad es que es una muy buena opción también. Y si nos lo podemos permitir, está genial un regalo de una escapadita a algún sitio.
- También nos podemos decantar por regalar algo de joyería, bien sean pendientes, pulseras, colgantes, anillos, relojes….
- Algo de ropa, también es una buena opción. A qué mujer no nos gusta la ropa. Ahora en muchas tiendas admiten la opción de comprar vales canjeables por futuras compras, con el dinero que tú desees regalar.
- También podemos regalar algún tipo pequeño electrodoméstico que le haga falta. Una plancha, una cafetera, batidora, tostadora……
- Y podemos optar por otras cosas para regalar relacionadas con la belleza: una depiladora, una sauna facial, una plancha para el pelo, un secador, un masajeador…
- También es un buen regalo , un perfume. Lo único es , asegurarnos de sus gustos.
- Y por último cualquier tipo de manualidad que sepamos hacer, eso siempre le encantará porque nos hemos esforzado en algo para nuestra madre, y eso tiene mucho mérito.
Bueno yo creo que ya os he dado muchas ideas, si se os ocurren otras, pues aprovechar y hacerlo, que seguro que nuestras mamás lo agradecerán. Un saludo y hasta la próxima entrada.
0
comments
Labels:
OTROS
Imágenes con movimiento para celulares (Gifs de 240x320)
Posted by
Mrs Daddy
at
9:26 AM
Descargar la carpeta con todas las imágenes desde Google Docs
OPCIÓN NÚMERO 2
Regresar a la página principal
Hombres, actores y artistas III (para todas las mujeres)
Posted by
Mrs Daddy
at
9:08 AM
0
comments
Labels:
Actores,
Artistas,
Chicos guapos,
Hombres,
Rostros de hombres
150 íconos PNG para tus páginas o blogs en Internet
Posted by
Mrs Daddy
at
8:52 AM
Descargar la carpeta con todas las imágenes desde Google Docs
OPCIÓN NÚMERO 2
Regresar a la página principal
Diferencias entre Class e ID
Posted by
Mrs Daddy
at
8:03 PM
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.
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:
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:
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.
Sería inválido.
Pero si pueden establecerse clases separadas.
Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos:
Y usar una clase u otra en la Página así:
Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase.
Los ID se definen utilizando el signo "#" seguido por el nombre del identificador y luego las propiedades del estilo.
Mediante el atributo id podemos establecer una identidad única para un único elemento de la página.
La sintaxis html sería por ejemplo, donde especificamos la identidad "menu" para ese único párrafo.
Al elemento html pueden asignarsele estilos a través del selector id:
o bien
Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de éstos:
El primer selector corresponde a todos los elementos 'P' que tengan a un 'DIV' entre sus ascendientes.
El segundo selector corresponde a todos los elementos 'H1' que tengan un ascendiente de clase 'rojizo'.
El tercer selector corresponde a todos los elementos 'CODE' que sean descendientes del elemento de 'ID=x78y'.
El cuarto selector corresponde a todos los elementos 'H1' que tengan un ascendiente 'DIV' de clase 'notaalmargen'.
Los selectores contextuales también se pueden agrupar con una coma:
Que es equivalente a:
Vía:
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.
Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos:
h1.roja {font:15px; color:red;}
h1.verde {font:15x; color:green;}
h1.azul {font:15x; color: blue;}
Y usar una clase u otra en la Página así:
<h1 class="roja">Este es un encabezamiento rojo</h1>
...
<h1 class="azul">Este es azul </h1>
...
<h1 class="verde">Y este .... verde</h1>
Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase.
Selector ID:
Los ID se definen utilizando el signo "#" seguido por el nombre del identificador y luego las propiedades del estilo.
Mediante el atributo id podemos establecer una identidad única para un único elemento de la página.
La sintaxis html sería por ejemplo, donde especificamos la identidad "menu" para ese único párrafo.
Al elemento html pueden asignarsele estilos a través del selector id:
#menu {estilos ...}
o bien
p#menu {estilos ...}
Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de éstos:
DIV P { font: small sans-serif }
.rojizo H1 { color: red }
#x78y CODE { background: blue }
DIV.notaalmargen H1 { font-size: large }
El primer selector corresponde a todos los elementos 'P' que tengan a un 'DIV' entre sus ascendientes.
El segundo selector corresponde a todos los elementos 'H1' que tengan un ascendiente de clase 'rojizo'.
El tercer selector corresponde a todos los elementos 'CODE' que sean descendientes del elemento de 'ID=x78y'.
El cuarto selector corresponde a todos los elementos 'H1' que tengan un ascendiente 'DIV' de clase 'notaalmargen'.
Los selectores contextuales también se pueden agrupar con una coma:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Que es equivalente a:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Vía:
0
comments
Labels:
Css-Html,
Manuales
Escribe algo para tu mami en estas imágenes con flores
Posted by
Mrs Daddy
at
11:55 AM
0
comments
Labels:
10 de Mayo,
Día de las Madres,
Mayo 10,
Mother's Day
Ramos de rosas para escribir tus mensajes (Día de las Madres)
Posted by
Mrs Daddy
at
11:39 AM
Casas monumento casa escultura
Posted by
Mrs Daddy
at
8:52 AM
Diseño
Instalación fija como monumento en un parque para la memoria, forma de tres casas volteadas, cada una semeja tener dos celdas con las puertas abiertas, hay barrotes en pequeñas ventanas.No hay piso, se ve todo el interior. Los techos son paneles acrílicos rojos. Escultura de Dennis Oppenheim para el Parque de la Memoria en la Ciudad de Buenos Aires. La obra está inspirada en el horror del encierro y el paso a la liberación. Sitio web www.parquedelamemoria.org.ar
Monumento de casas escultura conmemorativa |
Leer más de este posteo
0
comments
Labels:
Urbanización
CUIDADO DE LOS PIES
Posted by
Mrs Daddy
at
6:00 PM
Hola a todos!!.
¿ Qué tal ha ido la Semana Santa?. Espero que lo hayáis disfrutado. Aunque sinceramente el tiempo no nos acompañó mucho. Parece apostas, hizo muy bueno los días antes y en Semana Santa se estropea. Pero qué le vamos a hacer.
Hoy os traigo otro temita. Voy a hablar sobre el cuidado de los pies. Ahora en veranito nos preocupa, sobre todo porque hay que lucirlos más. Llevamos las sandalias, los zapatitos veraniegos y nos gusta que nuestros pies se vean bonitos. Son una parte del cuerpo que solemos descuidar; sufren el maltrato de un calzado mal diseñado y los cambios de temperatura pueden provocarles sabañones. Sólo el cuidado periódico asegura pies suaves y bien cuidados.
Pues bien, os voy a dar unos consejos para el cuidado de nuestros pies y para que estén suaves.
- En primer lugar , debemos hacer exfoliación de pies cada cierto tiempo . Cuando se haga una exfoliación corporal en la ducha, nunca debemos olvidarnos de los pies. Masajear con movimientos circulares mientras se hace la exfoliación y aclarar.
- Por las noches aplicar crema para los pies. Que sea bien untuosa, por ejemplo la nívea va bien. Yo también utilizo una de Mercadona que pone crema reparadora de grietas y va muy bien. Es muy buena la crema de neutrogena, pero mucho más cara.
- Una vez que se haya secado la crema, se utiliza piedra pómez. Se frota bien donde haya durezas.
- Después de haber pasado la piedra pómez , nos untamos los pies con vaselina y nos ponemos unos calcetines. Dormimos con ellos durante toda la noche. A la mañana nos los quitamos, y nos quedarán unos pies muy suaves.
- Son muy efectivas las limas para pies. Después de ducharnos, nos pasamos la lima para los pies. Las limas suelen tener dos partes, una para raspar y otra para pulir. La lima, la tenéis de Mercadona también , en otros supermercados y en farmacias.
- También van muy bien los cortacallos, para quitar las pieles, las células muertas.
- Las uñas han de cortarse con regularidad y siempre en cuadrado para que no se encarnen, limando las esquinas con suavidad para darles un poco de forma.
- Si hacemos un mal uso de los tacones podemos tener problemas a la larga de los dolorosos callos, también salen cuando el calzado es muy estrecho o nos aprieta por algún lado en especial.
- En caso de problemas de callos importantes, uñas encarnadas y demás, sería conveniente acudir al podólogo.
- Si se tienen los pies hinchados , es muy bueno hacer baños de agua fría con sal o alternar baños de agua fría y caliente para reactivar la circulación. Poner los pies en alto , para mejorar el riego sanguíneo.
*Yo me compré esta lima metálica para los talones en forma de huevo, y la verdad que va muy bien. Se quedan las pielecillas en el recipiente, luego se vacía y ya está. Me lo compré en los chinos y era muy barato
Espero que os haya gustado la entrada. Ahora es el tiempo de cuidarnos bien los pies, porque llega la hora de lucirlos. Aunque en invierno deberiamos también hacerlo. Un saludo y hasta la próxima entrada. Besosssssssss.
0
comments
Labels:
BELLEZA,
CUIDADO DE LOS PIES
Entradas reducidas: Cambiar el tamaño de las thumbnail
Posted by
Mrs Daddy
at
1:12 PM
Si ya tenemos una plantilla con entradas reducidas: (1), (2) y (3).
Vemos las imágenes en thumbnail.
Según las tengamos configuradas en el script, las imágenes se muestran con un tamaño menor al que se muestran al abrir la entrada.
Con esa configuración se mostrarán de 125x125 px, aunque la imagen publicada tenga mayor tamaño.
Pero cual es el error, las imágenes aunque las veamos de 125x125 px, pero el tamaño real será el de la imagen subida.
Ejemplo:
Si la imagen subida es de 640x480 px la vamos a ver de 125x125 px.
El problema es que al abrir la página, está va a cargar la imagen grande (640x480 px) y no la imagen thumbnail (125x125 px), aunque la veamos pequeña.
Si tenemos un blog que muestra 10 entradas y cada entrada con una imagen de 640x480 con un peso de 100 KB la suma total del peso de las imágenes es de 1000 KB.
Si tenemos un blog que muestra 10 entradas y cada entrada con una imagen de 125x125 con un peso de 10 KB la suma total del peso de las imágenes es de 100 KB.
¿Notan la diferencia?
La solución es agregar un pequeño código al script, que cambie las imágenes grandes por pequeñas.
Ahorraremos unos cuantos KB de peso, que harán que nuestro blog cargué mas rápido.
Buscamos el código en Edición de HTML y agregamos lo que está en Rojo:
Podemos cambiar o agregar mas líneas, según el tamaño de las imágenes más comunes que utilizamos.
Cambiando el tamaño s200 por otro tamaño utilizado.
También pueden cambiar en el código s125 por s125-c para mostrar las imágenes cortadas.
Vemos las imágenes en thumbnail.
Según las tengamos configuradas en el script, las imágenes se muestran con un tamaño menor al que se muestran al abrir la entrada.
img_thumb_height = 125;img_thumb_width = 125;
Con esa configuración se mostrarán de 125x125 px, aunque la imagen publicada tenga mayor tamaño.
Pero cual es el error, las imágenes aunque las veamos de 125x125 px, pero el tamaño real será el de la imagen subida.
Ejemplo:
Si la imagen subida es de 640x480 px la vamos a ver de 125x125 px.
El problema es que al abrir la página, está va a cargar la imagen grande (640x480 px) y no la imagen thumbnail (125x125 px), aunque la veamos pequeña.
Si tenemos un blog que muestra 10 entradas y cada entrada con una imagen de 640x480 con un peso de 100 KB la suma total del peso de las imágenes es de 1000 KB.
Si tenemos un blog que muestra 10 entradas y cada entrada con una imagen de 125x125 con un peso de 10 KB la suma total del peso de las imágenes es de 100 KB.
¿Notan la diferencia?
La solución es agregar un pequeño código al script, que cambie las imágenes grandes por pequeñas.
Ahorraremos unos cuantos KB de peso, que harán que nuestro blog cargué mas rápido.
Buscamos el código en Edición de HTML y agregamos lo que está en Rojo:
<script type='text/javascript'>
//<![CDATA[
summary_noimg = 370;
summary_img = 370;
img_thumb_height = 125;
img_thumb_width = 125;
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span class="summarythuimg" style="float:left; "><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
if(img.length<1) {
imgtag = '<span class="summarythuimg" style="float:left; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCZmIjRQGWdKJ6ljuFMFhjqY7QvVN2qy6-lff4W7mTV0NItGKjSavdkaQFV56xy6xeP5z8JdqY0TO7WeUUpHa_pNZeNbqJ90-wUpaoqn4hLFuAIhxDuqFvbp9kgm5rZ_6Rb6iLtxftGZF/s1600/125x125-logo.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
var imagenreducida = div.innerHTML;
var imagenreducida = imagenreducida.replace(/\/s200/g,'/s125');
var imagenreducida = imagenreducida.replace(/\/s320/g,'/s125');
var imagenreducida = imagenreducida.replace(/\/s400/g,'/s125');
var imagenreducida = imagenreducida.replace(/\/s640/g,'/s125');
var imagenreducida = imagenreducida.replace(/\/s1600/g,'/s125');
div.innerHTML = imagenreducida;
}
//]]>
</script>
Podemos cambiar o agregar mas líneas, según el tamaño de las imágenes más comunes que utilizamos.
var imagenreducida = imagenreducida.replace(/\/s200/g,'/s125');
Cambiando el tamaño s200 por otro tamaño utilizado.
También pueden cambiar en el código s125 por s125-c para mostrar las imágenes cortadas.
El ejemplo está con imágenes de 125x125 px, ustedes pueden tener en el código JavaScript otra medida, tendrán que cambiar s125 por la que tengan configurada.
0
comments
Labels:
Blogger,
Plantilla
Arreglos florales para el Día de las Madres I (mensajes)
Posted by
Mrs Daddy
at
11:26 AM
Imágenes fantásticas de un mundo real I
Posted by
Mrs Daddy
at
11:12 AM
Peces, corales y arrecifes en el fondo del mar VI
Posted by
Mrs Daddy
at
10:58 AM
0
comments
Labels:
Arrecifes,
Corales,
Fondo del Mar,
Peces
Un zorro muy tierno llamado firefox
Posted by
Mrs Daddy
at
10:44 AM
0
comments
Labels:
Animales,
Animales Salvajes,
Animales Tiernos,
Mamíferos,
Zorro
Su opinión es muy importante para nosotros
Posted by
Mrs Daddy
at
10:31 AM
Aprovechando que usted estaba o aún está de vacaciones, hemos realizado importantes cambios en el Banco de Imágenes Gratuitas pensando obviamente en que todo sea más fácil para nuestros usuarios en general.
Si usted es un suscriptor por correo, un miembro de nuestra comunidad en facebook, un seguidor en Twitter o alguien que nos visita por primera vez, esto le interesará. Se lo digo, porque después de mucho tiempo, hemos rediseñado nuestra página haciéndola más ligera y navegable.
Antes usted debía hacer clic sobre el collage o las imágenes miniatura para abrir otro enlace que contenía las imágenes en tamaño mediano. Luego, debía usted darles clic para ampliar su tamaño y poder descargarlas.
Ahora, usted tendrá dos opciones. Podrá descargar nuestras colecciones completas con un solo clic o abajito del botón que dice 'DESCARGAR' hay un mensaje en el cual usted deberá hacer clic para ver las imágenes por separado y descargar únicamente las que más le gusten. Así de fácil y así de rápido son ahora las cosas en esta su página favorita que le ofrece como siempre los mejores recursos en Internet.
Recuerde que ahora usted podrá hacer clic en el collage o en la palabra descargar para iniciar de inmediato la transferencia de cada carpeta hacia su ordenador o ver las imágenes por separado. Como usted verá, todas las carpetas están comprimidas y vienen con la extención .ZIP para su mayor comodidad. De igual forma, los archivos han sido alojados en Google Docs para que usted no tenga que esperar 60 ó más segundos entre descarga y descarga.
Y aquí viene lo más importante...
Al igual que siempre, todas nuestra colecciones de imágenes son absolutamente gratis y usted puede bajar a su computadoras las que quiera. Y no sólo eso, también puede usted compartir con sus amigos nuestra página para que más personas en el mundo puedan aprovechar nuestros recursos. (www.BancodeImagenesGratuitas.com)
En esta ocasión, le pido por favor que me haga saber su opinión, sus notas, comentarios o sugerencias que nos permitan servirle de mejor manera cada día.
Si usted es un suscriptor por correo, un miembro de nuestra comunidad en facebook, un seguidor en Twitter o alguien que nos visita por primera vez, esto le interesará. Se lo digo, porque después de mucho tiempo, hemos rediseñado nuestra página haciéndola más ligera y navegable.
Antes usted debía hacer clic sobre el collage o las imágenes miniatura para abrir otro enlace que contenía las imágenes en tamaño mediano. Luego, debía usted darles clic para ampliar su tamaño y poder descargarlas.
Ahora, usted tendrá dos opciones. Podrá descargar nuestras colecciones completas con un solo clic o abajito del botón que dice 'DESCARGAR' hay un mensaje en el cual usted deberá hacer clic para ver las imágenes por separado y descargar únicamente las que más le gusten. Así de fácil y así de rápido son ahora las cosas en esta su página favorita que le ofrece como siempre los mejores recursos en Internet.
Recuerde que ahora usted podrá hacer clic en el collage o en la palabra descargar para iniciar de inmediato la transferencia de cada carpeta hacia su ordenador o ver las imágenes por separado. Como usted verá, todas las carpetas están comprimidas y vienen con la extención .ZIP para su mayor comodidad. De igual forma, los archivos han sido alojados en Google Docs para que usted no tenga que esperar 60 ó más segundos entre descarga y descarga.
Y aquí viene lo más importante...
Al igual que siempre, todas nuestra colecciones de imágenes son absolutamente gratis y usted puede bajar a su computadoras las que quiera. Y no sólo eso, también puede usted compartir con sus amigos nuestra página para que más personas en el mundo puedan aprovechar nuestros recursos. (www.BancodeImagenesGratuitas.com)
En esta ocasión, le pido por favor que me haga saber su opinión, sus notas, comentarios o sugerencias que nos permitan servirle de mejor manera cada día.
Haga usted clic aquí para escribir su comentario.
Sinceramente,
José Luis Ávila Herrera
Hermosos y coloridos wallpapers para ipad y ipad2
Posted by
Mrs Daddy
at
10:09 AM
Más de 250 wallpapers gratis en Alta Resolución
Posted by
Mrs Daddy
at
9:34 AM
0
comments
Labels:
Backgrounds,
Fondos,
Imágenes para tu PC,
Papel Tapiz,
Wallpapers
Mostrar los datos y la descripción de los vídeos de YouTube
Posted by
Mrs Daddy
at
8:28 PM
Con este código se puede mostrar en una entrada los datos de un vídeo que ha sido subido en YouTube.
El título, quien lo subió, la fecha de publicado, la duración, la cantidad de reproducciones, las estadísticas y la descripción.
Tiene un enlace para ir a verlo en la página de YouTube, y una imagen en miniatura del vídeo.
La imagen se genera automaticamente. (mas abajo explico como mostrar la imagen mas grande)
¿Cómo se hace...?
Ir a Diseño, Edición de HTML y justo arriba de </head>
Poner el siguiente código JavaScript:
Luego agregamos los estilos CSS.
Poner el siguiente código arriba de ]]></b:skin>
Cambiar los colores y la imagen a su gusto.
Para mostrar la descripción en las entradas, agregamos en la pestaña "Edición de HTML" el siguiente código:
Cada ves que pongamos el código debemos de cambiar la ID del vídeo marcado en rojo.
Si queremos mostrar la imagen mas grande, cambiamos el "2" por "1". (tener en cuenta de cambiar el estilo CSS)
El título, quien lo subió, la fecha de publicado, la duración, la cantidad de reproducciones, las estadísticas y la descripción.
Tiene un enlace para ir a verlo en la página de YouTube, y una imagen en miniatura del vídeo.
La imagen se genera automaticamente. (mas abajo explico como mostrar la imagen mas grande)
¿Cómo se hace...?
Ir a Diseño, Edición de HTML y justo arriba de </head>
Poner el siguiente código JavaScript:
<!-- Descripción vídeo YouTube -->
<script type='text/javascript'>
//<![CDATA[
function youtubeFeedCallback( data ){
document.write( '<img src="' + data.entry[ "media$group" ][ "media$thumbnail" ][ 0 ].url + '" width="' + data.entry[ "media$group" ][ "media$thumbnail" ][ 0 ].width + '" height="' + data.entry[ "media$group" ][ "media$thumbnail" ][ 0 ].height + '" alt="Default Thumbnail" title="Default Thumbnail" align="right"/>' );
document.write( '<span class="descvi-t"><b>Título:</b> <strong>' + data.entry[ "title" ].$t + '</strong></span><br/>' );
document.write( '<b>Autor:</b> ' + data.entry[ "author" ][ 0 ].name.$t + '<br/>' );
document.write( '<b>Publicado:</b> ' + new Date( data.entry[ "published" ].$t.substr( 0, 4 ), data.entry[ "published" ].$t.substr( 5, 2 ) - 1, data.entry[ "published" ].$t.substr( 8, 2 ) ).toLocaleDateString( ) + '<br/>' );
document.write( '<b>Duración:</b> ' + Math.floor( data.entry[ "media$group" ][ "yt$duration" ].seconds / 60 ) + ':' + ( data.entry[ "media$group" ][ "yt$duration" ].seconds % 60 ) + ' (' + data.entry[ "media$group" ][ "yt$duration" ].seconds + ' Segundos)<br/>' );
document.write( '<b>Reproduccion(es):</b> '+ data.entry[ "yt$statistics" ].viewCount + '<br/>' );
document.write( '<b>Estadísticas:</b> ' + data.entry[ "yt$statistics" ].favoriteCount + ' Favorito(s); ' + '<br/>' );
document.write( '<b>Descripción:</b>' );
document.write( data.entry[ "media$group" ][ "media$description" ].$t.replace( /\n/g, '<br/>' ) );
document.write( '<br/><a href="' + data.entry[ "media$group" ][ "media$player" ].url + '" target="_blank">Ver en YouTube</a>' );
}
//]]>
</script>
Luego agregamos los estilos CSS.
Poner el siguiente código arriba de ]]></b:skin>
.descvi{width:75%;margin-left:auto;margin-right:auto;border:10px solid #333;padding:10px;background:#111;color:#fff;font-size:12px;line-height:18px}
.descvi img{margin:0px;padding: 8px;background: #333;border: 0;}
.descvi a{padding-right: 44px;background: transparent ;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibqd0mhxjj9Kn16kyv_HfoE2eHB1ujKscqpkGR14FI3yH4WmivTCNtoqj6sg-_yt-jZ08OdoTnw7EV5wI01F_zhzn1oVfvU_5FcOdsUINMAC1lK8GmMJqwdxFgYJUaCUk8EZYY3yy6F0cZ/s0/youtube.jpg) center right no-repeat;font-size:16px ;margin-top:3px}
.descvi-t strong{color:red;font-size:14px;}
.descvi-t b{color:#fff;font-size:12px;}
Cambiar los colores y la imagen a su gusto.
Para mostrar la descripción en las entradas, agregamos en la pestaña "Edición de HTML" el siguiente código:
<div class="descvi">
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/6jGPJyLdDck?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script></div>
Cada ves que pongamos el código debemos de cambiar la ID del vídeo marcado en rojo.
Si queremos mostrar la imagen mas grande, cambiamos el "2" por "1". (tener en cuenta de cambiar el estilo CSS)
0
comments
Labels:
Videos,
YouTube
Portaretrato psd para colocar la foto de tu niña 1
Posted by
Mrs Daddy
at
12:00 PM
Portaretrato con lindas flores para el Día de las Madres 2
Posted by
Mrs Daddy
at
11:49 AM
Portaretrato con rosas para el Día de las Madres 1
Posted by
Mrs Daddy
at
11:42 AM
Subscribe to:
Posts (Atom)