Beauty

Przyciski przewijające stronę w górę i w dół

Zobacz demo na blogu

Jak umieścić przyciski na Bloggerze?

1. Zaloguj się do panelu admina na Bloggerze.
2. Wejdź w menu Szablon => Edytuj kod HTML szablonu.
3. Kliknij w okno edytora i wciśnij Ctrl + F.
4. W wyszukiwarkę wpisz:
]]></b:skin>
5. Wciśnij Enter, by wyszukać znacznik.
6. Tuż nad wyszukanym znacznikiem wklej poniższy kod:
/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up {
  padding: 7px;
 /* Distance between the border and the icon */
  background-color: white;
  border: 1px solid #CCC;
 /* Border Color */
  position: fixed;
  background: white url(http://drive.google.com/uc?export=view&id=0BzWYBwKfT2edTEVGYmZKNlFUZEU) no-repeat top left;
  background-position: 50% 50%;
  width: 20px;
 /* Button's width */
height:20px; /* Button's height */
  bottom: 280px;
 /* Distance from the bottom */
  right: 5px;
 /* Change right to left if you want the buttons on the left */
  white-space: nowrap;
  cursor: pointer;
  border-radius: 3px 3px 3px 3px;
  opacity: 0.7;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

.button_down {
  padding: 7px;
 /* Distance between the border and the icon */
  background-color: white;
  border: 1px solid #CCC;
 /* Border Color */
  position: fixed;
  background: white url(http://drive.google.com/uc?export=view&id=0BzWYBwKfT2edODNNaGlXSHhWQTg) no-repeat top left;
  background-position: 50% 50%;
  width: 20px;
 /* Button's width */
height:20px; /* Button's height */
  bottom: 242px;
 /* Distance from the bottom */
  right: 5px;
 /* Change right to left if you want the buttons on the left */
  white-space: nowrap;
  cursor: pointer;
  border-radius: 3px 3px 3px 3px;
  opacity: 0.7;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
7. Następnie wyszukaj znacznik:
</body>
8. Teraz nad wyszukanym znacznikiem wklej:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
    <div class='button_down' id='button_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');
        $('#button_up').fadeIn('slow');
        $('#button_down').fadeIn('slow'); 
        $(window).bind('scrollstart', function(){
          $('#button_up,#button_down').stop().animate({'opacity':'0.2'});
        });
        $(window).bind('scrollstop', function(){
          $('#button_up,#button_down').stop().animate({'opacity':'1'});
        });
        $('#button_down').click(
          function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
          } );
        $('#button_up').click(
          function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
          } );});
      //]]>
    </script>
9. Na koniec Zapisz szablon.

Instagram