lunes, 18 de marzo de 2013

botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento para Blogger



En esta ocasión le traigo un tutorial que espero que les guste,
aprenderemos como colocar dos botones; una para poder ir arriba y otro para poder ir abajo,
que seran de gran utilidad para nuetros que nuestros lectores, que les facilitar mucho ver el contenido de nuestras
entradas cuando aveces son demaciado lagas.

Para esto usaremos jquery, por lo tanto,
Si usas Scriptaculous podrías tener complicasiones, al final les dejare a solucion.


Veamos entonces cómo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.
Lo primero es entrar en la Edición HTML y pegar antes de ]]></b:skin> los estilos:

    /* Botones de Ir arriba e Ir abajo con jQuery
    ----------------------------------------------- */
    .nav_up{
    padding:7px; /* Distancia entre el borde y el ícono */
    background-color:white;
    border:1px solid #CCC; /* Color del borde */
    position:fixed;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZPtukToWS5EVyk1vxmRD_Zef5pGOspmAZz5Wd2e5MveYViGopAFzQLeEh5lAK1qYSXiLHe6WhB6A32VOEt8oViXJFJpo93XnEzHuQnuaXohxOoC8cuSCte1se3Mkx-wT09uW6LZyX8U/s16/arrow_up.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Ancho del botón */
    height:20px; /* Alto del botón */
    bottom:10px; /* Distancia desde abajo */
    right:30px; /* Cambiar right porleft si se quiere a la Izquierda */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .nav_down{
    padding:7px; /* Distancia entre el borde y el ícono */
    background-color:white;
    border:1px solid #CCC; /* Color del borde */
    position:fixed;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQom_hkvZ3EtNeWv4atahkOWobKTonjqZThavO6_Eacd9nCSrsSeRBR_-NSwefh1rkO_8OuzmO29vzZDDITICcfiq94Vrtgx2sT3OU0e7MliTiWJW3ZnkFt_Vq3wyGilygihcEYx5cek/s16/arrow_down.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Ancho del botón */
    height:20px; /* Alto del botón */
    bottom:10px;
    right:70px; /* Cambiar right porleft si se quiere a la Izquierda */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }

Luego antes de </body> pega este código:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <div class='nav_up' id='nav_up' style='display:none;'/>
    <div class='nav_down' id='nav_down' style='display:none;'/>
    <script>
    //<![CDATA[
    (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
    $(function() {
    var $elem = $('body');
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');
    $(window).bind('scrollstart', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
    $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });
    $('#nav_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    } );
    $('#nav_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    } );});
    //]]>
    </script>

Y listo. Todo lo que esta de color puedes modificar al estilo que quieras,
desde las posiciones de los botones, bordes y otros.


De antemano les conete que su usaban escriptaculos tendian complicaciones, para eso
ver la siquiente entrada.

Via: Ciudad blogger

No hay comentarios:

Publicar un comentario

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...