El efecto de página doblada o page peel en Blogger es algo netamente fácil de aplicar, y en momentos por ejemplo para inaugurar algo en nuestros blogs, ofrecer algún tipo de publicidad de otros sitios entre otras cuestiones.
Ahora bien hoy les enseñaré como lograr este efecto en nuestros blogs pero antes veamos como funciona en una demostración:
Listo esto, iniciamos con lo siguiente:
1. Lo primero será añadir la librería Jquery para ellos vamos a Plantilla > editor HTML > y buscamos lo siguiente línea </head> arriba de ella pegamos esto:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(document).ready(function(){
$("#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: Recuerden que si ya tienen esta librería en su plantilla pueden saltar este paso.
2. Ahora dentro del código de la plantilla buscaremos <body> ó
<body expr:class='"loading" + data:blog.mobileClass'> (para plantillas hechas con el diseñador), debajo de esta etiqueta pegaremos lo siguiente:
<style>
/* Página doblada -br
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Modificar por 30px si se tiene la navbar (barra de navegación) */
float: right;
z-index:9;
}
#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(URL IMAGEN DE FONDO) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
</style>
<div id='pageflip'>
<a href='URL A LA QUE LLEVA AL DAR CLICK'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7LNLUCXnuE9XVWjnGm_VNmIqhT-BwO4lyOj1jtOKErEguMAaWDS7-_tzfqxPFJcGnpnTLGDHlZ9JG7n_j6bZuJz0jN3nDHuDj4MIk27ArWCnLo3JrMaQZzC0zku52aT6f8kLKuldaJC8/s0/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>
Para modificar los elementos la parte en Naranja contiene la imagen que lleva al fondo al dar el efecto de la página doblada ejemplo (La primera imagen de este post), en la parte de color rosado se pondrá la URL o link el cual al dar click nos lleve allí, muy fácil y sencillo además de elegante.
Es todo espero les guste este sencillo tutorial....
Listo esto, iniciamos con lo siguiente:
1. Lo primero será añadir la librería Jquery para ellos vamos a Plantilla > editor HTML > y buscamos lo siguiente línea </head> arriba de ella pegamos esto:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(document).ready(function(){
$("#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>
<style>
/* Página doblada -br
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Modificar por 30px si se tiene la navbar (barra de navegación) */
float: right;
z-index:9;
}
#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(URL IMAGEN DE FONDO) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
</style>
<div id='pageflip'>
<a href='URL A LA QUE LLEVA AL DAR CLICK'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7LNLUCXnuE9XVWjnGm_VNmIqhT-BwO4lyOj1jtOKErEguMAaWDS7-_tzfqxPFJcGnpnTLGDHlZ9JG7n_j6bZuJz0jN3nDHuDj4MIk27ArWCnLo3JrMaQZzC0zku52aT6f8kLKuldaJC8/s0/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>
Para modificar los elementos la parte en Naranja contiene la imagen que lleva al fondo al dar el efecto de la página doblada ejemplo (La primera imagen de este post), en la parte de color rosado se pondrá la URL o link el cual al dar click nos lleve allí, muy fácil y sencillo además de elegante.
Es todo espero les guste este sencillo tutorial....
Comentar es agradecer al autor de la publicación. GRACIAS
ResponderEliminar