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

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

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

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

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

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

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

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("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…

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