Canva » crea collages impresionantes online

¿Te gustan los collages? A mí sí. Son una forma muy bonita de mostrar nuestras fotos y hoy les traigo una herramienta online que nos ayuda a crear collages impresionantes en base a plantillas.
collage, online, plantilla, gratis, free

Pack de marcos en formato PNG

¿Qué tal el día? Espero que muy bien. Hoy vengo con un pack de 21 marcos gratuitos en formato PNG que pueden utilizar para una infinidad de cosas: adornar un post, hacer un cartel, una tarjeta, como marco para alguna foto, etc., etc.

Los marcos vienen en distintas formas y colores, pero si quieren cambiarle el color, con algún editor de imágenes (como Photoshop por ejemplo) lo pueden hacer fácilmente. Y al estar en formato PNG no necesitan recortar nada sino simplemente utilizarlos.

frame, free, download, photo, marcos, png, pack, gratis
Descargar vía Mega

Menú horizontal animado con jQuery

Espero que la semana les esté yendo muy bien a todos. Hoy les traigo un tutorial que seguro le va a resultar muy útil a más de uno. Se trata de un menú sencillo de implementar.

jQuery, menu, animated, blog, web, blogger

Este menú horizontal tienen un efecto animado al pasar el cursor sobre cada enlace y este efecto se logra gracias a la implementación de la librería jQuery.

DEMO
(Pasar el cursor sobre el menú)

Vamos a empezar con el tutorial:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahorar agregaremos la librería jQuery. Si es que ya la tenemos en nuestra plantilla, no es necesario agregarla nuevamente y podemos saltarnos al paso 3.§ del tutorial.

Si no tenemos la librería, la agregaremos del siguiente modo. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos ]]></b:skin> y justo debajo pegaremos el siguiente script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
3.§ Debajo del script anterior (de la librería jQuery), pegaremos este otro script:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#topnav li").prepend("<span></span>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({marginTop: "-40"}, 250);
} , function() {$(this).find("span").stop().animate({marginTop: "0"}, 250);});
});
//]]>
</script>
4.§ Ahora debajo de los scripts anteriores, pegaremos los estilos CSS, donde podremos cambiar colores, tamaño de fuente, tipo de fuente, etc. :
<style type='text/css'>
ul#topnav {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#topnav li {
float: left;
height: 40px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
ul#topnav a, ul#topnav span {
clear: both;
height: 20px;
line-height: 20px;
padding: 10px 15px;
float: left;
background: #000; /* color fondo menú */
font-size: 16px; /* tamaño de la fuente */
color: #fff; /* color de la fuente */
border-right: 1px solid #fff; /* grosor, tipo y color de borde */
font-family: Arial; /* fuente tipográfica */
}
ul#topnav li a:hover {
background: #9999cc; /* color fondo menú al pasar el cursor */
color: #000; /* color de la fuente al pasar el cursor */
}
</style>
5.§ Guardamos la plantilla.

6.§ Ahora vamos a Diseño - Añadir un gadget - HTML/Javascript. Agrearemos las siguientes líneas HTML con los enlaces de nuestro menú.
<ul id='topnav'>
<li><a href="AQUI-URL"> Inicio </a></li>
<li><a href="AQUI-URL"> Menú-1 </a></li>
<li><a href="AQUI-URL"> Menú-2 </a></li>
<li><a href="AQUI-URL"> Menú-3 </a></li>
<li><a href="AQUI-URL"> Menú-4 </a></li>
</ul>
7.§ Damos clic en Guardar y arrastramos el gadget debajo de la cabecera de nuestro blog y damos clic en Guardar disposición.

¿Te gustó el menú?
También te pueden ser útiles estos menús

inicio