Всем привет! Вы наверное заметили, что на seo-mayak.com появились кнопка верх и кнопка вниз для быстрой прокрутки страницы, а также кнопочка для чтения и пауза.
И сегодня я хочу Вам предложить установить скрипт с такими кнопками, который я написал специально для сайта на WordPress.
Я уже давно хотел реализовать на блоге что-то подобное, так как пишу довольно объемные посты, для прочтения которых приходиться прокручивать несколько экранов, что согласитесь, парой начинает нервировать.
Катастрофически не хватает времени! Писать статьи и то приходиться по ночам, отнимая время от сна, не говоря уже про всякие работы по блогу, которые постоянно откладываются на свободный денек.
И вот наконец у меня дошли руки до установки кнопок вверх и вниз, но я бы наверное еще долго собирался, если бы не вебвизор (вебвизор — это инструмент Яндекс Метрики). Наблюдая за своими посетителями я заметил, что многие что-то ищут в нижнем углу экрана, где просто пустое место и не найдя закрывают страницу.
Да и самому мне сильно не хватало кнопки быстрой прокрутки, ведь на своем кулинарном блоге я уже давно поставил такую стрелочку и бывает сам по-привычке тычу мышкой в правом нижнему углу.
Если Вы пишите объемные статьи и у Вас до сих пор не установлены кнопки вверх вниз, то мой сегодняшний пост специально для Вас. Поехали!
Скрипт блока кнопок вверх и вниз
Идею сего скрипта я взял с буржуйского сегмента интернета и мне пришлось изрядно повозится, чтобы скрипт нормально работал на CMS WordPress, а результат корректно отображался во всех браузерах.
Для веб-мастеров с базовым знанием HTML, и CSS не составит труда установить скрипт кнопок на свой сайт, а вот на счет новичков я не так уверен и ожидаю массу вопросов в комментариях.
Конечно я постараюсь всем помочь советом, а подписчикам блога помогу еще и делом, если будет такая необходимость.
Конечно, я физически не смогу решать все вопросы, так как обращений уже приходит довольно много и поэтому я буду выбирать самые экстренные и тяжелые случаи, где моя помощь будет действительна необходима.
Итак, для начала нам потребуется подключить к сайту библиотеку jQuery, как это делается читайте тут. Обязательно проверьте, файлы header.php и footer.php, возможно библиотека jQuery у Вас уже подключена, в таком случаи повторно подключать ее не надо.
Далее, ищем в шаблоне папку с названием «js». Если такой нет, то надо будет ее создать, но об этом немного позже. Если такая папка есть, то в ней должны находиться файлы с расширением «.js «.
Создаем новый файл с расширением .js и вставляем в него следующий код:
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 =w indow.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 class="arrow"> <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>');
Если синий цвет картинок Вам не подходит, зовите в помощь фотошоп и создавайте картинки стрелок на свой вкус, благо сложного в этом ничего нет.
Свои картинки надо закачать на сервер в папку «images» (как закачивать файлы на сервер, читайте здесь), которая также расположена в папке с Вашей темой, а затем заменить URL картинок в коде.
Адреса картинок прописаны на самой последней строчке кода, вот URL картинки со стрелкой «Наверх»:
src="http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png"
Очередность картинок сверху вниз, т.е. первый адрес — стрелка наверх, второй — пауза и т.д.
Далее, открываем файл style.css и в самый конец вставляем стили для кнопок:
/*стили для кнопок вверх/вниз*/ .arrow { position: fixed; width: 64px; right: -10px; bottom: 115px; z-index: 10; } .arrow img { opacity: 0.3; } .arrow img:hover{ cursor: pointer; opacity: 1; filter: alpha(opacity=100); } /* Отключение отображение кнопок на мобильных устройствах */ @media screen and (max-width:760px){ .arrow{display:none;} }
Вот в принципе и все, блок кнопок должен работать.
Как создать файл с расширением «.js»
Давайте прежде всего разберемся, почему у файла должно быть такое расширение. Дело в том, что в файлах с таким расширением, расположены коды, написанные на языке JavaScript. Отсюда и расширение файла «.js».
Создать такой файл можно в бесплатном текстовом редакторе Notepad++, просто сохранив вновь созданный файл в вышеупомянутом расширении:
Название у файла может быть любым, главное чтобы оно состояло из английский символов.
Итак, мы создали папку с названием «js» и файл с расширением «.js», а также скопировали в него код кнопок, но этого недостаточно, надо еще подключить файл к шаблону.
Как подключить файл с расширением «.js» к шаблону WopdPress
На самом деле ничего сложного нет в подключении к шаблону файла «.js» и в принципе сие действие ничем не отличается от подключения библиотеки jQuery или любого другого скрипта. Например:
Вариант №1:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/Название файла.js"></script>
Вариант №2:
<script type="text/javascript" src="http://Ваш домен/wp-content/themes/Название темы/js/Название файла.js"></script>
Чтобы не замедлять загрузку страниц, подключать скрипты лучше в файле footer.php, вставляя код после закрывающего тега:
</body>
Все просто! Но вспоминая себя несколько лет назад, я понимаю, что у новичков будут сложности. Для этого есть форма комментариев. Милости прошу, задавайте вопросы.
На сегодня у меня все. Как Вам статья?
С уважением, Виталий Кириллов
Уже на многих сайтах вижу такие кнопки. И даже не раз ими пользовалась. Ставить их плагином не хочу. А кодами поставить — дело не плохое.
Тем более, что скрипт, добавленный в уже существующий файл xxx.js, не будет замедлять загрузку страницы.
Привет Виталий! Смотрел выдачу Яндекса по запросу подключения кнопок вверх-вниз. Ваша статья 3-я и она мне понравилась больше, чем те, что выше стояли. Тем более, у вас такой хороший функционал этих кнопочек!
Хочу дополнить твою статью. Напиши, что «подключать файл с расширением «.js» к шаблону WopdPress» — обязательно. А то я все сделал до подзаголовка «Как создать файл с расширением «.js»» и думал, что работа закончена. Ведь у тебя так и написано.
Начал писать тебе сообщение, в котором хотел спросить то, да се, но потом, ради эконимии времени подключил сам библиотеку кверри и сам скрипт. Все заработало!!!
Но хочу позиционировать блок кнопок по своему, так как мне нужно. Это делается в стилях, как я знаю?
Да позиционирование делается в стилях.
Спасибо за статью. Но чтобы не позориться замените вот это — «Название у файла может быть любым, главное чтобы оно состояло из английский символов.»
Нет никаких «английских символов» в природе и не было. Есть латинские.
Интересная фишка, только мне как-то привычнее прокрутку колесиком мышки делать и читать текст. А текст, даже если он длинный, но интересный, посетители обязательно дочитают до конца.
Елена, многие уже привыкли к стрелкам.
Виталий, а ссылки на картинки из яндекса будут индексироваться? По идее, они в папке шаблона лежат, а она закрыта в роботсе… Просто лень искать другие и заниматься переделкой кода…
Картинки от индексации не закрывают.
Здравствуйте! Сделала все, как тут написано, но чет не получается.
Стрелочки появились, но в они в самом-самом низу сайта расположились, в левом углу. Не могу понять, что я не так сделала…
Просто надо было сбросит кеш.
Сейчас прошло время, и все само заработало=)
Стало, как у Вас в правый угол (а не в левый как было).
Только у меня такая вот беда теперь: у меня установлен синий фон для сайта, и кнопочки встали прямо на него, и там практически не видны. Посмотрите, пожалуйста тут: http:// words-and-money.ru/
МОжно ли как-то их сместить ближе к центру?
Дело в том, что размеры мониторов у всех разные. Например у меня монитор 19 дюймов и стрелки смотрятся замечательно, а если их сместить в право, то они залезут на сайдбар.
Сместить можно, для этого в стилях надо изменить значение селектора:
[php]right: -10px;[/php]
Но думаю это делать не стоит.
Понятно. Спасибо за объяснение. Ну раз говорите, что на моем сайте они нормально смотрятся, то пока так и оставлю. Здорово, что все-таки получилось)))
Еще один вопрос: вы пишете, что если библиотека jQuery уже подключена, то ее повторно подключать не надо. А как узнать, включена она или нет?
В коде должен быть точно такая же строка (если уже включено) «»
Или она может по другому выглядеть?
Есть простой способ проверить. Просто не подключайте библиотеку и посмотрите будут ли кнопки отображаться.
Нужны ли подобные кнопки вообще? На клавиатуре есть 2 кнопки для осуществления этих функций 🙂 Стои ли сайт грузить?
Ну кому как, наверное. Некоторые к ним сильно привыкают.
Виталий, ваш сайт — просто находка для меня! Всё понятно и доступно! Класс!!!
Анастасия я рад, что мой труд оказался для Вас полезен!
Спасибо. Актуально
Виталий, я сделала как вы говорили (подключила библиотеку, нашла папку в шаблоне с названием «script.js», вставила в него ваш код,вставила еще один код в стили). Вроде бы все получилось, но:
1) при приближении курсора к кнопкам вместо слов «наверх», «вниз», «читать» получаются козяврики.
2) при загрузке страницы кнопки вначале появляются в левом верхнем углу, а потом уже перемещаются направо вниз.
Посмотрите, пожалуйста. Что делать???
Кракозябры получаются из-за неверной кодировки файла. Задайте для созданного файла кодировку utf8.
Козяврики мне удалось убрать просто убрав сами слова в файле с Js. Теперь ни козявриков, ни слов. А вот вторая проблема все еще стоит — при загрузке страницы кнопки становятся видны вначале в левом верхнем углу, а потом уже перемещаются куда положено.
Сбросьте кеш браузера.
Здравствуйте, Виталий. может быть я опять туплю, но у меня вообще не появилось никаких стрелок. Не подскажете, где я могу ошибаться?
Для начала почистите кэш браузера.
Все вышло! не получалось не из-за кэша, а из-за моей невнимательности! 🙂
Виталий, подскажите, пожалуйста! Вставила блок кнопок без проблем, всё получилось, но через некоторое время при наведении курсора на блок вместо «наверх» появляется «?????» При этом кнопки работают. В чем может быть дело?
Анастасия, у Вас все прекрасно работает.
Виталий, работает-то работает. Но почему вместо надписи «наверх» при наведении курсора на кнопку появляются символы «????» Это что-то с кодировкой у меня? Или дело в другом? Сначала всё нормально было…
Анастасия, поменяйте кодировку файла на UTF8.
Здравствуйте, после всего проделанного — стрелки просто стоят в подвале! Как быть?
Попробуйте сбросить кеш браузера и все должно заработать.
И еще один мой вопрос! Как снизить скорость прокрутки страницы при чтении?
Чтобы снизить скорость прокрутки в режиме чтения, увеличьте задержку в миллисекундах в строчке:
[php]stopwatch=setInterval("mayak_scroll()",30);[/php]
Где число 30 как раз интервал задержки.
Чтобы увеличить скорость прокрутки страницы в режимах вниз и наверх, увеличьте числовое значение в строчке:
[php]var mayak_arrows_my=100;[/php]
Спасибо большое!
Кнопки сразу привлекли внимание своими интересными функциями, Виталий! мне понравился ваш блог и доступная подача информации. Я тоже всегда стараюсь как можно более подробно все рассказать, чтобы понятно было всем читателям.
Спасибо Рашида!
Спасибо огромное! хоть и новичок я в этом деле — а получилось с первого раза.норм статья! СПС)))
Пожалуйста Max, пользуйтесь!
Здравствуйте! Убрал плагин кнопок, после обновления он стал конфликтовать. Решил обойтись без него, но сколько не старался не получается, подключить кнопки. Вроде делаю всё правильно, но постоянно выдаёт » отключен от сервера», не пойму в чём причина? Помогите советом!!!
Дмитрий, в смысле сайт перестает работать?
Нет, это плагин после очередного обновления перестал отображаться и стал помехой некоторых функций. После его удаления всё пришло в норму.
После чего решил установить кнопки без плагина, а так как Ваш сайт у меня в закладках, найти хорошие кнопки не составило труда. Прочитав три статьи о необходимых установках приступил к работе. Но в итоге не чего не вышло. Настройки кнопок не убирал, работе сайта они не мешают, буду разбираться что не так сделал. А то кнопки нравятся сильно, давно хотел их установить, но руки всё не доходили.
Очень частая ошибка в подключении скрипта, будьте внимательны и все проверяйте на 10 раз. Скрип рабочий и прошел проверку на многих ресурсах.
Форма подключения: Вариант №2: Что такое /Название темы/, чем это заменить.
Дмитрий, название темы — это название вашего шаблона. Вписываете название и все. И еще Дмитрий, если не заработает, то попробуйте подключить скрипт в шапке сайта перед закрывающим тегом:
[php]</head>[/php]
Виталий, всё не могу успокоится, просидел большую часть вечера — нечего не получилось. Пробовал уже разные варианты, безрезультатно! Может можно как то с Вами связаться и решить эту проблему? Мне было бы удобно через «скайп».
Дмитрий, у Вашего e-mail, который вы указали при подписки на обновления блога, значится статут, как «Непроверенный»! Исправите статус и напишите мне через форму обратной связи.
А попроще нельзя?
Хотелось бы описание как сделать простую кнопку «вверх» с плавной прокруткой.
А у меня ничего не получилось! Хотя до этого поставила на свой сайт много других скриптов, и все успешно. А этот не отображается даже косо. вообще ничего на сайте не изменилось.
Юлия, значит где-то Вы допустили ошибку. Частая ошибка — не правильное подключение скрипта.
Уже разобралась, работает. Просто пришлось создать новый файл .js — когда добавляла в старый ничего не выходило.
Юлия хорошо, что у Вас все получилось и в связи с возникшей у вас проблемой, по добавлению скрипта в старый файл .js, я поправлю статью.
Виталий! Огромное спасибо!
Заработало всё сразу. Объяснение понятное.
Я, хоть и начинающий, всё сделал буквально за 10 минут!
Ещё раз СПАСИБО!
Пожалуйста Андрей, рад видеть Вас на блоге!
Виталий, добрый день!
Похоже, что после последнего обновления WP до версии 3.9.1, столкнулся с такой проблемой: все ваши доработки (форма обратной связи, кнопки «вверх-вниз», хлебные крошки и пр.) исчезли. Видимо затерлись обновлениями. Но, перед этим несколько апдейтов прошли нормально. Почему это случилось и как этого избежать в будущем? Я уже и забыл, что я там за все время настраивал. Обидно!
Были ли у кого-то подобные проблемы?
Спасибо.
Андрей, все мои, как вы говорите, доработки, были произведены в файлах шаблона, которые не затрагиваются при обновлении WordPress. Вы случайно шаблон не обновляли?
В любом случаи, надо обязательно делать бэкап всех файлов, с помощью FTP клиента FileZilla или с помощью плагинов. Этим Вы избавите себя от многих проблем.
Виталий, спасибо за ответ. Совершенно не пытался вас поддеть словами «ваши доработки»:)Я к вам не с претензиями, а за помощью. Просто хотел понять в чем дело. А вы совершенно правы. Вышло обновление стандартной темы и я ее обновил. Значит в этом дело? Все бэкапы есть, но проблему заметил не сразу и делал несколько публикаций после обновления.
Андрей, все нормально! Конечно дело в обновлении темы, но если есть бэкапы, то можно все поправить. Все публикации хранятся в базе данных, а не в файлах шаблона, поэтому если восстановить файлы из бэкапа, то Ваши статьи не пострадают.
Всё работает.Спасибо.
Хорошо кнопочки встали. Ваши синие не брала, свои нарисовала, под цвет сайта. Но есть вопрос: как их сделать побольше, какую циферку в стилях поменять или вставить? Я в кнопки надписи вставила, хочу, чтобы их было видно. Пока что просто убрала их блеклость, а то вообще видно не было.
Теперь меня будет мучить вопрос, что еще можно затолкать в боковые пустоты, кроме стрелок и социальных кнопок. Иногда вижу на сайтах какие-нибудь надписи. Буду ставить эксперименты.
Странно Пиполанка, что с вашей тягой к экспериментам, Вы до сих пор не овладели языком CSS. Это ведь самый простой язык! Я намеренно не буду отвечать на Ваш вопрос, так как ответ в принципе лежит на поверхности.
У меня много «хоббей», поэтому все знания поверхностны. Меня не хватит на то, чтобы освоить CSS — для это нужны уроки и систематизация данных, а множество других интересов не способствуют усидчивости. Сегодня работаю, а вот завтра обязательно поищу ответ на этот вопрос. Опять день угроблю — ищу одно, но по пути встречаю массу интересного — и во всем нужно разобраться, до всего (а иногда и до всех) докопаться.
P.S. Ну вы меня и обозвали! )))
Сори, это просто опечатка, уже исправил) Базовые знания все равно должны быть, иначе вообще зачем заниматься экспериментами! Есть бесплатные курсы и усидчивость тут не причем, тут интерес важен!
Мои эксперименты — не от желания обзавестись знаниями, а от любопытства (как у ребенка), когда возникший вопрос создает пустоту, для заполнения которой я и ищу ответы. Когда заводила сайт, вообще не знала, что такое php, скрипты, но пришлось разбираться. А всякие курсы — это так долго! Это дни и дни, я не могу столько времени акцентироваться на одном интересе. Не могу я бросить все остальное и быть только программистом. Да и работа эта, высасывает все вдохновение, остатки которого идут в блог. Блин, даже брюки сшить некогда.
Ну тогда я Вам не завидую! Так и будите скитаться по разным сайтам в поисках информации, которая заполнит пустоту и потратите больше времени, чем на просмотр курса из 30 — 40 видеоуроков. Дело Ваше конечно, но я за Вас эксперименты проводить не буду.
Информация к размышлению:
width — ширина;
height — высота.
Вашим вызовом вы решили отбить у меня тягу к экспериментам? Вам это удалось. Два часа мучила style.css, теперь месяц не захочу ковыряться с этими кодами.
Увеличила кнопку. В style.css вставила .my_button {width: 60px; height: 60px; }, в файле js перед тайтлом картинки прописала class=»my_button». Надписи пришлось убрать — все равно их не видно.
Здравствуй Виталий! Отличная статья! Мне кнопки понравились, я установил на блог. Скрипт и стили вставил header.php активированной темы перед закрывающим тегом . Выровнял под свою страницу, всё работает. Мой блог куда установил кнопки info21v.ru
Виталий, в очередной раз меня выручаете! Спасибо за статью! Поставила кнопочки, все работает))
Я рад Наталья, что у Вас все получилось)
Никак не получается вставить скрипт. прописал все как написано, но ничего не выходит, кнопки не появляются на странице
Ура! всё получилось, сам изначально кое-что пропустил, теперь исправил и радуюсь. Спасибо за код !
Спасибо за скрипт, Виталий! Все получилось с первого раза!
Спасибо за скрипт, все получилось классно с первого раза. Перерисовал кнопы — вообще классно вышло. Одно меня интересует где в файле js уменьшить скорость движения страницы в режиме «Чтение»?
Я уже отвечал на данный вопрос вот в этом комментарии.
Виталий, добрый вечер! А подскажите, возможно ли сделать, чтобы эти кнопки выводились на всех страницах кроме главной? Спасибо.
Думаю можно! Надо подключить скрипт через файл functions.php и прописать условие
Добрый день, Виталий! Поставил в новую тему Ваш скрипт кнопок. Только картинки себе на хостинг загрузил. Могу, если желаете, пропиарить 🙂 Разных вариантов кнопок «вверх — вниз» видел в интернете немало. Ваш считаю самым удобным. А рубрика про Вордпресс есть и у меня на блоге, хотя там пока всего одна статья.
У меня тут еще к Вам вопрос будет, не по теме статьи. В код вылазит откуда-то скрипт счетчика Гугл Аналитикс, причем «кривой» — с обилием слешей. И счетчик давно переустановлен. И тему все же сменил. А скрипт все равно вылазит. Понятно, что источник — не файлы темы. Но вот где, скорей всего, могли этот скрипт «прописать» мои «кривые ручки»? Не можете предположить, где искать?
Здравствуйте Александр!
Посмотрите в настройках плагина All in One SEO Pack, хотя конечно я не уверен, что в этом причина, но проверить надо.
Добрый день, Виталий!
В самом деле, некий код был вписан в графу Google Analitics ID. Убрал его, убрал галочку Расширенные настройки аналитики Включить. Исчезли только слеши — сам скрипт остается. Но у меня скрипт счетчика гугл в файле footer. Выводится, соответственно, в «подвале». Статистика работает, вроде все в норме. Придется разбираться дальше.
Отображаються кнопки в подвале и никуда не хотят сдвигаться. Что не так? Кэш сбрасывал несколько раз.
Добрый день, Виталий!
Какие стили в файле style необходимо прописать для мобильных устройств?
Обратил внимание, что при прокрутке страницы вниз до конца и с последующим постепенным возвращением наверх колесиком мыши или клавишами, стрелка «вниз» никак не возвращается на место.
То есть если я прокрутил страницу до конца, потом вернулся назад на несколько страниц и понял что мне нужно обратно в низ, то кнопки со стрелкой вниз я больше не вижу. )
Здравствуйте. Очень интересный материал, долго искала оптимальный вариант, опробовала его на своем новом блоге очень понравилось все просто и работает без проблем.
Виталий, спасибо за хорошую статью.
А как сделать кнопки не прозрачными?
Наталья, в стилях за прозрачность отвечает селектор:
Значение меняется от 0 до 1, т.е. если сделать 0.5, то кнопки будут полупрозрачными.
Спасибо!
Виталий, доброго дня! Спасибо за полезный контент)
Сделала все по инструкции, но кнопки не появились.
Почистила кеш, открывала в разных браузерах, не помогло.
Сайт на WP. В чём может быть причина?
Возможно вы путь до файла со скриптом указали не правильно.
По инструкции все делала. Имя вписала. Поместила новый файл .js в папку js. Скрипт размещала и в header и в footer. Оба скрипта попробовала.
Кнопок нет.
Мне ваш вариант кнопок нравится больше других, жаль.
Наталья, трудно назвать точную причину, но скорее всего где-то ошибка. Все должно работать!
Здравствуйте Виталий. Вчера устанавливал кнопки, все работало.Сегодня куда то пропали, не подскажите почему? Я даже не привязывал библиотеку.Что значит Название файла.js
Решение нашлось такое. Настройки чтения,На страницах блога отображать не более 7 и кнопки появились. Отлично!У вас на блоге много полезного.что я хочу применить у себя.
Я рад, Александр, что у Вас все получилось.
Здравствуйте,Виталий. Столкнулся с такой проблемой.Стояли кнопки, а потом пропали.Все скрипты на месте, созданный файл на месте, его я переделывал даже. Кнопки не появляются. Не подскажите причину?
Здравствуйте Александр!
Проверьте правильность подключение js файла.
Поставил скрипт в футер сайта ucoz но кнопки всегда отображаются в том блоке в котором установлен скрипт. Как правильно установить скрипт на сайте ucoz
Отличное решение и это действительно очень удобно. Сделал кнопки как у вас. Вроде не плохо получилось. 🙂 web-klik.ru
Вот только на мобильных устройствах много места эти стрелки занимают. Как это скажется на юзабилити сайта на мобильных устройствах? Ведь с них сейчас заходят большое количество посетителей. На компьютере отлично выглядят кнопки не спорю. А вот на мобильном на мой взгляд громоздко. Может есть решение отключить эти кнопки для просмотра на мобильных устройствах? Было бы не плохо. Виталий, вы не знаете как это сделать?
В статью добавил стили, которые будут отключать отображение кнопок на мобильных устройствах.