Кнопки вверх вниз

Источник.  Спасибо Владимеру Демяновичу. Хотя он данные кнопки разрабатывал не для blogger.com . Но мне удалось их вставить и на свой сайт.

Получилось очень удобно

Может, кому то благодаря моим советам это удастся тоже. Но за результат не ручаюсь, т.к. я и сам в этом деле новичке самоучка.

Перед тем как начать - рекомендую сделать резервную копию вашего шаблона. Для этого зайдите в "Дизайн ---> Изменить HTML" , в первых строчках вы увидите "Загрузить весь шаблон" .

.

Надо добавить 2а текста

Итак 1й в Настройках блога в «Дизайн»  →  «Добавить гаджет» (там в дизайне их много в принципе можно клацнуть на любой не имеет значения)

Потом выбрать «HTML\JavaSkript»

И вставить туда этот код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!— Start: Кнопки вверх вниз —>

<script type="text/javascript">

jQuery(function(){

if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")

$(window).scroll(function(){

if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")

else $("#ToTop").fadeIn("slow")

});

if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")

$(window).scroll(function(){

if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")

else $("#OnBottom").fadeIn("slow")

});

$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})

$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})

});

</script>

<div class="go-up" title="Вверх" id='ToTop'>⇧</div>

<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>

<!— End: Кнопки вверх вниз —>

В CSS

«Шаблоны» → «Настроить»

Добавить CSS

И вставить текст который находится под спойлером

Открыть спойлер

 

Не забываем клацнуть сохранить. Если  вдруг я что то напутал в кодах то вот источник.

/* Start: Кнопки вверх вниз */ .go-up, .go-down { display:none; position: fixed; /*позиционируем*/ right: 5px; /*указываем положение, если слева - left*/ z-index: 9999; /*показываем поверх все элементов на странице*/ background: #4F4F4F; border: 2px solid #ccc; /*толщина, стиль, цвет рамки*/ box-shadow: 0 10px 0.3em -0.1em rgba(0,0,6,0.5); /*тень*/ border-radius: 10px; cursor: pointer; color: #fff; /*цвет стрелок*/ text-align: center; /*выравнивание*/ font-size: 40px; /*размер стрелок*/ text-shadow: 0 1px 2px #000, 0 0 10px #E0F1FF; opacity: .7; /*прозрачность*/ padding: 0px 3px 10px 3px; /*отступы внутри*/ margin-bottom: 5px; /*отступ снизу (можно не указывать)*/ width: 48px; /*ширина кнопки*/ height: 48px; /*высота кнопки*/ } .go-up { bottom: 75px; /*положение от низа окна браузера*/ } .go-down { bottom: 10px; } /*стили при наведении курсора*/ .go-down:hover, .go-up:hover { opacity: 1; } /* End: Кнопки вверх вниз */