Suscríbete gratis por:

agregar a favoritosAñádeme a tus favoritos

Recomendaciones:



¡Consigue más visitas en tu blog anunciándote aquí! + info en Enviar email

Crea tu blog paso a paso:

SEO para Blogger

Fideliza a tus lectores

Consigue más visitas

Gana dinero con tu blog

Haz que tu blog no parezca un blog

Dominio propio para Blogger

Códigos descuento DOMINIOS name.com

MARZO 2010
$8.09 dominios .COM/.NET /.ME
CÓDIGO PROMOCIONAL: march825

¿Quieres enlazarme?

blog gratis
Enlazándome estás premiando mi esfuerzo. Gracias

Si eres blogger házte seguidor

Me encontrarás en...

BlogESfera - Directorio de Blogs Hispanos Mi Ping en TotalPing.com Add to Technorati Favorites Bitacoras.com Blogazos.com. Directorio de Blogs en Español

Quién soy

© 2009 Quiero crear un blog | Todos los derechos reservados | Blog creado por Juan R.
Prohibida toda copia parcial o total de este blog sin comunicación previa:

Creative Commons License

Enviar email

Emplea este e-mail para temas que NO puedan ser tratados en sus respectivas entradas. Es decir, mándame un e-mail para cualquier duda, sugerencia, queja o propuesta que no tenga cabida en su respectiva entrada.

Nuestras estadísticas

Recomendamos:

Efecto estilo hoja papel para suscripción RSS

martes 15 de diciembre de 2009

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



Etiquetas: ,





Entradas relacionadas:

4 comentarios:

jose_3 dijo...

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.

15 de diciembre de 2009 12:45  
RD-JUEGOS dijo...

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

15 de diciembre de 2009 16:39  
quierocrearunblog dijo...

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

15 de diciembre de 2009 22:40  
quierocrearunblog dijo...

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

15 de diciembre de 2009 22:46  


NORMAS PARA COMENTAR:

1) Si no encuentras lo que buscas emplea el buscador.
2) Si quieres preguntar algo, primero asegúrate que tu comentario guarda relación con la temática de la entrada.
3) Si tu pregunta no encaja en ninguna entrada mándame un e-mail en contacto situado a pie de página para preguntarme lo que necesites.
4) Trata de expresarte bien. Explica correctamente tu problema, y por favor, no escribas en mayúsculas ni emplees lenguaje SMS. Escribir correctamente es gratis.
5) No hagas SPAM. Comentarios breves con la unica intención de dejar la dirección de tu blog será considerado SPAM.
6) No se permiten descalificaciones ni faltas de respeto hacia ningún usuario.

Si no se cumplen estas seis normas el comentario será ignorado y/o borrado.
Respetando estas normas ganamos todos, conseguimos un mayor orden y ayuda para los nuevos visitantes. Gracias por tu comprensión.


Publicar un comentario en la entrada

Suscribirse a: Enviar comentarios (Atom)
 
 
 
Beta blogger