Функциональная кнопка вверх для сайта

Всем привет!

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

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

Эти две фишки случаться обязательно, но нужно владеть некоторыми знаниями кода. Если ими не владеете, то закрывайте эту страницу. Стопе! Это, я пошутил! Я покажу все, что нужно для установки кнопки вверх для сайта.

Ах да, чуть не забыл. Ее может поставить себе каждый, имея блог или сайт. То есть кнопка вверх для сайта и кнопка вверх для блога. Ну а если быть точным, то кнопка вверх-вниз подойдет для каждого ресурса.

Если Вы еще не опробовали ее функционал у меня на блоге, то сделаете, это после прочтения статьи. Ну, не буду долго рассусоливать! Давайте начнем.

Функциональная кнопка

Кнопка вверх для блога

Для WordPress блога нам понадобиться два файла и одна папка. Для статических сайтов почти то же самое. Начнем с блога! Заходите в корень через FTP клиент, но не обязательно! Если Вам нравиться пользоваться браузером, то есть открывать и редактировать в админ панели своего блога. Конечно, можете в админке, это Ваше дело, но тогда, если, что вдруг пойдет не так, то вернуть все обратно пару кликами не получиться!

Придется доставать флэшку, вставлять в компьютер, перетаскивать все файлы к себе на хостинг и т.д. Вы же на флэш-карте храните копию блога? Короче будет полная морока. Лучше пользуйтесь FTP клиентом, а если Вы панически боитесь, что-то изменять в своем шаблоне (редактировать код), то советую почитать пост, как избавиться от страха, править шаблон.

Те, кто прочитал, теперь ничего не боится и те люди, которые и до этого не боялись делать изменения в файлах блога, могут идти за мной. ПРОШУ ВПЕРЕД ГЛАЗАМИ…

Функциональная кнопка вверх для блога

Скачайте [urlspan]этот файл[/urlspan]. Там находятся коды и скрипт, которые сделают нам функциональную кнопку вверх-вниз. После чего, заходите в корень блога по такому пути:

wp-admin/themes/vasha_tema/

Откройте внутри шаблона файл footer.php. В него мы вставим тот код, который лежит в архиве. Называется footer. Чтобы было понятней, я буду показывать все на скриншотах. Тот файл, в котором нам нужно взять код, подчеркнут красной линией.

Скачиваем кнопку вверх

Заходите в этот файл, копируйте там код, (CTRL+A — выделить все) (CTRL+C — скопировать). Вставляйте его в открытый файл footer.php перед закрывающимся тегом </body>. Обязательно поставьте свой путь к js файлу, о котором поговорим ниже. СОХРАНЯЙТЕ ИЗМЕНЕНИЯ (CTRL+S)!

Теперь поставим стили для кнопки вверх, чтобы она корректно работала и красиво отображалась. Для этого откройте в скачанном архиве файл style, смотрите ниже:

Украшаем кнопку вверх

Заходите в него, копируйте все содержимое. Возвращаемся в наш шаблон и открывайте там style.css. В самый конец вставляйте скопированный код.

Хорошие стили для кнопки вверх

Завершаем встраивать кнопку вверх для сайта. Остался всего один шаг. В шаблоне Вашего блога, найдите папку js. Если такой нет, то создайте ее. Закидывайте в эту папку файл verh-vniz.js, она лежит в скачанном архиве

Все повторяли за мной? Тогда если зайдете на свой блог или перезагрузите страницу, то увидите красивую и функциональную кнопку вверх-вниз-читать-стоп.

Кнопка вверх для сайта

Чтобы поставить эту кнопочку в статическом сайте, нужно сделать такие же действия, что и с блогом! Заходите в корень сайта, открывайте файл. Обычно он называется index.html, перед закрывающимся тегом </body> ставьте код, который нужно скопировать в скачанном архиве, файле footer.

Как я уже писал выше, все действия нужно делать как на блоге. То есть создаете папку js в корне сайта и добавляйте стили – style для корректной работы кнопки вверх-вниз.

Дополнительно

Сейчас у Вас есть эта кнопка и все работает, как часы, даже лучше, но картинки, которые отображают кнопку вверх, находятся на сервере Яндекс. Чтобы сделать их своими, держать их на своем сервере, где установлен блог, надо сохранить кнопки на компьютер, а потом поменять ссылки картинок в скрипте на свои. Хотите спросить, зачем это делать, ведь и так все работает?

Скажу честно! Хотите, чтобы Ваш веб-ресурс набирал обороты, то есть раскручивался, как надо? Тогда все, что добавляете на него должно быть Ваше и уникальное!

Как скачать картинки к себе на компьютер?

Для этого нужно сначала взять ссылки картинок, которые лежат на сервере Яндекс. Эти ссылки на изображения кнопки вверх-вниз-читать-стоп хранятся в файле verh-vniz.js. Если забыли, то напомню. Этот файл мы закидывали в папку js. Зайдите в него, опуститесь в самый низ. Видите там теги img? Дальше идет src и ссылка. Эти ссылки нужно сделать своими:

Изображения для кнопки вверх, вниз, стоп

Копируйте одну из них, открыв в своем браузере новую вкладку. В поисковую строку вставьте скопированную ссылку, жмите ENTER. Картинка отобразиться. Нажмите на нее правой кнопкой мыши, в выпадающем меню выберите: Сохранить как.

Сохранить картинку для кнопки вверх, вниз, стоп

Это действие повторите с остальными тремя ссылками. Когда у Вас уже есть скачанные изображения кнопки вверх для блога или сайта. Нужно зайти в корень движка WordPress или корень статического сайта. Создадим там папку. Назовем ее img. Закиньте туда все картинки.

Нам осталось совсем чуть-чуть! У Вас запущена страница сайта или блога? В свой адрес нужно дописать такое:

adressaita.com/img/название изображения

Жмете ENTER на клавиатуре, по ссылке будет отображаться Ваша картинка. Берите ссылку и вставляйте ее вместо картинки Яндекс. Только ничего не перепутайте! Обратите внимание: все подписано в теге title:

Title в кнопке вверх, вниз, читать, стоп

В принципе все. Кнопка вверх для блога есть, кнопка вверх для сайта тоже готова. У Вас все получилось? Задавайте свои вопросы или обсуждайте статью в комментариях. Подписывайтесь на [urlspan]обновления моего блога[/urlspan], потому что, я задумал писать на блог очень полезные вещи для продвижения и улучшения любого ресурса. До встречи!

С уважением, Алексей Кобзарев



Интересный и полезный контент

36 thoughts on “Функциональная кнопка вверх для сайта

  1. Игорь Черноморец

    Алексей,я не сторонник коротких и банальных комментариев,но в данном случае у меня просто нет слов!!! Так что….говорю тебе банально — классный пост!!!

    1. Алексей Кобзарев Автор записи

      Спасибо! Надеюсь, всем понравился и пригодился. 🙂

  2. Vlad

    Привет)

    Поставил subscribe to comments reloaded… Но, что-то он не работает нормально…

    Не хочет перенаправлять на виртуальную страницу управления…

    1. Алексей Кобзарев Автор записи

      Странно. Может версия плохая. У меня с этим плагином никогда проблем не было.

        1. Алексей Кобзарев Автор записи

          Дублировались сообщения. Одни и те же комментарии приходили по два раза.

        2. Vlad

          Может ты на два плагина ставил подписку?

        3. Алексей Кобзарев Автор записи

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

        4. Vlad

          Я просто пока статью писал, получилось что у меня 3 активированных плагина на подписку стояло… 😀
          Вчера только убрал! 😮

  3. Владимир Фесюк

    Спасибо тебе, добрейшей души человек, за этот пост!
    Зарекался всякую хрень ставить на блог, но ты меня соблазнил этими кнопочками, — вечерком поставлю. Лишь бы не грузили-не тормозили загрузку.

    1. Алексей Кобзарев Автор записи

      Чтобы эти кнопки не замедляли загрузку блога, мы подключаем скрипт в подвале, то есть foorer блога.

  4. Лара

    Хорошая штука — кнопка вверх, вниз, да ещё с торможением. У тебя и под стиль блога хорошо вписалась!

    Меня пока моя ракета с котом устраивает, а раньше хотела, как у тебя такую)))

  5. Андрей

    Алексей, здравствуй! Давно хотел такую кнопку, теперь буду пробовать. ➡

  6. Андрей

    Алексей, опять я. Кнопку поставил, только подскажите как отредактировать названия кнопок. вроде сохранял все правильно, а названия не отображаются. Да, классно получилось, спасибо. ❗ ➡

    1. Алексей Кобзарев Автор записи

      Даже к дизайну подошла.

      Название — это, я так понял title. Они в скрипте, который закидывали в папку js. Там где отображаются картинки, найдите title=»название». Я зашел к Вам на блог, у меня все названия видны.

      1. Андрей

        Все нормально, просто сразу сохранил не в той кодировке. Спасибо еще раз. С уважением Андрей.

        1. Алексей Кобзарев Автор записи

          Не за что! Пользуйтесь на здоровье.

  7. Александр

    Я люблю кнопку вверх в ввиде ракеты 😉 Не помню, где брал скрипт, но все работает 😈
    Достаточно просто написать в поисковой строке» кнопка вверх в виде ракеты» 😳

  8. Ярослав

    Алексей, спасибо за толковое описание! Даже у меня получилось все!
    Руки дойдут — немножко, может, со стилями поиграю. А может, и так оставлю, как есть, смотрится довольно неплохо!

    1. Алексей Кобзарев Автор записи

      Пожалуйста! Вижу Вы и картинки немного изменили.

      1. Ярослав

        Да, градиентом чуть залил. Можно, конечно, и свои картинки нарисовать, но это уже, наверное, лишним будет. Эти смотрятся хорошо, да и времени лишнего в магазине, увы, не купишь 😀

  9. Ирина

    Алексей, я прошу помощи, всё установила, как вы описывали, но кнопки отображаются под блогом, под подвалом. В моей теме 4 файла стилей, я вставляла стили по очереди во все файлы, но результата ни какого. И в конец помещала, и в середине, всё без толку. Висят под подвалом, и не хотят вставать на своё место. Вы не подскажите, что мне нужно сделать? Может быть код не в footer.php вставить? Я думаю, что тут дело в моей теме. А так кнопки рабочие, вверх поднимают. 😐

    1. Алексей Кобзарев Автор записи

      У меня такое было с самого начала, когда стили забыл поставить. Но Вы говорите, что поставили. Скрипт установили в footer, тоже правильно. Если путь до js файла был бы прописан неправильно, то кнопки бы вообще не отображались. Наверное у вас идет конфликт с темой или с плагином, или что напутали. Советую перепроверить все свои действия, если ничего не измениться, то бросайте эту затею.

  10. Ирина

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

  11. Ярослав

    Позвольте вставить свои, как говорится, пять копеек…
    Такая проблема, как у Вас, любезная Ирина, была и у меня. Тоже кнопки съезжали под футер и не желали оттуда вылазить. И тоже было жалко расставаться с кнопками. Но, пока я искал причины их такого безответственного поведения (а это длилось несколько дней), они образумились и перестали вести себя как босяки. Может, и Ваши одумаются?

  12. Ольга Суворова

    Алексей, спасибо за статью! У меня раньше стоял один скрипт в две коротеньких строчки в футере и все работало, а на днях все вдруг куда-то делось, место кнопок какие-то кусочки…
    Перешерстила десятки сайтов в поисках замены этих кнопок. Вариантов масса (точнее, одни и те же, переписанные друг у друга сотни раз). Но смешно то, что дают совет в решении простой (для программиста задачи) новичкам, которые в этом не бум-бум, описывая все языком программирования. Для кого такие статьи пишут?..
    А у вас все просто, доступно и, главное, действенно! Молодец! 🙂

    1. Алексей Кобзарев Автор записи

      Спасибо! Стараюсь. Рад, что Вам понравилось!

  13. Александр

    Алексей, приветствую! У меня сайт на Joomla, решил вставить Вашу кнопку в шаблон сайта, но что то не получается. Можете описать подробно, как установить в шаблон Joomla 2.5. Спасибо.

    1. Алексей Кобзарев Автор записи

      Сначала удалите кнопку (скрипт), которая поднимает посетителя вверх при нажатии, а после делайте все то, то написано в этой статье.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *