Codigos y Recursos para Paginas Web. Recursos Webmaster

Este efecto se activa al pasar el Mouse sobre la imágen y puede tener diferentes usos. Por ejemplo, puedes mostrar más información de un tema que representa a la imágen o también puede ser útil en un banner de publicidad.

Para agregarlo en Blogger, debes ir al diseño HTML de tu blog y buscar ]]> para insertar este código antes de esa linea: (Control + A para seleccionar todo)

.view { background-color:#FFFFFF; /* fondo borde */ border: 10px solid #FFFFFF; /* color borde */ box-shadow: 2px 3px 5px #696969; /* sombra borde */ cursor: default; float: left; height: 200px; /* alto de la imagen */ margin: 10px; overflow: hidden; position: relative; text-align: center; width: 250px; /* ancho de la imagen */ } .view .mask, .view .content { height: 200px; /* alto del contenido es el mismo que el de la imagen */ left: 0; overflow: hidden; position: absolute; top: 0; width: 250px; /* ancho del contenido es el mismo que de la imagen */ } .view img { display: block; position: relative; } .view h2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); color: #FFFFFF; font-size: 17px; margin: 20px 0 0; padding: 10px; position: relative; text-align: center; text-transform: uppercase; } .view p { color: #FFFFFF; font-family: Georgia,serif; font-size: 12px; font-style: italic; padding: 10px 20px 20px; position: relative; text-align: center; } .view a.info { display: inline-block; padding: 7px 14px; text-decoration: none; text-transform: uppercase; } .view-third img { box-shadow: 0 0 1px #000000; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .view-third .mask { background-color: rgba(0,0,0,0.6); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg); -webkit-transition: all 0.2s 0.4s ease-in-out; -moz-transition: all 0.2s 0.4s ease-in-out; -o-transition: all 0.2s 0.4s ease-in-out; -ms-transition: all 0.2s 0.4s ease-in-out; transition: all 0.2s 0.4s ease-in-out; } .view-third h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third p { -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third a.info { -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } .view-third:hover h2 { background: none repeat scroll 0 0 #9C1813; /* Título */ border-top: 1px solid #000; /* color borde top título */ border-bottom: 1px solid #000; /* color borde bottom título */ text-shadow: 0px 1px 1px #111; /* sombra título */ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; } .view-third:hover p { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } .view-third:hover a.info { background: none repeat scroll 0 0 #9C1813; /* color de fondo enlace leer más */ border: 1px solid #000; /* color borde enlace leer más */ color:#FFFFFF; /* color enlace leer más */ text-shadow: 0px 1px 1px #111; /* sombra enlace leer más */ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; }

Para cada imágen que quieras añadir el efecto, debes usar el siguiente código y reemplazar lo que se indica:

<div class="view view-third"> <img src="http://LINk_DE_LA_IMAGEN" /> <div class="mask"> <h2>Título del Tema</h2> <p>Descripción</p> <a class="info" href="http://LINK_DEL_ENLACE">Más Información</a> </div> </div>

>> Leer Todo

Este widget es de gran utilidad para conocer la opinión de tus lectores acerca de tus entradas por medio de un sistema de votación de estrellas (estilo Youtube antiguo).
Además, te agrega un cuadro con las entradas relacionadas a tu post, pudiendo elegir entre texto o en cuadros con información, como muestra la imágen de arriba.

Para instalarlo, entra a Outbrain

Elige el tipo de recomendación: Texto o Miniatura (Thumbnail)
y Tipo de feedback: Estrellas, Manito arriba o nada.

Luego, eliges la plataforma de tu blog e idioma y haces clic en Instalar.
Si lo deseas te puedes registrar, pero es opcional.

>> Leer Todo

Para decorar tu sitio web o blog acorde a las fechas, una buena idea es adornarlo con un fondo de fuegos artificiales para recibir el año nuevo.

Además, en este blog podrás encontrar todo tipo de recursos en cuanto a diseño gráfico... fondos, íconos, wallpapers, texturas etc

Descarga: Clic aqui

>> Leer Todo

Verify Email Adress es útil y simple, su finalidad es comprobar si un email es correcto y existe, especialmente creado para cuando, por ejemplo, te dicen un correo por teléfono y no estás seguro si lo anotaste bien... o esas veces que te rebota el mail con un mensaje de "no se pudo enviar".

Solo ingresas a la página, ingresas tu mail en el lugar que corresponde y haces clic en Verify!.

Saludos!

>> Leer Todo

Este efecto es muy utilizado actualmente para logos de páginas web o de cualquier cosa, es muy llamativo y es fácil de hacer en Photoshop.

Para empezar, crea un nuevo documento (Ctrl+N) o trabaja en una imagen que ya tengas. Procede a escribir el texto que quieras reflejar.



Ve a Layer/Duplicate Layer... Te queda el texto duplicado con el que vas a trabajar.



Para rotar la imagen selecciona Edit/Transform/Flip Vertical. Para poder modificar el texto debes hacer click derecho en la capa copiada y seleccionar: Rasterize Layer.



Crea una selección dejando un espacio libre en la parte de abajo.



Ve a Select/Feather (Alt+Ctrl+D). Usa el radio que gustes (yo usé 20 pixels) y presiona Shft+Ctrl+I (Select/Inverse)



Presiona la tecla Supr del teclado hasta que te guste como queda.



Para darle un efecto más realista bajale la opacidad. Yo la bajé a 50%



Para que se vea mejor dirigete nuevamente a Edit/Transform pero esta vez selecciona Perspective. Arrastra cualquier punto de abajo (el de las esquinas) y luego elije otra herramienta, dandole a Apply de la ventana "Apply the Transformation".



Con esto ya terminas, y puedes agregar todo lo que quieras. En mi texto final dupliqué el reflejo, aplicandole el filtro de desenfoque gausiano (Filter/Blur/Gaussian Blur). Luego le apliqué una sobreexposición en "Soft light" (en layers, al lado de opacity). A la letra central le puse brillo alrededor llendo a Layer/Layer Style/Outer Glow. En blend Mode: normal - En el recuadro de color seleccioné el blanco - Opacity: 100% - Size: 10 - Technique: Softer.



Para hacer que la luz se refleje como si hubiera suelo, se hace de esta forma: vé al texto reflejado y duplicalo (Layer/Duplicate Layer...). Dirigete a Filter/Blur/Motion Blur. Elije la distancia que quieras y luego coloca la capa en modo de Lighten. Con la herramienta de movimiento, o bien con Edit/Transform/Scale... alarga el texto (que ya no es texto, sino una luz). Y listo, queda como un piso alumbrado.

>> Leer Todo

Les enseñaré a crear una firma con un gif animado de este estilo:



Pero cuando aprendan como hacerlo, podrán crear el gif que ustedes quieran
Para esto usarémos el programa Photoshop CS2 de Adobe.

Paso 1: Crear un nuevo documento (Control + N)

Le ponen los tamaños que permiten las firmas del foro, 350x40 pixeles.



Paso 2: Buscan la imágen que quieran (en mi caso la saqué de Google imágenes).



y la pegan (Control + V) en el documento.

Paso 3: Abren la ventana de animación: Windows > Animation (Ventana > animación).

Y en la nueva ventanita que abrió, hacen clic en el boton "Duplicates selected frames", como muestra la siguiente imagen



En el primer Fotograma, mueven la imágen hacia arriba (o donde quieran que parta el gif)
En el fotograma copiado, el segundo... mueven la imágen hacia abajo (hacia donde se moverá).



Ahora que dejaron listas las imagenes donde comenzará y terminará el movimiento...
Vuelven a hacer clic en el Fotograma 1 y hacen clic en el boton "Tweens animation"



En la ventana que abre, no hagan nada más que poner el numero de fotogramas...
Para que la animación no sea tan lenta, con 10 frames está bien (Aunque la sig imágen dice 30 )



Apretan aceptar y verán que se crearon los 10 fotogramas, y en cada uno, la imágen se mueve un poco hasta llegar al final.

Paso 4: Hacer volver la imágen (para que sea una animación ciclica).

Para asegurarnos que al volver el gif, la imágen quede ahi mismo donde comenzó...
Van al Fotograma 2, y vuelven a apretar en "Duplicate selected frames"



El fotograma que se acaba de copiar, lo arrastras hasta el final, despues del último fotograma:



Ahora haces clic en el penúltimo fotograma (El que esta a la izquierda del que acabas de arrastrar, 32 en el ejemplo)

y vuelves a hacer clic en "Tweens animation", pones 10 frames nuevamente y aceptar.

Paso 5: Exportar el gif

Ahora solo haces clic en "File > Save for web" (Ahi puedes cambiar opciones de colores y formatos, pero no es necesario mover nada) y pones aceptar, y la guardas donde quieras



Listo, tenemos el gif terminado, ahora lo suben a una página como imgur.com y lo ponen en su firma.

>> Leer Todo

Hace tiempo recuerdo haber pasado horas buscando un buen formulario de contacto y fácil de hacer, sin tanto código ni cosas raras, ahora recien encontre lo que buscaba: Email me.

Este sitio, te crea un botón que dice simplemente "Email me", y al hacer clic se despliega un formulario de contacto sutílmente para que te envien mails a tu correo.

Como hacerlo? Muy fácil.
Primero ingresas aqui.
Haces clic en "Get your buoton", luego ingresas tu correo y nombre... y Listo!
Ya has creado tu formulario de contacto.

Ahora solo debes pegar el código donde quieras que aparezca el botón y ya pueden contactarte. En blogger puedes agregarlo en Diseño > Agregar nuevo Widget > HTML/Javascript.

>> Leer Todo

Una buena forma de dar a conocer tu web y aumentar visitas es por ejemplo, el botón "Me gusta" de Facebook, donde una sola persona haga clic en Me gusta, la verán muchos más y así más gente conocerá tu sitio.

Pero facebook pone a disposición nuestra muchos más plugins, que te pueden hacer más fáciles algunas cosas, y permite a tus usuarios interactuar con sus amigos de la red social.

Plugin de Comentarios

Con este plugin, no es necesario crear, por ejemplo, un libro de visitas, ya que solo copias el código que te proporcionan y cualquiera puede comenzar a comentar en tu página, y además estos comentarios se publican en el facebook de cada persona si así lo desea.

Solo basta con ingresar acá y poner la dirección de tu web, para luego copiar el código proporcionado.

Feed de actividad de amigos

Esto te muestra la reciente actividad de tus amigos en tu página, solo ingresa aquí e introduce tu dirección.

Hay muchos más, como el famoso botón "Me gusta", que los puedes encontrar acá.

>> Leer Todo

No tiene gran utilidad pero sirve para poner un mensaje corto o una bienvenida con un lindo diseño.

La web es Superstickie y es muy fácil de usar, solo debes escribir el texto y elegir los colores de tu sticker.

Cuando termines, le das clic a "Create" y listo, ahora puedes hacer clic en "Save to imgur" para copiar el enlace directo (direct link) y ponerlo en tu web.

>> Leer Todo

Los slide generalmente son utilizados para mostrar varias imágenes en movimiento, o para crear un estilo de galeria en poco espacio y con un bonito efecto.

El Slide que pongo ahora no se mueve solo como todos, se muestran varias imágenes divididas y que se muestran completamente al pasar el mouse sobre ellas, es más bien útil en el header de una página o blog elegante o formal, que además informa con un pequeño texto sobre cada imágen.

Ejemplo haciendo clic aqui.

Si quieres añadir este a tu blog (o web), debes ir a Diseño > Edición Html y buscar el tag <header> y pegar justo abajo el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

Guardas, y en tu web agregas el Html dentro del body, y en el caso de Blogger vas a Diseño > Elementos de página, y bajo la cabecera creas un nuevo "gadget" de Html/Javascript, y pegas el siguiente código:

<div id='slidearea'><br /><ul class='kwicks'><br /><li class='kwik'><br /><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /></ul><br /><br /><div class='clear'/><br /></div></div>

Ahora, en ese código hay que reemplazar los textos que digan "Url-imagen" por tu imagen de 750 x 256 pixeles.
"Titulo-contenido" lo reemplazas por el título que tendrá cada imágen, y "Texto-contenido" por la información bajo el titulo de cada imágen.

Via Gema blog

Saludos ^^

>> Leer Todo