Георгиевская ленточка

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

12.08.2013



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




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


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

<!-- MrScrollUp.Start --> 
<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> 
<!-- MrScrollUp.End -->

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

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


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

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

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

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

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


<a style="display:scroll;position:fixed;bottom:0px;right:20px;" href="#" title="Вверх"> 
<img border="0" alt="Back to TOP"  src = "http://4.bp.blogspot.com/--FHpPkzwm-w/UgW-kLK3mEI/AAAAAAAAC2Y/kLTyZ4PIP20/s1600/dynamic_blue_up_left_1.png"/></a>

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

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

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

  1. Кнопка не меняется, стоит как у вас, как не меняла ссылку - ничего не выходит. Прикипела эта, розовая

    ОтветитьУдалить
    Ответы
    1. Попробуйте сначала скопировать код моей кнопки, вставить в "Блокнот". Заменить ссылку на свою. И потом уже этот код вставлять в гаджет.
      Также можно поискать другие кнопки в Интернете, например в иконках. Загрузить картинку в блог (или в Picasa), скопировать ссылку картинки.

      Удалить
  2. Уберите Эдсенс с тестового блога, иначе могут заблокировать аккаунт. Нельзя использовать блоки на страница в разработке и без контента.

    ОтветитьУдалить
    Ответы
    1. Спасибо за полезный совет (h)

      Удалить
  3. Себе поставил на блог http://chertezhi-kompas3d.blogspot.com/

    ОтветитьУдалить
  4. Спасибо за статью! Скажите, каким образом можно этот гаджет поставить на страницу блога?
    например как тут
    http://www.portra.by/p/blog-page.html

    ОтветитьУдалить
    Ответы
    1. Это Вы про гаджет в виде ракеты? Так о ней говорится в первой части статьи (см. выше).

      Удалить
  5. Спасибо! Не знаю, у кого как, а у меня всё получается! Доступным языком написано, и понятно. Вы просто чудо!

    ОтветитьУдалить
  6. Спасибо, все получилось!!!!

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

    ОтветитьУдалить
  8. Спасибо большое! Получилось просто здорово!

    ОтветитьУдалить
  9. спасибо за инфо у меня все получилось http://mannevo.blogspot.ru/

    ОтветитьУдалить
  10. Установил себе, большое спасибо!

    ОтветитьУдалить
  11. Анонимный15.07.2014, 2:31

    Большое спасибо!))

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

    ОтветитьУдалить
  13. Спасибо вам большое!! Все доступно,все понятно!!!!!

    ОтветитьУдалить
    Ответы
    1. И Вам спасибо, что зашли в гости :)

      Удалить
  14. Спасибо большое! Всё получилось.

    ОтветитьУдалить
  15. а что прописать в коде, чтоб вниз такую же сделать? с картинкой понятно.

    ОтветитьУдалить
  16. Спасибо, все получилось!
    http://popletushki.blogspot.com.by/

    ОтветитьУдалить
  17. Да, работает. Оцените на моем блоге, неплохо?
    ExcelGuide: Как сделать это в Excel

    ОтветитьУдалить
  18. Спасибо! Все легко и просто! В свой блог уже установила синюю кнопку ))

    ОтветитьУдалить
  19. Что за волшебный скрипт который так упорно блокирует Касперский (заблокирована вредоносная ссылка) переход на сайт колясочников http://camadmin.ru/ ?!?

    ОтветитьУдалить
    Ответы
    1. Видимо, этот сайт попал в "черный" список сайтов :(

      Удалить
  20. Спасибо сердечное! Отличный у Вас блог, очень полезный. Желаю Вам творческих успехов и радуйте на своими новостями и сюрпризами по созданию, продвижению и дизайну блога.

    ОтветитьУдалить
  21. Ну вот, вчера ракета работала, а сегодня ее уже нет. уже и обновляла, ничего. Ставлю другую кнопку вверх, такая же история, может где то что то не то нажала?

    ОтветитьУдалить
    Ответы
    1. Это скорее всего из за перехода на соединение https.

      Удалить
  22. Спасибо большое, кнопки устанавливаются, кроме ракеты. А как сделать, чтобы плавно вверх прокручивалось.

    ОтветитьУдалить
    Ответы
    1. Для Вас статья - Кнопка "Вверх" с плавной прокруткой http://samasajt.blogspot.ru/2017/03/knopka-vverh-s-plavnoy-prokrutkoj.html

      Удалить
  23. Крутяк! Ракета-огневая! +5 автору...

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

Загляните и на другие страницы ^