Привет всем!
Здесь мы поговорим о продолжении такой темы: «Как сделать прокрутку на сайте?«. Кнопка вверх-вниз для сайта будет работать на вашем блоге без всяких плагинов на ура! Мы прибежим к небольшим хитростям и используем простые скрипты для сайта, с такой же понятной структурой и простой установкой!
Ну начнем с того, я не буду вам проповедовать, что здесь нет никакой нагрузки на блог! Нагрузка есть и будет всегда и ее никогда не избежать! Но устанавливая вот такие скрипты, замечу — «простые скрипты» для сайта, вы в принципе ничего не теряете!
В этой статье я представлю классные скрипты, которые подыскал специально для вас! Так что смотрим, читаем, пробуем установить себе, комментируем, нажимаем на лайки, подписываемся на мой блог! Будьте активными!
А теперь немного о тех кошаках со стволом, что вы видите в начале статьи (эх, а так хотелось написать со стволами)!
Хотите верьте, хотите нет, а дело было так:
Просыпаюсь от жуткого стука в двери… Открываю я двери… А там эти: два жутких, наглых, рыжих кота бандитской наружности, да и еще стволом размахивают!
Скажи, да скажи! Я же конечно со встречным вопросом и перепуганными глазами, с дрожью в руках и ногах задаю встречный вопрос:
Я — Что сказать?
Они опять — Скажи, как установить…?
Я — Да что установить?
Они — Как установить стрелки вверх-вниз на блог с помощью скриптов?
И тут как обрезало! Просыпаюсь в холодном поту и быстро начинаю писать вот этот пост!
Вот такой у меня получился забавный двойной сон:)! Заработался я что-то, устал наверное, вот и приходят потом во снах вот такие любопытные блоггеры!
Ладно приступим к нашим скриптам!
|
1
2
3
4
5
6
7
8
9
10
|
<div style=«position:fixed;z-index:1003; right :0.5%; bottom: 45%;»>
<a href=«#top» onclick=«scrollTo(0,0); return false;» title=«Вверх страницы»>
<img src=«/wp-content/uploads/2013/12/JvAPB.png» alt=«Вверх страницы»>
</a>
<br>
<br>
<a href=«#top» onclick=«scrollTo(0, document.body.scrollHeight); return false;» title=«Вниз страницы»>
<img src=«/wp-content/uploads/2013/12/40jks.png» alt=«Вниз страницы»>
</a>
</div>
|
Ну что сказать?
Скрипт небольшой, как и обещал! Присобачить его можно в любое место, где пойдет там и праздник! Но я как уже более продвинутый блоггер советую вставить данный скрипт в подвал вашего блога! Так он не будет выскакивать вперед вместе с вашей шапкой и остальными прибамбасами и тормозить загрузку вашего блога — пускай сидит в подвале!
Заходите в панель управления вашим блогом: Внешний вид — Редактор — Подвал (footer.php). Листаем в самый низ и вставляем данный скрипт, сохраняем, обновляем страницу блога и любуемся результатом!
А сейчас немного о скрипте и работоспособности:
На своем сайте я их проверить не смог, так как у меня там стоит форма обратной связи от Redhelper. И стрелки получается как раз под ней! Но недавно я устанавливал их знакомому блоггеру и все работало на ура!
Вот мне немного тут помогли — стрелки работают:) Стрелки стоять простые, но их в любую минуту можно сменить под свои и все загнать под свой дизайн!
Так же если вы особо шарите в html, можете сменить и положение стрелочек! Хотя, с такими навыками — создайте свой!
Но все же поэкспериментировать с положением можете в этой строчке:
|
1
|
<div style=«position:fixed;z-index:1003; right :0.5%; bottom: 45%;»>
|
Переходы здесь будут не плавными, по сравнению с применением плагинов в первом уроке. Стрелочки всегда на виду и они не маскируются под ваш дизайн! Но не беда, как я уже говорил — можно найти стрелочки под свой дизайн или заказать у меня за хлебные крошки:) И я вам сделаю или найду уникальные стрелочки под ваш блог!
Картинки данных стрелочек хранятся на моем блоге. Если вы хотите перенести их на свой сервер, или загрузить новые, то в последствии вам нужно будет изменить путь к картинке в самом скрипте! Вот в этих двух местах:
-
1<img src=«/wp-content/uploads/2013/12/JvAPB.png» alt=«Вверх страницы»>
-
1<img src=«/wp-content/uploads/2013/12/40jks.png» alt=«Вниз страницы»>
Картинки (стандартные, так сказать) можете скачать, скопировав мой прописанный путь в коде выше и вставив его в новое окно вашего браузера. А далее, делаете клик правой кнопкой мыши — Сохранить картинку как…
Где брать этот путь к картинке, можете в первом уроке посмотреть видеозапись — здесь!
А также при наведении курсора на свои стрелочки вы видите надписи, который тоже можно изменить! Или оставить поле пустым («Вверх страницы», «Вниз страницы»).
Да, не столько скрипта, сколько описания!
Кому интересно, почему я стал в последнее время так редко писать? Тогда слушайте!
Начало…
Началось все с того, что я писал вот эту статейку — Урок 1. Как сделать прокрутку на сайте: вверх, вверх-вниз с помощью специальных плагинов?
И вроде все хорошо, писал полночи, все сделал по высшему разряду! А утром встаю и мне говорят (знакомый блоггер) что статьи нету! Как так нету?
И только к середине дня я заметил, что статьи реально нет! Как так? Вчера обновлял страницу много раз — все было! Меня удивило только одно тогда: когда делился статьей в соц.сети туда шла только одна ссылка (не как всегда: картинка ссылка, описание)!
Вообщем расстроился я сильно (все же как-никак статью пару дней писал)!
И тут я вспомнил про свое дисковое пространство на сервере (был 1гб, оно уже давно было на красной пометке)!
Смотрю, а там уже перебор! Но у меня были мысли на счет того, что если я оплачу хостинг на 2 Гб — все мои утерянные данные вернутся! Хотя этого так и не произошло! Даже сохраненные черновики данной статьи были утеряны!
P.S. Были такие мысли, что это я что-то нахимичил: не сохранил, удалил случайно и т.д.
Вообщем я уже начал сомневаться и только после второго совета обратится в тех.поддержку хостинга, мои сомнения пропали! Написал я им, изложил всю суть и они быстренько все восстановили (хорошо что я за тот день ничего масштабного не делал на сайте)!
Ну как бы на этом еще не все!
Вообщем пока писал эту статью, химичил со скриптами и я был в качестве подопытного! Я всегда так, перед тем как что то дать вам — проверяю на себе!
И вот доработался до того, что сделал такие изменения, что в последствии сайт был полностью неисправным! Пришлось опять писать в поддержку -там восстановили мне файлик. Да вот на счет бэкапа, как то я его не особо делаю сам — стоит плагин, выставлен на автомат (делает 1 раз в неделю), а по мелочам я особо там не брожу!
Кстати всегда храню чистую копию своего используемого шаблона (если что, то обращаюсь к нему)!
И последнее!
Устанавливал вот этот скрипт, о котором дальше пойдет речь, а он все не работал и не работал — не находило путь к файлам которые я закидал на сервер!
Опять написал в тех.поддержку — оказалось что ip адрес сервера сменился еще неделю назад, а я все на старом сижу!
Вывод я сделал такой, что нужно повнимательней читать их письма!
Вообщем все настроил, проблемы вот такие решил (который сам в принципе и создал), теперь речь пойдет дальше о скриптах!
Следующий скрипт наподобие первого, но немного получше и посложнее! Кнопка вверх-вниз с плавным переходом:
Сейчас все будет только по делу!
В итоге, нам нужно будет вставить вот этот скрипт в Подвал (footer.php) перед закрывающим тегом </body>:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<script language=«JavaScript» type=«text/javascript»
src=«/verx.js»>
</script>
<script language=«JavaScript» type=«text/javascript»>
var go_down = jQuery(‘body’);
jQuery(function() {
$(«#Go_Top»).hide().removeAttr(«href»);
if ($(window).scrollTop() >= «250») $(«#Go_Top»).fadeIn(«slow»)
var scrollDiv = $(«#Go_Top»);
$(window).scroll(function() {
if ($(window).scrollTop() <= «250») $(scrollDiv).fadeOut(«slow»)
else $(scrollDiv).fadeIn(«slow»)
});
$(«#Go_Bottom»).hide().removeAttr(«href»);
if ($(window).scrollTop() <= go_down.height()—«999») $(«#Go_Bottom»).fadeIn(«slow»)
var scrollDiv_2 = $(«#Go_Bottom»);
$(window).scroll(function() {
if ($(window).scrollTop() >= go_down.height()—«999») $(scrollDiv_2).fadeOut(«slow»)
else $(scrollDiv_2).fadeIn(«slow»)
});
$(«#Go_Top»).click(function() {
$(«html, body»).animate({scrollTop: 0}, «slow»)
})
$(«#Go_Bottom»).click(function() {
$(«html, body»).animate({scrollTop: go_down.height()}, «slow»)
})
});
</script>
<a style=‘position: fixed; bottom: 60px; right: 15px; cursor:pointer; display:none;’
href=‘#’ id=‘Go_Top’>
<img src=«ваш путь к картинке» alt=«Наверх» title=«Наверх» border=«0»>
</a>
<a style=‘position: fixed; bottom: 30px; right: 15px; cursor:pointer; display:none;’
href=‘#’ id=‘Go_Bottom’>
<img src=«ваш путь к картинке» alt=«Вниз» title=«Вниз» border=«0»>
</a>
|
Но перед установкой скрипта, вместо слов «ваш путь к картинке» — пропишите путь к своим стрелкам! Как это все делается мы разбирали уже!
Стрелки можете использовать свои, или воспользоватся моими:
Скачать
Вместе со стрелками в архиве находится скрипт, без которого стрелочки не получат плавного перехода, или вообще не будут работать!
После скачивания архива, разархивируйте его, данный скрипт закиньте через Ftp клиент в корень сайта — папочка /public_html. А картинки можете загрузить через свою админ. панель вашего сайта — ну чтобы сильно себя не запутывать!
Прописываем путь к стрелкам в нашем коде и вставляем его в подвал! Сохраняем и любуемся их работоспособностью!
Как работают данные стрелочки можете посмотреть у меня на блоге! Я себе установил пока данный скрипт, а плагины пойду удалю и вам советую:)
Как сделать прокрутку на сайте с помощью скриптов? Так, немного разобрались! Идем дальше…
Как добавить кнопку «наверх» как ВКонтакте?
Кнопочка возвращает только плавно наверх! Данный скрипт вставьте в Подвал (footer.php) перед закрывающим тегом </body>:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<script type=«text/javascript»>
jQuery(document).ready(function() {
// Виджет кнопки вверх (Test-Templates)
// Версия 1.0
jQuery(‘body’).append(‘<div class=»button-up» style=»display: none;opacity: 0.7;width: 80px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #d3dbe4;font-weight: bold;»>▲ Вверх</div>’);
jQuery (window).scroll (function () {
if (jQuery (this).scrollTop () > 100) {
jQuery (‘.button-up’).fadeIn();
} else {
jQuery (‘.button-up’).fadeOut();
}
});
jQuery(‘.button-up’).click(function(){
jQuery(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
jQuery(‘.button-up’).hover(function() {
jQuery(this).animate({
‘opacity’:‘1’,
}).css({‘background-color’:‘#e7ebf0’,‘color’:‘#6a86a4’});
}, function(){
jQuery(this).animate({
‘opacity’:‘0.7’
}).css({‘background’:‘none’,‘color’:‘#d3dbe4’});;
});
});
</script>
|
Если вам нужно, чтобы кнопочка была справа: в 5 строке скрипта left замените на right!
Вообщем так, друзья!
Мой знакомый блоггер, а также мое подсознание говорят мне остановится! Да и правда, пора и меру знать:) А то все те конкурсы и различные фишки, о которых я напишу ниже скоро исчезнут!
А теперь немного о том, что творится в сетевом мире!
Новогодние желания на Яндексе!
Яндекс исполняет желания, или что это! Теперь ты лично, можешь написать Деду Морозу письмо, только в роли Деда Мороза выступят ваши знакомые — ну это я так понял! И как утверждает поисковик:
«На чудо надейся, а выбрать исполнителя не забудь«
Вообщем, загадать свое желание можете по этому адресу:
http://wishes.yandex.ua/?ncrnd=9569&from=teaser___snowman3_ru| (скопируйте и вставьте в строку своего браузера).
Спеши загадать, времени осталось не так уж и много!
Внимание! Проходят простые конкурсы с хорошими призами!
Я не буду расписывать, что и как там! А только предоставлю вам ссылочки на них! Переходите, читайте и участвуйте:
- http://idei-biznes.com/maqazin/akademiya-internet-morexodstva.html — (смотрите в конце статьи)
- http://seoren.ru/novogodnij-konkurs/
- http://dalnobojnyj.ru/texpomoshh/konkurs-na-bloge-dalnobojshhikov.html
Новогодние 100$ в подарок от Skype!
Но походу халява закончилась, точно не знаю! Почитайте здесь http://sharos.biz/novogodnie-sto-dollarov-v-podarok-ot-skype.html
Еще меня беспокоит вот такой вопрос!
Установил форму комментирования из ВКонтакте, а где любители соц. сетей? Может убрать ее, или еще просто не настало то время…?
Все таки хорошо же, что на одном блоге собрано сколько информации по одной теме и уходить не хочется, не так ли?
Хочу поблагодарить Лару Мазурову за креативный подход! (Кстати Лара, а это не ты случайно в образе кота — ты же очень сильно хотела увидеть скрипты:)
Как сделать прокрутку на сайте, кнопка вверх-вниз для сайта, простые скрипты для сайта — все эти термины я использовал по полной программе! И думаю, смог вам помочь хоть как-то!
Возможно скриптов мало?
Если у вас есть свои классные скрипты или вопросы созрели, нужна помощь публикуйте все в комментариях! Всем помогу, отвечу, все обсудим!
Нажимайте на лайки, делитесь с друзьями, подписывайтесь на мой блог — да будет вам счастье!
P.S. Есть классная игрушка, из-за которой на одном сайте я просиживаю целых 5 лишних минут (игра установлена у меня немного ниже)!
На этом все, всем пока!
С уважением, автор блога ИНТЕРЕСНО О ПОЛЕЗНОМ
Привет Влад!
Классная у тебя статья, а знаешь почему твой блог с каждым днем будет наберать обороты, становиться все популярным и читаемым?
Потому что ты мудрый, умный (Гениц и одновременно — Вундеркинд(
Древние мудрецы о человеке говорят , что
— Человек похож на книгу: есть люди, у которых *обложка* (внешний вид) — просто великолепно, а содержимое книги — полоное дерьмо
Вот ты Влад к такой книге не относишься:
— Твой внешний вид и содержимое это — для твоих читателей — хранилище бесплатной информации
— Ты, словно горящий маяк в ночи и все блогеры собераются и будут собераться у тебя, как у камина в стужу, чтобы не только найти и скачать нужную им информацию , но и просто пообщятся с тобой.
Именно таких Гениев как ты я и разыскиваю по всему интернете.
Тебя ждет великое будующее!!! *CRAZY*
Мой блог сделан на бесплатном курсе Александра Бобрина
http://asbseo.ru/sozdanie-bloga/kak-sozdat-blog-besplatnyj-videokurs-sozdanie-bloga-wordpress.htmlДа нет все намного проще!
Я — начинающий блоггер, который хочет сделать нормальный сайт для людей! Но пока не очень получается испытывать удачу во всех моментах этого пути! Но надежда есть, а это главное!
Спасибо за такой обширный комментарий!
На счет блога понятно, админ-панель такая — скорее всего это такой шаблон! Так как я себе менял шаблон: редактор и все остальное тоже немного сменилось!
Привет, Влад! Надо же -столько приключений на одну статью! И эмоций, конечно тоже!
Очень переживала, когда у тебя исчезла статья! Но, что ни делается — всё к лучшему! Ещё очередной опыт в твою копилку жизни блоггера.
Честно признаться,для меня скрипты всегда были как инопланетяне, с которыми я не совсем хотела вступать в контакт, но благодаря общению с тобой, читая твои посты, понимаю, что это не так сложно, как кажется.
Постепенно, и я в этом стану своего рода Гуру!( Хотелось бы!!!)
Кстати, получила много позитива от этой статьи.
Не буду опять хвалить( тебе же не очень нравиться! =) ), но честно, очень понравилось читать и посмеялась от души над картинкой и твоим сном! Очень удачная картинка. И спасибо, что упомянул меня. Хоть в образе Котяры с пистолетом, но всё равно приятно. Вот я и такой могу быть
Как всегда, у меня нет слов — спасибо! Вот таких сто читателей-друзей как ты и будет уже небольшое счастье:)
Понравилась флеш игра))) с раза 5 загнал этого кота) кстати статья полезная, дня два назад пригодилась бы. Но все ровно супер, все ясно и понятно описано
Да классная, я теперь только там и сижу! Нельзя же просто так взять и не загонять кота:)! Планирую еще одну статью на эту тему — там тоже классный скрипт будет, необычный!
Спасибо за отличный скрипт! Давно подобное искал, в настоящий момент у меня стоит плагин для осуществления подобной мелочи, ну и соответственно хоть немного но тормозит блог.
Как появится свободное время, обязательно поменяю его на твой скрипт! =)
*OK*
Влад, большое спасибо за урок. Воспользовалась первым скриптом, стрелочки заработали!;)
Очень рад, что смог хоть чем-то помочь=)
Дякую велике, класні уроки
Не за что!
Единственный вариант устанавливать скрипт — максимально поднять скорость загрузки сайта не используя плагины, хотя в данном случае есть готовые плагины — в два клика получаем красивое оформление. За статью спасибо.
Добрый день! Не подскажите точный путь к файлу, куда нужно записать Код от второго варианта стрелки. Пробовал в разные файлы записать — стрелка не появляется. Спасибо.
Подскажите еще, может что-то еще нужно прописать, кроме этого кода на сайте ?
Здравствуйте. Оправьте свой шаблон мне на почту lemishko.vlad@mail.ru, попробую помочь)