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

Всем привет!

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

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

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

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

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

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

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

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

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

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

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

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

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 в кнопке вверх, вниз, читать, стоп

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

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

36 комментариев

Ваш комментарий

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