Que onda! Hace unos días que hice un nuevo blog personal y con un diseño muy personalizado Jeje, pues les enseñaré como hacer que las imagenes del blog se vean redondeadas.
Para hacer este efecto debemos aplicar los siguientes atributos al estilo CSS:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Para ser más claro lo explicaré paso a paso (Sígue todos los pasos con atención y guarda una copia de tu plantilla antes de empezar):
Bien aqui es donde decidiremos a que parte del blog le aplicaremos dicho efecto -Por ejemplo: en mi blog personal tengo un efecto a las imagenes de las entradas y otro a las imagenes de la sidebar.
Imagenes con puntas redondeadas en TODA la plantilla
Recordamos que ya estamos en la edición HTML de nuestro blog, ahora para hacer este efecto a toda la plantilla buscamos usando (Ctrl+F) esto que esta entre comillas ".img {" y si no les aparece ".img{", y si aun así no aparece (Recuerden que las plantillas descargadas pueden no tener la misma estructura) buscamos "img {" o "img{".
Una vez que lo hallamos encontrado vamos a reemplazar el texto quedando así:
padding: 0px;
background: #fff;
margin: 5px 0px 5px 0px;
border: 1px solid #ddd;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
Y quedará así:
...Otro estilo mejorado por el padding que dejará un espacio para verse el background:
padding: 6px;
background: #fff;
margin: 5px 0px 5px 0px;
border: 1px solid #ddd;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
Y quedará así:
Imagenes con puntas redondeadas SÓLO en las entradas
Bien, ya vimos los códigos CSS para conseguir estos diseños, ahora para que solamente las imagenes de las entradas del blog se vean de esta manera sigamos estos pasos:
- "post{"
- "post {"
- "entry{"
- "entry {"
Una vez que lo encuentres pon debajo de su "}" el siguiente código CSS:
Nota: Si ya lo tienes sólo remplaza el contenido.
padding: 6px;
background: #fff;
margin: 5px 0px 5px 0px;
border: 1px solid #ddd;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
**Recuerda Puede ser "entry" o "post" depende el que hayan encontrado. De igual manera pueden jugar con los numeros para conseguir el efecto que deseen (A mayor numero más curva), pero no olviden No borrar el margin.
Imagenes con puntas redondeadas SÓLO en la sidebar
Bien, aquí hacemos lo mismo pero esto es más sencillo, buscamos usando (CTRL+F) lo siguiente: "sidebar{" ó "sidebar {" y justo debajo del ultimo "}" coloca el siguiente código CSS:
padding: 6px;
background: #fff;
margin: 5px 0px 5px 0px;
border: 1px solid #ddd;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
Y listo, esto es todo. Espero que te guste el diseño y a la próxima les enseñare cómo hacer jugar con el efecto hover en las imagenes como en mi blog personal. Si tienes dudas dejame tus comentarios.
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
border-radius: 5px;
img {
img {
.entry img {
.sidebar img {
Que onda! Quiero aprovechar para enseñarles el cómo insertar este gadget muy poco usado que nos ofrece youtube, se trata de un botón para suscribirse a tu canal, lo puedes usar para insertarlo en la sidebar de tu blog o en tu página web.
El código para este gadget es muy sencillo, consta de un iframe -Un iframe es un marco flotante que puede estar colocado en cualquier parte de la página. La ventaja que tiene sobre los frames o marcos tradicionales es que se puede colocar donde sea necesario, sin partir la página en varias partes y además puede ser dinámico. Aprender más.
Y el resultado es el gadget que se encuentra a continuación... -Un gadgets sencillo pero que seguramente hará aumentar tus suscriptores.
Fuente: Blog de youtube en español
El código para este gadget es muy sencillo, consta de un iframe -Un iframe es un marco flotante que puede estar colocado en cualquier parte de la página. La ventaja que tiene sobre los frames o marcos tradicionales es que se puede colocar donde sea necesario, sin partir la página en varias partes y además puede ser dinámico. Aprender más.
<iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=Usuario_Youtube" style="overflow: hidden; height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>
Y el resultado es el gadget que se encuentra a continuación... -Un gadgets sencillo pero que seguramente hará aumentar tus suscriptores.
Fuente: Blog de youtube en español
Que onda! Pues hoy les traigo el primer tutorial de dockerblogs en nuestro canal de youtube, y pues solo puedo mencionar que este será el primero de muchos más tutoriales que subiré al canal.
Les enseñaré como pasar un dibujo que hayan realizado -Preferentemente en una hoja blanca lisa, es decir, sin líneas ni cuadriculas- a una imagen de computadora. Esto con un método muy sencillo del cual solo les doy una pequeña explicación pues ya había terminado el proyecto cuando se me ocurrió hacer el video.
El dibujo que hice fue del dragón Ziu del campamento web para el concurso Diziubuja y será con el cual concursaré.
Y bien, el método es muy sencillo y lo explicaré en unos breves pasos y lo concluiré con el video tutorial.
Esto me basto para crear mi versión del dragón Ziu, pero con más tiempo, dedicación y paciencia pueden conseguir unos mejores resultados. Recuerden que pueden agregar los efectos y toques personales que deseen.
En mi caso solo me tarde cerca de 30 minutos de edición sin incluir la del video. Pero con más tiempo y con mejores detalles se puede conseguir mucho más.
Por ultimo, solo invito a todos ustedes lectores y bloggers a participar en el concurso de Diziubuja por parte de nuestro amigo de Campamento Web -Un saludo Emilio-.
Les enseñaré como pasar un dibujo que hayan realizado -Preferentemente en una hoja blanca lisa, es decir, sin líneas ni cuadriculas- a una imagen de computadora. Esto con un método muy sencillo del cual solo les doy una pequeña explicación pues ya había terminado el proyecto cuando se me ocurrió hacer el video.
El dibujo que hice fue del dragón Ziu del campamento web para el concurso Diziubuja y será con el cual concursaré.
Y bien, el método es muy sencillo y lo explicaré en unos breves pasos y lo concluiré con el video tutorial.
- Hacer el dibujo a mano.
- Tomarle fotografía con una cámara con buena resolución o escanear el dibujo.
- Pasar la imagen resultante a la computadora y posteriormente abrirla con Adobe Photoshop CS5 o cualquier otra versión.
- Quitar el fondo usando la herramienta Varita mágica.
- Rellenar la imagen con los colores que quieran usando la herramienta Pincel.
- Y rellenar los espacios vacios con herramienta Pincel o utilizando el efecto de capa "trazo".
Esto me basto para crear mi versión del dragón Ziu, pero con más tiempo, dedicación y paciencia pueden conseguir unos mejores resultados. Recuerden que pueden agregar los efectos y toques personales que deseen.
En mi caso solo me tarde cerca de 30 minutos de edición sin incluir la del video. Pero con más tiempo y con mejores detalles se puede conseguir mucho más.
Por ultimo, solo invito a todos ustedes lectores y bloggers a participar en el concurso de Diziubuja por parte de nuestro amigo de Campamento Web -Un saludo Emilio-.
Este es un pequeño consejo por si te compraste un nuevo televisor o un monitor para tu computadora o laptop y no quieres que le pase nada a la pantalla, que no le caiga ni una partícula de polvo ¿Cierto? Lo que te importa más que nada es mantener el brillo de la pantalla, ¿verdad? Bueno, aquí te vamos a enseñar cómo limpiar tu pantalla sin dañarla.
Antes que nada, por seguridad, debes desconectar de la luz la pantalla.
En el caso de una laptop, es necesario remover la batería y desconectar el cargador del equipo.
Antes que nada, por seguridad, debes desconectar de la luz la pantalla.
En el caso de una laptop, es necesario remover la batería y desconectar el cargador del equipo.
No uses los siguientes productos, ya que dañan tu equipo:
- Alcohol etílico
- Acetona
- Acido etílico
- Amoniaco
- Gasolina
- Cloro metano
Entonces, ¿qué necesitas para limpiar tu pantalla? Aquí algunos productos:
- Toalla de micro fibra
- Aire comprimido
- Líquido para pantallas o agua
- Hisopos
- Alcohol etílico
- Acetona
- Acido etílico
- Amoniaco
- Gasolina
- Cloro metano
Entonces, ¿qué necesitas para limpiar tu pantalla? Aquí algunos productos:
- Toalla de micro fibra
- Aire comprimido
- Líquido para pantallas o agua
- Hisopos
Ahora, sigue estos pasos para limpiar tu pantalla.
Paso 1. Usa aire comprimido para eliminar el polvo de la pantalla. Para quitar el polvo de las ranuras, usa los hisopos.
No uses el aire comprimido para limpiar las ranuras; el objetivo es evitar que el polvo entre al interior de la pantalla.
Paso 1. Usa aire comprimido para eliminar el polvo de la pantalla. Para quitar el polvo de las ranuras, usa los hisopos.
No uses el aire comprimido para limpiar las ranuras; el objetivo es evitar que el polvo entre al interior de la pantalla.
Paso 2. Tienes que humedecer la toalla de microfibra (es importante que esté sólo húmeda, de lo contrario el agua puede entrar a los orificios y dañar el equipo).
Paso 3. Toma la toalla y comienza a limpiar la pantalla sin presionar mucho; hazlo despacio para evitar que se raye con las partículas de polvo que hayan quedado pegadas en la pantalla. No te preocupes, la toalla removerá estas partículas.
Si vas a usar líquido especial, jamás lo viertas directamente a la pantalla. Lo que tienes que hacer es verter una pequeña cantidad en la toalla y hacer lo mismo que dice el paso 3.
Paso 4. Utiliza otra toalla para secar, por si quedan residuos de agua o líquidos en la pantalla.
Después de esto, tu pantalla quedará limpia y lista para mostrar tus programas favoritos.
