Efecto doblar esquina blogger

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:

<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

$(&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>

Cambia la URL que está en rojo por la dirección de la imagen que quieras poner de fondo.
nota: la imagen de fondo tiene un tamaño de 307 x 307.

Ahora buscamos </body> y debajo pegamos este código:

<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>

Cambia la URL por la de la página que quieras.

Espero les guste, les sirva y sigan visitando 

Tweet

Entradas Relacionadas

Publicidad