Как добавить кнопки вверх-вниз на blogger?

Много времени искал нормальную кнопку вверх-вниз для блога на платформе blogger (blogspot). Вот наконец то нашел отличную не отвлекающую внимания, и сразу решил поделится с вами чтобы информация не затерялась.

Ведь каждый блогер знает как важно вернуться в начало страницы если она очень длинная, а прокручивать долго. И у некоторых читателей пропадает охота полазить по сайту еще и он просто закрывает его.

Характеристика кнопки.
Мерцает при прокрутке страницы чтобы привлечь к действию. Когда пользователь читает информацию без прокрутки, ничего не отвлекает внимания. Можно настроить цвет или создать свое собственное изображение кнопки и загрузить в альбомы пикаса.

Инструкция по внедрению кнопки вверх-вниз на blogspot.

1. Откройте панель управления блогом и пройдите в "Шаблон - Редактировать HTML".

Кликните в любом месте по коду и нажмите сочетание клавиш Ctrl+F. Теперь вставьте в строку поиска что появилась следующий код ]]></b:skin> и нажмите ентер.

Перед этим кодом вставьте следующий код (как на рисунке выше):

/* 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(https://lh3.googleusercontent.com/-EyBcF2gZUTU/VtdELXtdRQI/AAAAAAAAFCU/YY_fjWyXgiM/s30-Ic42/%2525D0%2525BA%2525D0%2525BD%2525D0%2525BE%2525D0%2525BF%2525D0%2525BA%2525D0%2525B0%252520%2525D0%2525B2%2525D0%2525B2%2525D0%2525B5%2525D1%252580%2525D1%252585441.jpg) 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(https://lh3.googleusercontent.com/-eYyV_7xBcCg/VtdE1VsCXtI/AAAAAAAAFCc/_WL2UP600Xo/s30-Ic42/%2525D0%2525BA%2525D0%2525BD%2525D0%2525BE%2525D0%2525BF%2525D0%2525BA%2525D0%2525B0%252520%2525D0%2525B2%2525D0%2525B2%2525D0%2525B5%2525D1%252580%2525D1%252585442.jpg) 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);
}

2. На этом этапе перед кодом </body> вставьте следующий последний код и сохраняем изменения в шаблоне (скрины уверен уже лишние, уверен разберетесь).

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

Вот на этом и все. Можете видеть как наглядно выглядят кнопки вверх/вниз на блогспоте у меня например (посмотрите направо).