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

В последние дни мне в комментариях стали задавать вопросы: – Как установить такие красивые и необычные кнопки вверх, пауза, читать и вниз, как у тебя? Никогда типа не видели такого набора кнопок… Вверх-вниз видели, а чтобы еще и “читать” с “паузой” была – такого не видели…

скрипт кнопок вверх-вниз-пауза-читать

Отвечаю всем своим читателям и посетителям: нашел этот скрипт на просторах интернета. Он мне жутко понравился и я установил его себе на блог. О том, как это сделать я вам сегодня расскажу. В принципе – ничего сложного…

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

Долгое время у меня не было их, так как кнопка Наверх была реализована (встроена) в самом шаблоне. Она и по сей день там. Зачем ее убирать то? Но она была статичной. Она находилась в футере блога и не появлялась, когда посетитель начинает “скролить” страницу вниз, а это может напрячь капризного посетителя или вашего читателя.

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

План установки скрипта вверх-пауза-читать-вниз

  1. Подключим библиотеку jQuery к сайту, если она еще не подключена
  2. Создадим новый файл с расширением .js (если его нет в шаблоне) и вставим в него специальный код
  3. Подключим этот файл к нашему шаблону
  4. Отпозиционируем кнопки в стилях – чтобы выглядело красиво!

Итак, вы готовы? Тогда поехали!

  • Как подключить библиотеку 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(&quot;mayak_scroll()&quot;,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&gt;mayak_brake_stop)
 setTimeout(&quot;mayak_scroll_to_top()&quot;,mayak_tytime_arrows);
 else
 document.getElementById(&quot;mayak_down_img&quot;).style.display=&quot;block&quot;;
 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&lt;mayak_brake_stop)
 setTimeout(&quot;mayak_down_arrow()&quot;,mayak_tytime_arrows);
 else
 document.getElementById(&quot;mayak_down_img&quot;).style.display=&quot;none&quot;;
 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(&quot;mayak_up_img&quot;).style.display=&quot;none&quot;;
 else
 document.getElementById(&quot;mayak_up_img&quot;).style.display=&quot;block&quot;;
 return false;
}
setInterval(&quot;slow_mayak_scroll()&quot;,100);
document.write('&lt;div&gt; &lt;a href=&quot;#&quot; onclick=&quot;return mayak_scroll_to_top()&quot;&gt;&lt;img border=&quot;0&quot; id=&quot;mayak_up_img&quot; width=&quot;40px&quot; src=&quot;http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png&quot; title=&quot;Наверх&quot;&gt;&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;#&quot; onclick=&quot;mayakhendr();return false;&quot;&gt;&lt;img border=&quot;0&quot; id=&quot;mayak_up_img&quot; width=&quot;40px&quot; src=&quot;http://img-fotki.yandex.ru/get/9505/135756646.0/0_9340f_76b6c4ce_S.png&quot; title=&quot;Пауза&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;a href=&quot;#&quot; onclick=&quot;clearInterval(stopwatch);mayak_lop_arrows();return false;&quot;&gt;&lt;img border=&quot;0&quot; id=&quot;mayak_up_img&quot; width=&quot;40px&quot; src=&quot;http://img-fotki.yandex.ru/get/9265/135756646.0/0_9340e_c78087a3_S.png&quot; title=&quot;Читать&quot;&gt;&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;#&quot; onclick=&quot;return mayak_down_arrow()&quot;&gt;&lt;img border=&quot;0&quot; width=&quot;40px&quot; id=&quot;mayak_down_img&quot; src=&quot;http://img-fotki.yandex.ru/get/9162/135756646.0/0_93410_ddf9f62c_S.png&quot; title=&quot;Вниз&quot;&gt;&lt;/a&gt;&lt;/div&gt;');

И вставляем его в наш только что созданный файл. Картинки кнопок взяты с Яндекского сервера fotki, где и находятся. Если вы хотите свои кнопки, то их нужно будет закачать в папку «images» вашей темы и поменять в последней строке кода их адреса на свои. Ссылка на картинку выглядит вот так:

src=&quot;http://img-fotki.yandex.ru/get/5010/135756646.0/0_93411_db0f2375_S.png&quot;

Очередность ссылок на картинки – сверху-вниз, то есть сначала идет кнопка Наверх, затем Пауза, затем Читать и последняя Вниз.

    • Подключаем наш волшебный файл к шаблону

Все делается тоже – очень просто. Нужно прописать специальный код в файле вашей темы footer.php (чтобы не замедлять загрузку страницы) после закрывающего тега </body>

&lt;script type=&quot;text/javascript&quot; src=&quot;&lt;?php bloginfo('template_url'); ?&gt;/js/Название файла.js&quot;&gt;&lt;/script&gt;
    • Позиционирование блока кнопок Вверх-вниз-читать-пауза

Открываем файл стилей вашей темы 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…


Понравилась статья - поделись с друзьями!



Просмотр

Подпишитесь на обновления блога по почте :

Количество читателей блога


К записи "Как установить на сайт кнопки вверх, пауза, читать и вниз" 16 комментариев Самый активный комментатор в конце месяца получает денежный приз.

  1. Здравствуйте. Как с вами связаться?

    [Ответить]

    Алекс Fomik Reply:

    Здравствуйте Виктория.
    Неужели на блоге не видна кнопка Контакты. Она справа находится. Или как вы — через комментарий. Я отвечаю всем…
    Что вы хотели Вика?

    [Ответить]

    Vlad Reply:

    Привет, Фомик!

    Скорее всего Виктория говорит об отдельной странице «Контакты», где должна стоять форма для обратной связи… =)

    [Ответить]

    Алекс Fomik Reply:

    Просто у нее браузер не показывает почему-то эту кнопку… А мое упущение — не написал е-мейл в Моих услугах и Обо мне

    [Ответить]

    Vlad Reply:

    А я как-то раньше и не видел у тебя данной страницы…

    Реклама есть и все, а на «Мои услуги» не кликал… 😀

    [Ответить]

    Василий Цубера Reply:

    Нельзя так грубо… Это не приятно для посетителя и можно его навсегда отпугнуть. но дело ваше, я бы так не делал

    [Ответить]

    Алекс Fomik Reply:

    И зачем вы поставили урл блога Саши Борисова?

    [Ответить]

    Виктория Reply:

    Кнопки контакты у вас нет. Как вам на почту написать? Я помощник Саши.

    [Ответить]

    Vlad Reply:

    Виктория, неужели Борисов захотел и себе такие кнопочки? Только самому ставить лень…

    Вот почта автора данного блога: fomik77@yandex.ru

    P.S. Я тут иногда тоже что-то типа поддержки… 😀

    [Ответить]

    Алекс Fomik Reply:

    Спасибо Владик за «поддержку»!))) Но это не по кнопкам обращение))) Для Борисова эти кнопки не нужны…

    [Ответить]

    Vlad Reply:

    Ну, там было немного иронии… 😀

    [Ответить]

    Алекс Fomik Reply:

    Вика, видимо эту кнопку блокирует ваш браузер или еще что-то… Вот вой е-мейл alfomik@gmail.com

    [Ответить]

    Василий Цубера Reply:

    Привет Вика. Приятно тебя видеть здесь. Наслыхал о тебе много

    [Ответить]

    Виктория Reply:

    Наслыхали много? А что именно? 🙂

    [Ответить]

  2. Василий Цубера:

    Интересный постик. Спасибо возможно и себе установлю. Только интересно не сильно ли это тормозит загрузку сайта или блога ?

    [Ответить]

    Алекс Fomik Reply:

    Я проверял скорость до и после. Разницы большой не увидел…

    [Ответить]

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