Efecto estilo hoja papel para suscripción RSS


Hoy os traigo otra opción más para decorar vuestro blogspot y al mismo tiempo para conseguir que vuestros lectores se suscriban al feed RSS de vuestro blog. Se trata de añadir en la esquina superior derecha, un efecto basado en Jquery que simula la doblez de una hoja de papel. 


Haz clic aquí para poder ver este efecto en movimiento.


Para instalarlo sigue estos pasos:

1) Ves a Diseño
2) Edición de HTML
3) Busca en tu plantilla </head> (teclea Ctrl + F para buscar más rápido)
4) Debajo de </head> pega el siguiente código:

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>

Código a copiar/pegar

5) Ahora busca <body> y debajo pega el siguiente código:

<div id='pageflip'>
<a href='http://TUFEED'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Código a copiar/pegar

Sustituye TUFEED por la dirección de tu Feed RSS.

6) Clica en vista previa y si todo está bien ya puedes guardar tu plantilla.


Si quieres poner la imagen con el texto en español, leed el comentario número 1) que os aparece a continuación. Muchas gracias jose_3

Código extraído de anshuldudeja.com
Publicado por

4 comentarios:

  1. jose_315 de diciembre de 2009, 12:45

    Muchísimas gracias, es buenísimo, esto la había visto en otras webs, pero no pensaba que se pudiera hacer con un blog, cambiando la imagen y la url tiene muchas más posibilidades, por cierto he modificado la imagen de fondo para que salga en español, aquí la tienen:
    http://i50.tinypic.com/110yl4h.jpg
    Pueden usarla con total libertad, solo sustituyan donde pone:
    background: url(http://www.wallheaven.com/subscribe.png) no-repeat
    por la url de la imagen, aunque no lo he puesto todavía en mi blog si que lo he hecho en un blog de pruebas y funciona perfectamente, pueden cambiar el texto por otro con unos conocimientos básicos de photoshop, espero que les sirva, y una vez más muchas gracias quierocrearunblog.

    ResponderEliminar
  2. Emmanuel Rodriguez15 de diciembre de 2009, 16:39

    hola aqui ando otra vez.... cuando le doy ya a guardar me sale esto:

    Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

    * Feed3

    Le doy a guardar o que pasa con esto

    ResponderEliminar
  3. quierocrearunblog15 de diciembre de 2009, 22:40

    Gracias por el aporte jose_3. Ya he dado el aviso en la entrada. Saludos

    ResponderEliminar
  4. quierocrearunblog15 de diciembre de 2009, 22:46

    Hola RD-Juegos, guarda una copia de tu plantilla y lo pruebas. Si te va mal, restaura la plantilla y no habrá problemas.

    ResponderEliminar

Suscribirse a: Enviar comentarios (Atom)