Я сама блоггер: Гаджет "Кнопка вверх" для Blogger

Гаджет "Кнопка вверх" для Blogger

12.08.2013

Автор: Мария

Довольно часто в статьях я публикую коды гаджетов, скриптов и др. Отчего статьи иногда получаются длинными. Для того, чтобы читателям блога было удобнее перемещаться и возвращаться к началу сообщения, добавила кнопку "вверх". Далее читайте, как вставить такую кнопку в блог на Blogger.

Интересную кнопку вверх в виде взлетающей (правда, взлетает) ракеты предлагают здесь. Смотрим, как работает, в блоге Гаджеты для Blogger.

Добавляем гаджет HTML/JavaScript в подвале блога или в самом низу боковой панели и вставляем код кнопки:


<script type="text/javascript" src="http://bambun.ru/css_js/jquery.min.js"></script>
<script type="text/javascript" src="http://bambun.ru/css_js/MrScrollUp.js"></script>
<script type="text/javascript" src="http://camadmin.ru/earch.js"></script>
<link rel="stylesheet" type="text/css" href="http://bambun.ru/css_js/MrScrollUp.css" />
<div id="MrScrollUp" style="display:none;"><div class="MrScrollUp1"></div><div class="MrScrollUp2"></div></div>

Простой способ установки кнопки вверх нашла в другом блоге. Примечательно, что в коде можно поменять картинку на свою, всего лишь изменив ссылку.

Вот Вам несколько кнопок на выбор:

Кстати, в качестве кнопки вверх можно использовать анимированную стрелку. Например, такую:

Посмотреть, как выглядит эта стрелка, можно в блоге Бесплатно+.

Как добавить любую из этих кнопок (или другую, найденную в Интернете или нарисованную самими):

1). Кликните правой кнопкой по кнопке и скопируйте адрес ссылки кнопки-картинки.

2). Затем в коде замените ссылку на свою (ссылка выделена синим).
Например, код кнопки, ~~которая стоит в моем блоге~~ заменила на кнопки "Вверх-вниз" с плавной прокруткой

<a style="display:scroll;position:fixed;bottom:0px;right:20px;" href="#" title="Вверх"> 
<img border="0" alt="Back to TOP"  src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubpHjYijKQjOkaSMcyEGbUO7yMxs7mf_mZHz7HcsGVU6pwgT2PrzjZy6-_lOY5kJ5-Nw4XNP3papXZ2c87wrhENBsF7R_FlwbENbY1ifIsAG5KC-NkyOmfaLhShGzrV2_uzuZn7CbQdc/s1600/dynamic_blue_up_left_1.png"/></a>

Отступ от правого края rihgt в пикселях поставьте свой.

3). Добавьте в блог гаджет HTML/JavaScript и в поле Содержание вставьте код кнопки. Сохраните гаджет и перетащите его в нижнюю часть блога или боковую панель.