Как установить на сайт кнопки вверх, пауза, читать и вниз
В последние дни мне в комментариях стали задавать вопросы: – Как установить такие красивые и необычные кнопки вверх, пауза, читать и вниз, как у тебя? Никогда типа не видели такого набора кнопок… Вверх-вниз видели, а чтобы еще и “читать” с “паузой” была – такого не видели…
Отвечаю всем своим читателям и посетителям: нашел этот скрипт на просторах интернета. Он мне жутко понравился и я установил его себе на блог. О том, как это сделать я вам сегодня расскажу. В принципе – ничего сложного…
Многие блогеры и вебмастера игнорируют эти кнопки в смысле их установки, мотивируя это тем, что и мышкой неплохо справляются и зачем лишний раз код блога захламлять. Но я все-таки склоняюсь к установки этих прикольных, удобных кнопок.
Долгое время у меня не было их, так как кнопка Наверх была реализована (встроена) в самом шаблоне. Она и по сей день там. Зачем ее убирать то? Но она была статичной. Она находилась в футере блога и не появлялась, когда посетитель начинает “скролить” страницу вниз, а это может напрячь капризного посетителя или вашего читателя.
Поэтому, после прочтения сегодняшнего поста вы с легкостью (я надеюсь) сможете установить скрипт кнопок вверх-вниз-читать-пауза.
План установки скрипта вверх-пауза-читать-вниз
- Подключим библиотеку jQuery к сайту, если она еще не подключена
- Создадим новый файл с расширением .js (если его нет в шаблоне) и вставим в него специальный код
- Подключим этот файл к нашему шаблону
- Отпозиционируем кнопки в стилях – чтобы выглядело красиво!
Итак, вы готовы? Тогда поехали!
- Как подключить библиотеку jQuery к вашему сайту и зачем?
jQuery — это JavaScript библиотека. Она основана на взаимодействии JavaScript и HTML. Также средствами jQuery можно взаимодействовать с сервером с помощью AJAX запросов.
AJAX — это набор способов разработки веб-приложений. AJAX позволяет отправлять динамические запросы серверу без видимой для пользователя перезагрузки веб-страницы.
Сложно, правда? Да, для новичков блогинга – это темный лес. Да и для меня пока это далеко не светлая поляна… Но дело не в этом друзья. Эта библиотека позволит нашему скрипту работать, поэтому вам необходимо проверить – подключен ли ваш блог уже к этой всемирноизвестной гугловской библиотеке работы скриптов.
Что для этого нужно сделать? Нужно проверить файл шаблона header.php на наличие вот этой строчки:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Как быстро найти эту строку в файле шаблона? Ответ: – Комбинацией кнопок CTRL/F
И когда в верхнем правом углу появиться поисковое окошко – вставляйте туда эту искомую строчку. Если она там не появилась, то ваш блог не подключен к библиотеке jQuery. Смело подключаем!
Вставляем эту нужную строчку в файл шаблона header.php до закрывающего тега </head>
Вот, как эта строчка выгладит у меня в header.php Итак, библиотеку мы подключили. Что далее по плану?
- Создадим новый файл с расширением .js и вставим в него специальный код – для этого, заходим при помощи filezilla на хостинг и ищем в корневом каталоге, в папке с вашей темой папку под названием js
Вот как она выгладит у меня на хостинге. И все файлы, с расширением .js находятся в ней. Если такой директории у вас на хостинге нет (в чем я сильно сомневаюсь), то нужно создать такую папочку. Для этого, кликаем на папке с темой правой кнопкой мыши и жмем на “Создать каталог”. Вместо “Новый каталог” пишем js и ОК. Папка с нужным нам расширением благополучно создалась. Теперь создадим новый файл в этой папке. Зайдите в нее и при помощи правой кнопкой мыши выберите “Создать новый файл”. Дайте свое название этому файлу. Я например обозвал vverx-vniz. Логично ведь? 🙂 А теперь скопируйте вот этот длиннющий код.
var mayak_arrows_my=100; var mayak_tytime_arrows=5; var post_mayak_go,stopwatch; function mayak_lop_arrows() { stopwatch=setInterval("mayak_scroll()",30); } function mayakhendr() { clearInterval(stopwatch); } function mayak_scroll() { post_mayak_go = document.documentElement.scrollTop || document.body.scrollTop; window.scrollTo(0,++post_mayak_go); } function mayak_the_highest_point() { try{ if(window.pageYOffset!=undefined) return window.pageYOffset; return window.document.body.scrollTop; }catch(err) { try{ return window.document.body.scrollTop; }catch(err2) { return 0; } } } function mayak_scroll_to_top() { var mayak_copy_zoo=window.document.body; var mayak_brake_by=mayak_the_highest_point(); window.scrollBy (0,-mayak_arrows_my); var mayak_brake_stop=mayak_the_highest_point(); if(mayak_brake_by>mayak_brake_stop) setTimeout("mayak_scroll_to_top()",mayak_tytime_arrows); else document.getElementById("mayak_down_img").style.display="block"; return false; } function mayak_down_arrow() { var mayak_copy_zoo=window.document.body; var mayak_brake_by=mayak_the_highest_point(); window.scrollBy (0,mayak_arrows_my); var mayak_brake_stop=mayak_the_highest_point(); if(mayak_brake_by<mayak_brake_stop) setTimeout("mayak_down_arrow()",mayak_tytime_arrows); else document.getElementById("mayak_down_img").style.display="none"; return false; } function slow_mayak_scroll() { var seo_mayak_body=window.document.body; var mayak_height=seo_mayak_body.scrollHeight; var mayak_top=mayak_the_highest_point(); if(mayak_top==0) document.getElementById("mayak_up_img").style.display="none"; else document.getElementById("mayak_up_img").style.display="block"; return false; } setInterval("slow_mayak_scroll()",100); document.write('<div> <a href="#" onclick="return mayak_scroll_to_top()"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png" title="Наверх"></a><br /> <a href="#" onclick="mayakhendr();return false;"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/9505/135756646.0/0_9340f_76b6c4ce_S.png" title="Пауза"></a><br /><a href="#" onclick="clearInterval(stopwatch);mayak_lop_arrows();return false;"><img border="0" id="mayak_up_img" width="40px" src="http://img-fotki.yandex.ru/get/9265/135756646.0/0_9340e_c78087a3_S.png" title="Читать"></a><br /> <a href="#" onclick="return mayak_down_arrow()"><img border="0" width="40px" id="mayak_down_img" src="http://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png" title="Вниз"></a></div>');
И вставляем его в наш только что созданный файл. Картинки кнопок взяты с Яндекского сервера fotki, где и находятся. Если вы хотите свои кнопки, то их нужно будет закачать в папку «images» вашей темы и поменять в последней строке кода их адреса на свои. Ссылка на картинку выглядит вот так:
src="http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png"
Очередность ссылок на картинки – сверху-вниз, то есть сначала идет кнопка Наверх, затем Пауза, затем Читать и последняя Вниз.
- Подключаем наш волшебный файл к шаблону
Все делается тоже – очень просто. Нужно прописать специальный код в файле вашей темы footer.php (чтобы не замедлять загрузку страницы) после закрывающего тега </body>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/Название файла.js"></script>
- Позиционирование блока кнопок Вверх-вниз-читать-пауза
Открываем файл стилей вашей темы style.css и прописываем в самый его низ вот такой код
/*стили для кнопок вверх/вниз*/ .arrow { position: fixed; width: 64px; right: 47px; bottom: 40px; z-index: 10; } .arrow img { opacity: 0.3; } .arrow img:hover{ cursor: pointer; opacity: 1; filter: alpha(opacity=100); }
Я вам даю в этом коде свои значения расположения блока кнопок. Изначально блок располагался ближе к правому краю страницы и выше, чем у меня. У меня сейчас блок расположен в 47ps от правого края страницы и в 40ps от низа блога.
Подсказка! “Играть” (менять) нужно значения right (вправо) и bottom (вниз). Поняли меня? Отступы справа и снизу нужно будет поменять для того, чтобы блок кнопок органично вписывался в дизайн вашего сайта (блога).
Надеюсь – рассказал доступно и просто. Все вопросы жду в комментариях. Могу помочь в установке этого скрипта. Расценки в разделе Мои услуги.
Демонстрацию работы этого замечательного скрипта можно увидеть вот на этом сайте — seo-mayak.com
Победитель в конкурсе Топ комментаторов в Апреле
В апреле месяце победителем конкурса на лучшего комментатора на моем блоге стал Влад Лемишко — автор блога «Интересно о полезном» Владислав, поздравляю тебя с этим выигрышем — 200 руб! Ты оставил более 70 комментариев к моим статьям за апрель месяц. Молодец! Так держать! Жду номера кошелька на почту…
До встречи на Seo bloge Fomika…
Статьи по теме:
- Как узнать название чужого WordPress шаблона
- Как сделать карту сайта sitemaps.xml без плагина Google XML Sitemaps
- Как сделать краткое содержание статьи на сайте. Понятие якоря в тексте
- Как запретить комментирование на WordPress блоге
- Как убрать “Можно использовать следующие HTML-теги и атрибуты” под формой комментирования WordPress
Здравствуйте. Как с вами связаться?
[Ответить]
Алекс Fomik Reply:
Май 14th, 2014 at 8:36 пп
Здравствуйте Виктория.
Неужели на блоге не видна кнопка Контакты. Она справа находится. Или как вы — через комментарий. Я отвечаю всем…
Что вы хотели Вика?
[Ответить]
Vlad Reply:
Май 15th, 2014 at 11:58 дп
Привет, Фомик!
Скорее всего Виктория говорит об отдельной странице «Контакты», где должна стоять форма для обратной связи… =)
[Ответить]
Алекс Fomik Reply:
Май 17th, 2014 at 6:34 дп
Просто у нее браузер не показывает почему-то эту кнопку… А мое упущение — не написал е-мейл в Моих услугах и Обо мне…
[Ответить]
Vlad Reply:
Май 17th, 2014 at 3:38 пп
А я как-то раньше и не видел у тебя данной страницы…
Реклама есть и все, а на «Мои услуги» не кликал… 😀
[Ответить]
Василий Цубера Reply:
Май 24th, 2014 at 10:49 пп
Нельзя так грубо… Это не приятно для посетителя и можно его навсегда отпугнуть. но дело ваше, я бы так не делал
[Ответить]
Алекс Fomik Reply:
Май 14th, 2014 at 8:37 пп
И зачем вы поставили урл блога Саши Борисова?
[Ответить]
Виктория Reply:
Май 14th, 2014 at 9:45 пп
Кнопки контакты у вас нет. Как вам на почту написать? Я помощник Саши.
[Ответить]
Vlad Reply:
Май 15th, 2014 at 12:01 пп
Виктория, неужели Борисов захотел и себе такие кнопочки? Только самому ставить лень…
Вот почта автора данного блога: fomik77@yandex.ru
P.S. Я тут иногда тоже что-то типа поддержки… 😀
[Ответить]
Алекс Fomik Reply:
Май 17th, 2014 at 6:35 дп
Спасибо Владик за «поддержку»!))) Но это не по кнопкам обращение))) Для Борисова эти кнопки не нужны…
[Ответить]
Vlad Reply:
Май 17th, 2014 at 3:34 пп
Ну, там было немного иронии… 😀
[Ответить]
Алекс Fomik Reply:
Май 17th, 2014 at 12:33 дп
Вика, видимо эту кнопку блокирует ваш браузер или еще что-то… Вот вой е-мейл alfomik@gmail.com
[Ответить]
Василий Цубера Reply:
Май 24th, 2014 at 10:52 пп
Привет Вика. Приятно тебя видеть здесь. Наслыхал о тебе много
[Ответить]
Виктория Reply:
Июнь 6th, 2014 at 12:04 дп
Наслыхали много? А что именно? 🙂
[Ответить]
Интересный постик. Спасибо возможно и себе установлю. Только интересно не сильно ли это тормозит загрузку сайта или блога ?
[Ответить]
Алекс Fomik Reply:
Май 30th, 2014 at 2:26 пп
Я проверял скорость до и после. Разницы большой не увидел…
[Ответить]