суббота, 8 октября 2016 г.

Кнопка Вверх - как установить кнопку Вверх для блога


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


Я часто вижу кнопку «подняться вверх» на сайтах, иногда вместо кнопок бывают стрелки и еще какие-либо картинки, даже анимированные – то бабочка, то ракета.

Я решила тоже себе такую фишку поставить. Поискала, как сделать кнопку «вверх». Оказывается, на Blogger это очень просто. Надо поставить специальный скрипт в гаджет, а в скрипте поставить ссылку (URL) на картинку, на которую надо будет нажимать, и все.

Больше всего у меня ушло времени на подбор подходящей кнопки-картинки. Так как самостоятельно ее делать не хотелось, надо было подобрать такую, чтобы подошла и по цвету, и по размеру. Я насобирала много различных кнопок на просторах интернета, чтобы выбрать одну-единственную.

Эти кнопки я решила выложить здесь на блоге – может, кому пригодится, чтобы не тратить время на поиски. Смотрите их ниже.
Итак, вот этот  скрипт кнопка вверх:
****************************************************************************
<script type="text/javascript" >
var smoothJumpUp = function() {
if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
window.scrollBy(0,-50);
setTimeout(smoothJumpUp, 20);
}
}
</script>
<div id="topcontrol" style="position: fixed; z-index: 100500; bottom: 5px; right: 5px; cursor: pointer; opacity: 1; " title="К началу страницы">
<a href="javascript:smoothJumpUp()">
<img src="Ваша ссылка на картинку"/>
</a>
</div>
*****************************************************************************
Этот скрипт копируем в текстовый редактор, например, в блокнот, и вместо слов «Ваша ссылка на картинку» вставляем ссылку на выбранную картинку, или URL (от англ. Universal Resource Locator – универсальный указатель ресурса, или адрес картинки в сети).
Где взять этот URL понравившейся кнопки?

Есть несколько способов, я об этом расскажу далее.
Лучше, конечно, скачать понравившуюся картинку к себе на компьютер и затем поместить ее на свой ресурс:  это может быть google -фото (замена picasa), блог, или на свой хостинг и затем взять URL.

А сейчас для примера давайте возьмем URL какой-либо картинки прямо с этого блога ниже. Для этого нажмем на выбранную картинку правой кнопкой мыши, в выпадающем списке выберем «Копировать URL картинки» и вставим в скрипт вместо слов «Ваша ссылка на картинку». Код получается довольно длинный. 

Теперь копируем весь получившийся код и переходим в настройки блога Дизайн – Добавить гаджет – Добавить HTML/JavaScript. В открывшемся окне нажимаем <Ctrl+V> или «Вставить». Нажимаем «Сохранить», «Сохранить» расположение», «Просмотреть блог».

Теперь, если захотите поменять картинку кнопки «Вверх», просто войдите в гаджет и поменяйте URL картинки на другую. Все очень просто, но как удобно!
Я записала видеоролик, чтобы наглядно показать, как установить кнопку Вверх на свой блог.




Картинки для кнопки прокрутки вверх
********************************************************************************








































































































********************************************************************************


8 комментариев:

  1. Светлана, Вы просто чудо. Столько полезной информации даёте. Спасибо огромное.

    ОтветитьУдалить
  2. Этот комментарий был удален автором.

    ОтветитьУдалить
  3. Светлана, попала на твой блог. я в восторге от твое информации.Спасибо.

    ОтветитьУдалить
  4. Светлана, спасибо большое. Сколько просмотрела сайтов и уроков - только у вас нашла четкое и подробное объяснение. Особенно нигде не встречалась информация про гугл фотки. Благодарна безмерно.

    ОтветитьУдалить
    Ответы
    1. Спасибо за отзыв. Мне приятно, что вам пригодилось.

      Удалить
  5. Спасибо, Светлана! Огромное спасибо! Мы установили эту кнопочку на свой блог http://vkusen-svyat.blogspot.bg/ . Теперь будем читать и устанавливать кнопки наверх блога. Ваш блог настолько полезен и нужен, что мы немедленно присоединились к нему! Желаем Вам удачи и хорошего, солнечного дня!

    ОтветитьУдалить