Caja/imagen con efecto rebote.

Hello! Bonjour! Como están mi mas adorables seguidores ¿?

Si! aunque no lo puedan creer, acá estoy yo, con un tutorial ~

Me estuvieron pidiendo varias veces como hacer el efecto de los links de afiliados, & por mas que les explicaba que debían de usar como base este menú, no hubo caso de que me entendieran & termine haciendo este tutorial.

Una de las ideas que puedes hacer con este efecto:
¡VISTA PREVIA!

Bien, comencemos!

Primero que nada, nos dirigimos a Plantilla / Edición HTML & presionando primero sobre el recuadro del código, abrimos el buscador (CTRL + F) & escribimos la siguiente etiqueta:

</body>

ARRIBA de esta pegaremos lo que sera el script que permitirá el efecto de rebote, el cual es el siguiente:

<script type="text/javascript" src="http://static.tumblr.com/u6pbfuu/EBwm3o3xm/jquery-1.4.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/u6pbfuu/cndm3o3wy/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {
//if mouse over and mouse out
$('.boxTC').hover(
function () {


value = $(this).find('img').outerHeight() * -1;


//for left/right if you have different width and height,
//commented out because we are using up/down in this example
//value = $(this).find('img').outerWidth() * -1);

//animate the image
// you can change the sliding direction by changing bottom to left, right or top
// if you changed this, you will have to change the position of the hover out as well
$(this).find('img').stop().animate({right: value} ,{duration: 500, easing: 'easeOutBounce'});

},
function () {

//reset the image
// the position property (bottom), it must be same with the on in the mouseover
$(this).find('img').stop().animate({right:0} ,{duration: 500, easing: 'easeOutBounce'});

});

//if user clicked on the thumbnail
$('.boxTC').click(function () {
//grab and execute the first link in the thumbnail
window.location = $(this).find('a:first').attr('href');
});

});
</script>

Aquí podemos editar donde se encuentra remarcado: "right"; esto nos indica hacia donde se moverá nuestra imagen a la hora del efecto, entonces podemos cambiar, siempre ambas por igual, right por left, top o bottom.
Una vez terminada esta parte, nos vamos a editar nuestras cajitas.
Sin irnos de la edición HTML volvemos a buscar (CTRL + F) la siguiente linea:

]]></b:skin>

donde, ARRIBA de ella colocaremos el código CSS que nos permitirá editar a nuestro gusto & antojo el menú o la sección de afiliados (vemos que podemos utilizar el efecto para lo que queramos):

.boxTC {
width: 100px; /* ANCHO */
height: 100px; /* ALTO*/
font-size: 12px; /* TAMAÑO DEL TEXTO */
font-family: courier; /* TIPO DE LETRA */
border-radius: 0px; /* TAMAÑO DE CIRCUNFERENCIA */
background: #FFF; /* COLOR O IMAGEN DE FONDO */
border: 10px solid #fafafa; /* ESTILO DEL BORDE */
position: relative;
overflow: hidden;
float: left;
display: inline;
margin: 10px;
}
.boxTC img {
width: 100%; /* ANCHO DE LA IMAGEN */
height: 100%; /* ALTO DE LA IMAGEN */
display:block;
position:absolute;
z-index:500;
}
.boxTC .inbox {
position:absolute;
display:block;
z-index:0;
padding: 5px;
text-align: center; /* UBICACION DEL TEXTO */
color: #aaa; /* COLOR DEL TEXTO */
}
.boxTC .inbox a {
color:#777; /* COLOR DEL LINK */
text-decoration: none;
}
.boxTC .inbox a:hover {
color:#000; /* COLOR DEL HOVER */
}  

Editamos lo indicado en MAYÚSCULA.
Luego de tener todo super bonito, con colores hermosos & demás, nos toca colocar las cajitas/imagenes donde queramos.
Para esto selecciona el siguiente código HTML:

<div class="boxTC">
<img src="URL DE LA IMAGEN VISIBLE" />
<div class="inbox">
AQUI TU TEXTO/LINK
</div>
</div>

Elige donde ubicarlo & sigue los pasos:

En un gadget:

Vamos a Diseño / Anladir Gadget / HTML/javascript & allí dentro pegas el código anterior, le colocas el texto & la imagen que te guste & guardas!

En una pagina o entrada:

Nos dirigimos a Nueva entrada o Nueva pagina, seleccionamos el HTLM, ubicado en la parte superior izquierda del recuadro donde escribimos & allí pegamos el código anterior.

En una plantilla clásica:

Aquí es según donde lo quieras colocar, si harás una plantilla solo para tus afiliados, ubica el código anterior luego de la etiqueta "<body>" o dentro de las etiquetas que formen el cuerpo de tu blog, por ejemplo puede ser "<div class="content">" o algo así.
En mi caso utilizo esta base de plantilla para mi afiliados:

VER/DESCARGAR CODE BASE - SKIN AFILIADOS
(se pide por favor creditos si se utiliza el codigo como base!)

donde apenas coloco los links debajo de un sencillo "<div></div>" que le da posición al centro de la pantalla.

Esto es todo por el tutorial, cualquier duda en un comentario, por el formulario o como ultima opcion , por ask!.

Cambie el diseño, es 2015 ya, algo nuevo tenia que traer... & si, aunque no lo admita soy la niña mas adorable y no pude resistirme a los colores & a las flores del fondo <3 

(menos mal que quien me había encargado este diseño no era lo que buscaba!).

Abrazos mágicos,

(´ω｀★)ノ