Script para insertar vídeos Youtube en blogger

Tenía el blog un poco olvidado trabajando en nuevas cosas y proyectos para el mismo, pues ahora vengo con más fuerza, aca quiero dejarles un simple script que permitirá insertar vídeos en blogger sin necesidad de añadir el código completo, solamente con tener el id podemos hacer correr el mismo, funciona de esta manera.

Explicación

1. Esto seria el link del vídeo: http://www.youtube.com/watch?v=3zU1JP4_qOE

2. Y esto vendría siendo la ID del vídeo: 3zU1JP4_qOE

Realización del Script

Vamos a crear el script...

1. Copiamos el codigo del reproductor el de YouTube es este: 2. Antes de cada " ponemos un \ , Nos tiene que quedar asi: 3. Ahora pondremos el nombre del reproductor en la ID para que el script lo pueda encontrar, pegamos esto " + IDyoutube + " lo pegamos donde va 3zU1JP4_qOE y nos tiene que quedar asi: 4. Ya que tenemos lo principal listo lo pegamos al resto del script: 5. Nos tiene que quedar algo asi: 6. Y lo pegamos antes de < /head >

Utilizar el Script

Para ejecutar el script solo tienes que añadir este código con el respectivo id del vídeo:

Leer Artículo Completo »

Generar prefijos CSS3 con PHP

Volviendo con más fuerza eh decidido renovar el blog con un nuevo diseño y nuevas ideas, bueno los navegadores actuales soportan las propiedades CSS3 con prefijos específicos para cada tipo de navegador, hasta que la propiedad sea aprobada y finalizada por el W3C. Eso significa mucha repetición a la hora de escribir código. Pongamos como ejemplo la siguiente declaración: Más código significa mayores probabilidades de cometer errores y produce hojas de estilos que son más largas y más difícil de mantener. En lugar de escribir el prefijo específico del tipo de navegador y los valores una y otra vez, podemos utilizar PHP para generarlo por nosotros.

Podemos utilizar una función PHP para producir el código CSS3. La función tendrá que saber dos cosas: el nombre de base de la propiedad (por ejemplo, border-radius) y el valor asociado a ella ("5px"). Por lo tanto, deberíamos escribir: La primera línea es para indicar el tipo de contenido del archivo php. Obviamente a la hora de invocar nuestra hoja de estilos lo haremos llamando el archivo php: En la función css3_write queremos producir la correspondiente declaración de CSS para todos los navegadores. La propiedad base se incluye al final, como fallback. Construiremos la declaración utilizando una serie de concatenaciones y utilizando \n (nueva línea) para hacer que la función escriba un CSS más legible.

Para producir nuestro CSS3 tan sólo tenemos que llamar a la función con la propiedad CSS3 y el valor para dicha propiedad. Por ejemplo: Lo que generará el siguiente código: Este método es una alternativa al uso de compiladores como Less o Sass.

Leer Artículo Completo »

Animando elementos input con transiciones CSS

El siguiente ejemplo muestra cómo crear crear un resplandor que aparece al tener el foco un elemento input. La aparición de este resplandor o "glow" se realiza mediante transiciones CSS y el método box-shadow.

CSS

HTML

Ahora con tan solo esos pequeños códigos generamos algo como lo siguiente:

Nombre:

Leer Artículo Completo »

Efecto redondeado en imágenes de Blogger

Esta vez vamos a reunir el efecto box-shadow y el border-radius para redondear imágenes de blogger de forma sencilla y de manera elegante.

Añadir a blogger

Lo unico que debemos hacer es dirigirnos a la administración de nuestro blog y seleccionamos la pestaña Plantilla y elegimos Edición de HTML, luego seleccionamos la casilla Expandir plantillas de artilugios y antes de la etiqueta </b:skin> añadimos este código: Con eso obtendríamos un resultado como este:


Capacidad en Navegadores

Este truco más o menos funciona en cualquier navegador (por ejemplo, Chrome, Firefox y Safari) que apoya border-radius, box-shadow, :before and :after. Los navegadores no compatibles recurrirá a la imagen sin ningún tipo de estilos.

Creatividad

Como puede ver, se puede crear casi cualquier estilo con la combinación de: :before and :after elemento pseudo. puede compartir con nosotros los estilos mas creativos, por favor, compartir en los comentarios.

Leer Artículo Completo »

Estilo CSS para Blockquote

Tenía mucho tiempo sin realizar un artículo, pues estuve un poco ocupado todos estos dias, sin embargo accedí en mis tiempos libres para aprobar y responder comentarios, sugerencias y cuestiones pero ya me estoy reincorporando, hoy veremos la forma de aplicar un bonito estilo para Blockquote para citar contenido.

También vamos a descartar las imágenes de símbolos tipográficos, añadiendo una con estilo CSS, veamos un ejemplo a continuación:

Empecemos

Para comenzar lo primero que vamos a hacer será crear nuestra blockquote con algo de HTML sencillo antes de añadir estilo, con un código como el siguiente: Ahora un poco de CSS para proporcionar un estilo básico para el blockquote. Dejando el estilo de navegador por defecto y una combinación de colores ligeros: Pueden adaptar los estilos a su gusto, es cuestión de solo editar el código CSS y adaptarlo a estilo de su web o blog.

Y hablando de blog, también podemos incorporar este estilo para Blockquote en Blogger solo bastaría con añadir el siguiente código antes de la etiqueta </b:skin> de nuestro blog: Fuente: Pure CSS Blockquote Styling

Leer Artículo Completo »

 
¡Recomendar este blog!