En esta oportunidad les traigo para ustedes el efecto que simula doblar la esquina de nuestro blog, el cual me ha sorprendido muchísimo ya que es una efecto muy bien diseñado te deja con una sensación de realismo impresionante y es por eso que yo ya lo implemente en el blog
Bueno manos a la obra, nos vamos a Diseño >> Edición HTML buscamos el siguiente codigo</head> facilitamos la búsqueda presionando F3 o Ctrl + f.
Una vez encontrado el codigo </head> pegamos encima el siguiente codigo:
Cambia la URL que está en rojo por la dirección de la imagen que quieras poner de fondo.<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://i1261.photobucket.com/albums/ii593/chimu6/bloggercatego.jpg) 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$("#pageflip").hover(function() {$("#pageflip img , .msg_block").stop().animate({width: '307px',height: '319px'}, 500);} , function() {$("#pageflip img").stop().animate({width: '50px',height: '52px'}, 220);$(".msg_block").stop().animate({width: '50px',height: '50px'}, 200);});});</script>
nota: la imagen de fondo tiene un tamaño de 307 x 307.
Ahora buscamos </body> y debajo pegamos este código:
Cambia la URL por la de la página que quieras.<div id='pageflip'><a href='http://redesytrucos.blogspot.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwnHM95aQGBGr4JCGev_J-PkxMV4Ma0ITkuFI_Iu3nbFROCmG4I2wGMk1TgaKzu-ORnlTYiwGdsfIPwNK0aq5fggwdUUu8XS8QUQ7buj6pdOIgY7JD-Ebs8f46x802ZPkd7M33iqZklpEJ/s1600/page_flip.png'/></a><div class='msg_block'></div></div>
Espero les guste, les sirva y sigan visitando
No hay comentarios:
Publicar un comentario