Můj blog - Blogger - 12. Kapitola - Šipky nahoru a dolů

Další díly najdete v rozcestníku.
Hodně stránek má někde umístěné šipky, na které, když se klikne tak se dostanete buď nahoru nebo dolů. Dnes se naučíme jak je na stránku přidat. Šipky budou ve vpravo a také se budou posouvat ze stránkou. Šipky jsi také můžete přizpůsobit jak budete chtít.

Krok 1:
Nejprve jděte na Blogger -> Šablona -> Upravit HTML. Potom klikněte do okna s kódem a zmáčkněte na klávesnici Ctrl + F. Do vyhledávacího pole napište <b:skin/>, zmáčkněte Enter a nad tag, který se vám vyhledal vložte tento kód:

.button_up{ padding: 7px; border: 5px solid black; /*rámeček horní šipky*/ position: fixed; background: url (http://nd06.jxs.cz/824/070/a2e9cf72ae_94567362_o2.png) no-repeat top left; /*adresa horní šipky*/ background-position: 50% 50%; background-color: LightBlue; /*pozadí horní šipky*/ width: 20px; height: 20px; bottom: 280px; right: 5px; white-space: nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity: 1.0; } .button_down{ padding: 7px; border: 5px solid black; /*rámeček dolní šipky*/ position: fixed; background: url (http://nd06.jxs.cz/013/924/33e835fddc_94567340_o2.png) no-repeat top left; /*adresa dolní šipky*/ background-position: 50% 50%; background-color: LightBlue; /*pozadí dolní šipky*/ width: 20px; height: 20px; bottom: 242px; right: 5px; white-space: nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity: 1.0; } Vložte tento kód:

Šipkám jsem už dal základní vzhled, ale pokud chcete, můžete si tagy zvýrazněné červeně, upravit jak budete potřebovat.

Krok 2:
Potom stejným způsobem vyhledejte tag </body> a nad něj vložte tento kód:

<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':'1'}); }); $(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> Vložte tento kód:

Poté klepněte na tlačítko Uložit.