Кнопка наверх на блоге без плагина

Комментариев нет

Кнопка наверх на блоге без плагина

 

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

Для чего нужна вообще эта кнопка наверх, для какого удобства?

Все очень просто. Представьте себе, что вы написали большой, объемный пост в блог. Ваши читатели оставили еще не один десяток комментариев да плюс еще ваши ответы к ним.

Понимаете сколько раз надо крутануть колёсико мышки, чтобы пролистать страницу вниз или наоборот вверх?

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

Ведь и колёсико не стальное, может сломаться. У меня на одной мышки он сломался, пришлось покупать новую. Теперь лишний раз стараюсь не крутить его.

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

Кнопка наверх – что надо сделать, что для этого потребуется.

Кнопку наверх можно установить двумя способами:

  1. С помощью плагина
  2. С помощью скрипта

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

С помощью второго способа я очень быстро и легко осуществил задуманное. Результат вы можете увидеть справа внизу. Все делается очень просто.

Итак, приступим.

В первую очередь скачайте вот этот архив. В нем находятся два файла:

  • Первый – картинка verh.gif.
  • Второй – файл js скрипт (verh.js)

Эти файлы надо закачать на ваш сервер, в корень вашего блога.

Для меня вначале, что такое корень блога (корневая папка), было вообще не понятно, поэтому для тех, кто не знает, растолкую.

Это основная (главная) папка, в которой располагаются остальные папки и файлы сайта (блога). Обычно это — public_html или httpdocs.

У меня выглядит это так: wptheme.us/public_html/.

То есть, если я подключаюсь к своему серверу через FTP клиент, то мне надо следовать по такому пути: wptheme.us => public_html. И когда я открою эту основную папку (public_html), щелкнув по ней два раза левой кнопкой мыши, то, как раз попаду в корень своего блога.

Сюда и будем заливать файлы из скаченного архива. Файл verh.gif можно положить в папку с картинками вашего блога (images), лично я так и сделал, а verh.js – в корневую папку.

Так первый шаг сделали.

Далее…

Копируем вот такой код:

1
2
3
4
5
6
7
<noindex><a href="#" id="toTop"><img src=http://Ваш_сайт.ru/images/verh.gif border="0" align="absmiddle" /></a>
<script src="http://Ваш_сайт.ru/verx.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script></noindex>

Скопировали? Теперь вставляем его в файл header.php, но лучше вставить в footer.php между тегами <body></body>. В коде вместо ваш_сайт.ru напишите адрес вашего блога.

Второй шаг тоже сделали.
Идем дальше…

Откройте через Админ панель => Внешний вид => Редактор, главный файл таблицы стилей style.css и в самом конце вставьте вот такой код:

1
2
3
4
5
6
#toTop {
position: fixed;
bottom: 20px;
right: 40px;
background: none;
cursor: pointer;}

Не забудьте обновить файл.

Внимание, друзья! Когда будете копировать код и вставлять в свой шаблон темы и в таблицу стилей, будьте внимательны! Все лишние строчки, которые скопируются, удаляйте. Только чистый один код вставляйте.

Прописывайте точное название картинки «Наверх». Если вставляете другую картинку то в коде вместо verh.gif пишите точное название и расширение новой картинки, например, strelka.png

Все готово!

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

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

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

готовые кнопки наверх

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

Напомню, что за первый коммент полагается подарок!

Видео по установке кнопки

Комментариев нет
 

Оставьте свой комментарий