Привет, читателям моего блога!
В этом посте мы установим еще один классный скрипт для сайта на WordPress! Но это не просто очередная кнопка вверх-вниз для сайта, она имеет небольшое дополнение: кнопочка для чтения и пауза! В принципе, я не планировал писать еще одну статью на данную тему и хотел остановится на своих двух постах:
Урок 1. Как сделать прокрутку на сайте: вверх, вверх-вниз с помощью специальных плагинов?
Урок 2. Скажи, как установить… Иначе мы тебя застрелим!
Но, увидел вот такой интересный скрипт и решил поделится информацией с вами! Хочу сделать данный пост небольшим, так как и писать здесь особо и нечего, после двух то постов ! Но каждый раз, когда я пишу что пост будет коротким — он увеличивается в два раза, а то и больше! Но сегодня я хочу сдержать свои слова и выкинуть весь объем своей статьи, но на качестве вашего обучения это не отобразится! Все по прежнему будет просто и ясно! Ну, приступим!
Скрипт для сайта на WordPress
Для начала вам нужно скачать js на свой компьютер и закинуть его на сервер через Ftp клиент! Чтобы получить скрипт, нажмите скачать! Картинки имеют синий цвет, как и всех предыдущих скриптах, так и здесь: вы можете загрузить свои картинки на сервер и изменить путь в скрипте, который вы скачали немного выше! Но здесь уже не две картинки на стрелочки, а 4: кнопка вверх, кнопка вниз, пауза и чтение! Поэтому путь тоже нужно менять в четырех местах! А именно, в конце скрипта (для изменений я использую программу Notepad++)! Ссылки имеют вид наподобие этой:
|
1
|
http://img-fotki.yandex.ru/get/9505/135756646.0/0_9340f_76b6c4ce_S.png
|
А вы заметили, что стандартные картинки хранятся на сервере Яндекса? Небольшое снижение нагрузки на ваш блог! Надеюсь поисковик не обидится:) И так мы закинули скрипт на сервер, научились менять картинки — кнопка вверх-вниз для сайта на половину готова! Теперь нужно подключить стили кнопок! Внешний вид — Редактор — style.css — в самый низ добавляем вот этот код:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/*стили для кнопок вверх/вниз*/
.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);
}
|
Теперь осталось подключить наш js к шаблону — просто прописав путь к нему!
|
1
|
<script type=«text/javascript» src=«http://Ваш домен/wp-content/themes/Название темы/js/Название файла.js»></script>
|
В данной строчке пропишите свой путь, и вставьте ее в подвал своего сайта после закрывающего тега </body>. Чтобы сильно не нагружать свой сайт!
P.S. Вот еще небольшое дополнение (изменения производятся в скрипте):
Чтобы снизить скорость прокрутки в режиме чтения, увеличьте задержку в миллисекундах в строчке:
Где число 30 как раз интервал задержки.
Чтобы увеличить скорость прокрутки страницы в режимах вниз и наверх, увеличьте числовое значение в строчке:
Ну вот и все, не забывайте сохранять свои изменения!
Ну как вам урок? Как у вас дела, нужна помощь? Пишите все в комментариях — мне реально интересно! Буду благодарен, если нажмете на пару кнопочек ниже и поделитесь информацией со своими друзьями! Всем пока!
С уважением, автор блога ИНТЕРЕСНО О ПОЛЕЗНОМ
Знаешь Влад — все конечно супер-здорово, но…
Наша Великая страна состоит не только из таких Гениев — как ты!
— Большая часть нашего народа (я в том числе) — не знают англ. языка, однако — все понимают, что — то о чем ты так классно рассказываешь — суперная вещь, но не все вообще шарят в кодах и в вообще.
Это для тебя это семечки, а для тех кто пытается врубиться в твои обьяснения это — полный кирдык — смотрим в книгу — видим — фигу!!!
А чтобы этого не произощло — тебе просто — НЕОБХОДИМО — по — шагово показывать все свои шаги на видео!!!!
И мы — чайники — глядя на твои действия — медленно будем все повторять.
Да, я понимаю, что это — детский сад, но — используя этот метод — ты завоюешь признание и уважение другого населения — чайников!!!
Это все буду применять! Даже в некоторых постах это уже все есть!
Ну, а для тех кому непонятно — всегда есть я!
Всегда помогу и в беде не оставлю!
Вернее — использовать в своих обьяснениях — сразу 2 метода:
— Текстовой режим
— И ВИДЕО режим
Ну или аудио! Да, и это будет совершенство блога! Шаг на новую ступень!
Влад, а мне больше видео нравится, где действия голос сопровождает. Так понятней.
Александр верно говорит!Найдутся такие читатели блога, которые постесняются спросить, и уйдут с блога.
Я считаю, что у тебя очень понятно написано, но всё равно старайся всегда преподносить информацию всегда максимально понятно и просто, так как пишешь для новичков.
И тогда большая посещаемость тебе обеспечена, так очень редко кто объясняет понятно сложные технические вещи.
Это все в планах, но пока как-то так! Вот, следующий год наступит и начнем! Мы же с тобой об этом говорили…:)
Тогда — все три варианта вместе.
— Текст можно перевести
— Аудио можно скачать на флешку и слушать: в машине, в дороге, в автобусе…
— При просмотре видео — можно (даже если ни хрена ничего не соображаешь) делать все шаги по твоим методам — и даже особо *блондинка* — сможет сделать то, чего хочет.
Да — идеальная доставка информации!
А почему именно «Скрипт для сайта на WordPress» ?)
В данной статье предоставлена информация об установке скрипта для сайта на платформе WordPress! И я не ручаюсь за его работоспособность на других платформах!
Я это говорю к тому, что в этом скрипте нет какой либо привязки к WordPress.
Спасибо автору! давно хотел поставить себе такие кнопки.
Спасибо большое, очень классные кнопки!
Большое спасибо за информацию, но как и в первых комментариях, я не совсем догоняю, как вставлять, куда. Было бы видео, сразу же приступил. А так, остается кивнуть головой, классно сказал…
Как только разберусь со своим удаленным аккаунтом на Youtube сразу предоставлю вам видеоурок! Ну а так пока могу посоветовать подписаться на обновления моего блога, на всякий случай=)