Приветствую друзья!
В этой статье мы поговорим о том как сделать прокрутку на сайте: вверх, вверх-вниз с помощью специальных плагинов! А именно, поговорим об установке и настройке таких плагинов как: ToTop Link, Scroll Top and Bottom, Ax ScrollTo Top.
Во-первых- скажу я вам, что это будет первый урок! А второй урок будет посвящен скриптам!
Но так как установка плагинов не требует особых знаний, рассказать о них я решил в первой статье! Ну что приступим?
Для чего нужна так званая прокрутка на сайте?
Данная фишка предоставлена для удобства и быстрой навигации по сайту! Нажали на кнопочку вверх и вы мгновенно перемещаетесь на верх, аналогично при нажатии вниз. Перемещения могут быть плавными или без этой функции! Но с плавным перемещением — это выглядит более красиво.
Согласитесь, удобство — это же хорошо! Лично мне надоедает: когда заходишь на сайт и чтобы добраться до подвала сайта, тебе нужно крутить колесико мыши около минуты, а потом назад!
А сейчас мы рассмотрим функции и настройку каждого их плагинов более подробно!
P.S. Все представленные плагины можно установить из вашей админ панели, в разделе Плагины — Добавить новый!
Плагин ToTop Link
Интересный плагин с простыми настройками! Данный плагин и я использую в своем блоггерском наборе! С помощью этого плагина можно установить на свой блог кнопку вверх с плавным перемещением! А также есть возможность установки своей кнопочки, которую вы можете найти в интернете или изготовить сами! Вообщем смотрим:
Опять хочу извинится, друзья!
Вообщем дело было так:
Так как этот плагин у меня уже стоял, я его удалил и во время снятия скринкаста снова установил — все настройки были уже те что я ставил! Поэтому, я как-то забыл про вас и сделал быструю установку новой своей стрелки, не стандартной!
Но сейчас я попробую немного все объяснить!
И так немного о настройке плагина ToTop Link!
И так смотрим друзья!
- Включение/выключение плагина.
- Пункт второй — это расположение вашей стрелочки. Вариантом много, посмотрите там сами! А также можно указать размещения в циферках!
- Здесь нам предлагают 3 стандартные стрелочки на выбор: светлая, темная и просто надпись без всяких стрелочек! Но если вы хотите сделать также как показано на видео — вставить свою стрелочку, то выбираем четвертый вариант, а именно «Custom Image«! А дальше следуем инструкции на видео! Почему своя стрелочка лучше? Во-первых — это красивее! Во-вторых, быть уникальным — это залог успеха!
- Этот параметр дает обозначения, когда появится стрелке при прокрутке страницы вниз!
- Скорость перехода! 4 и 5 пункт я не трогал, а зачем? Меня и так все устраивает, надеюсь вас тоже!
- Сюда нужно вставить адрес вашей стрелочки! Желательно, чтобы картинка хранилась на вашем сайте! Что и как я на видео показал!
- Прописать текст, который будет появляться при наведении мышки на вашу стрелочку! Плюс можно прописать варианты цвета текста, при наведении курсора и без наведение! Ну если будет стоять картинка, то только при наведении! А если вы поставите , обычная надпись, то тут можно использовать два варианта.
Цвета нужно прописывать в таком варианте #000000! Подобрать цвета вам поможет вот эта программка — СolorMania или можете подобрать онлайн http://getcolor.ru/.
Вообщем все понятно, да?
Ставим Custom Image, а дальше смотрим видео!
А еще чуть не забыл:) Плагин обладает классной способностью, он маскирует вашу стрелочку под дизайн блога и только при наведении она проявляет свой реальный цвет! Возможно на видео это можно увидеть, но не факт;)
А также вы можете применить абсолютно любую картинку — главное чтобы красиво было и оригинально, а также никому не мешало! Пускай это будет хоть пчелка, хоть ракета и множество других увлекательных вещей! Фантазию еще никто не отменял! Так как, выше я указывал что буду описывать как плагин совершает переходы — так вот, переход здесь плавный!
Что-то наш обзор плагина затянулся! Пора бы приступить к следующему!
Scroll Top and Bottom
Ну что сказать? Хотите правду и мое мнение? Я думаю, что да, поэтому слушайте!
Большим плюсом плагина является прокрутка сайта и вверх и вниз — это очень хорошо и удобно! А также настройки плагины, да их даже нет!
Минус плагина — нельзя применить свою стрелочку и мне это не нравится! Потому что хочется как-то выделятся, да эти однотипные стрелочки не всем подойдут, в смысли под дизайн! И здесь нет различных наворотов как у предыдущего представителя! Стрелочки стоят автоматом с правой стороны. Смотрим:
Переходы здесь тоже плавные, но немного шустрей чем у ToTop Link (но может я ошибаюсь — заработался)! И стрелочка здесь видна всегда, а при прокрутке колесиком мыши она маскируется под ваш шаблон!
Этот плагин так прост, что я даже не наважился писать еще один скринкаст! Но если вам будет сложно, то посмотрите запись выше↑. Ну или в конце-концов пишите мне, что я не помогу!
После установки заходим в настройки, выбираем нужный вариант стрелочек, сохраняем и весь компот!
Если кнопочки не появились, то попробуйте отключить в настройках JQuery, поставив точечку на JQuery Disabled. Это так называемый Java скрипт!
Ну или почистить кэш браузера и снова обновить станицу своего сайта!
На этом обзор данного плагина закончен, приступаем к следующему!
Ax ScrollTo Top
Тоже неплохой плагин со стандартным набором кнопочек и небольшими настройками!
Можно выбрать из представленного списка или создать самому! Создать самому, нет это вы не от том подумали — вы не сможете вставить свою красивую картинку! Это будет типичный квадрат или прямоугольник, один из таких который есть в уже представленном списке!
И так, вводим настройки своей кнопочки:
- Ширина
- Высота
- Цвет фона кнопочки
- Цвет текста
- Размер шрифта
- Padding или в переводе Набивка. Если данное поле не заполнить, то размер иконки не изменится (будет стандартный как те, что выше), даже при смене ширины и высоты! Честно говоря, я не понял что туда ставить — я пробовал ставить и цифры и цвета, работоспособность одинакова и тогда иконка начинает меняться по заданным параметрам (высоте и ширине).
Можно создать свою иконку — изменить цвет, размер, но надпись и расположение останется стандартным! Стандартные иконки изменять нельзя! Также, как и у первого плагина, прокрутка только вверх и стрелочка появляется после небольшой прокрутки вниз! Присутствует небольшая маскировка под шаблон, переход плавный!
На этом вроде как и все! Я подобрал самые используемые и популярные плагины и сделал о них вот такой обзор!
Если у вас такая же беда, не переживайте! Плагинам можно найти замену, установив простой скрипт, что я и сделал в данной ситуации!
Именно следующий урок будет посвящен скриптам: я найду самые простые и функциональные скрипты, где можно производить замены кнопочек без всяких проблем, с плавным переходом и без него, и с остальными различными функциями!
Отныне вопрос «как сделать прокрутку на сайте?» не будет мучить вас по ночам! Я часто вижу, что у многих блоггеров нет этой фишки и я считаю это неправильным действием к соотношению своих читателей!
А может они просто не знают как произвести данную установку? Так вот я и мой блог предлагаем свое небольшое руководство по данному запросу!
Друзья, а также специально для вас, я сделаю установку кнопки на вашем блоге абсолютно бесплатно! Могу специально по заказу сделать оригинальную дизайнерскую кнопочку, только именно под ваш блог! Аналогов нет в сети!
Ну как бесплатно, вы читаете мой блог, делаете подписку на обновления, а я вам вот такую классную услугу! А также я и мой блог не откажемся от небольших «хлебных крошек» (небольшой финансовой благодарности)!
Друзья! Подписываясь на мой блог, вы не делаете мне услуги! И когда вы совершаете данное действие только ради выгоды — это не правильно! Когда вы делаете подписку от чистого сердца, то это не просто «подписка» — это контракт на всю жизнь!
Ведь даже когда мой блог станет 1000-ом, я не собираюсь отворачиваться от вас и у меня всегда найдется время помочь каждому из вас! Но а там посмотрим:)
Если у вас есть еще какие-то интересные плагины на примете, или вопросы, то оставляйте все в комментариях!
На сегодня все, в следующем посте разбираем скрипты! Всем пока!
С уважением, автор блога ИНТЕРЕСНО О ПОЛЕЗНОМ
А я хочу сделать прокрутку вверх как вк без плагина =)
Кстати у меня скоро будет новый дизайн, в новой статье написал об этом
Ок! Потом зайду посмотреть к тебе на блог!
Нужно будет в статью добавить, ну на счет вк! Так что заходи, от сюда установишь
Ну привет! Всё-таки затащил ты меня к себе)))) Вот как оказывается трафик наращивается))) Ты Влад рекламу так и не убрал…
Знаешь почему блоги нашей тематики сегодня очень трудно раскрутить? Потому что их сейчас очень много стало и каждый пишет тоже самое… Вот мне нравиться Сергей Самойлов. Он уже свой второй блог раскрутил, а первый продал неплохо. А весь секрет в том, что он даёт именно уникальный контент, который сегодня тем более будет восстребован. Первый сво
Привет! Ура, сам Fomik на моем блоге! Трафик, да нет, не смеши — тоже временный! И то с поисковых систем только в последнее время начал появляться!
Вот когда оптимизирую свой старый контент — тогда думаю и дело пойдет!
Рекламу убирал, потом опять поставил — да что-то затянулся мой эксперимент, ну или очередная погоня за деньгами!
А ссылочку предоставишь на его блог?
Ок, обязательно загляну
Хотя, тематика моего блога — не такая уж и специализированная на одной тематике! А рубрика «Это интересно!» позволяет мне писать на различные темы! Вот только времени не хватает, чтобы вот так все сразу взять и написать! А так постепенно, блог наполнится и станет полезной инструкцией, энциклопедией как для новичков так и для профессионалов!
Как говорил один блоггер: «Можно даже про денвер написать так, что к тебе потянутся люди!»
Влад! Наконец, вижу статью, что меня безусловно радует!
Первое, это то, что мне очень приятно находится на твоём блоге и читать новые твои практические советы, написанные на человеко понятном языке, что я очень ценю.
Второе — всегда с удовольствием жду твоих обработанных картинок, в начале поста, и как всегда, они у тебя прикольные и продуманные. Чувствуется творческий подход!
Сочетание творческого подхода к техническому описанию каких то сложных для новичков уроков — это просто замечательное качество, которое начинает в тебе проявляться в последнее время всё в большей и большей степени, что радует наверное не только меня, а всех твоих читателей.
И это не просто слова, я думаю, так скажут многие. Но, самое главное, когда ты будешь читать этот комментарий, ты должен понять главные ключевые моменты: Это не просто очередная похвала тебе за хорошо написанный пост, это тебе очередной стимул для активного роста только вперёд.
Желаю удачи! Поставлю себе наверное кнопку «наверх», «вниз», но подожду следующий пост, может другой вариант мне будет более приемлем!
Вообще, лично я не люблю блоги, где есть много комментариев и не таких кнопок! Не то, что мне лень прокручивать мышкой, но…. как то напрягает =)
Были небольшие неполадки, в новой статье немного расскажу о них!
Ну и как всегда спасибо! Читать твои комментарии одно удовольствие! Если брать пару твоих комментариев, то их можно публиковать как статью!
Хотя для меня такой оценки, похвалы в таком масштабе будет многовато *STOP*
На счет кнопочек — меня тоже такое немного напрягает!
Люди установите кнопочки! *JOKINGLY*
У Бобрина такая кнопка, как ВК, мне тоже нравится!
Влад, перехвалить тебя не хочу, но считаю, что пишу всё искренне и от души. А ты работай и работай и работай. Я думаю, что умеренная похвала в жизни не помешает.
Скорее всего да:)
Довольно заманчиво, попробую сделать
Удачи, если что обращайтесь! Скоро выйдет пост о скриптах — скрипты это меньшая нагрузка на блог! Так что заходите еще!
непременно еще зайду, буду частый посетитель!
Это хорошо! Всегда рад видеть новые лица на блоге!
Довольно интересный блог, можно что полезное найти на нем. С удовольствием жду и на моем блоге да и кстати принимаем участие в конкурсе)
Бл…ть!!! Писал, писал сообщение, нажал нечаянно на эскейп и меня выбросило, а столько написал интересного… Всё, потом как-нибудь допишу…
Ничего, бывает! Напишешь как будет время!
Я и этот коммент решил опубликовать, но с небольшим изменением;)
Очень сочувствую Алексу! У меня раньше так было: пишу, пишу комментарий(а я ведь иногда люблю длинные развёрнутые комментарии), потом ввожу капчу и всё, комментария нет, так как неправильно ввела(хотя вводила всё правильно) или вообще что- нибудь шло не так.
Я раздражалась не реально, прям кипела.
Потом придумала для себя- напишу комментарий, скопирую и уже отправляю — если что не так, снова вставила и всё.
Но капчи стараюсь обходить стороной, и когда случайно так комментарий слетает, ну допустим, как у Алекса — это ужас, как не приятно.
А мысли же уже убежали в лес…
А у меня бывает так: написал, отправляешь, а там ошибка какае-то, или закрыл случайно — так я потом стрелочкой назад возвращаюсь и комментарий на месте!
Меня раздражает: когда думаешь, что пишешь на русском, а на самом деле смотришь в конце (когда уже написана целая поэма)-стоит то английский!
Нет какой-то программки которая будет пищать:)?
Влад, не всегда срабатывает, когда стрелочка назад и комментарий на месте. Иногда он волшебным образом исчезает.
А я так часто в Контакте пишу на русском, а буквы(клавиатура)англ. И ещё отправляю при этом, потом смотрю и ужасаюсь!!!
Это всё от торопливости, хочется обхватить всё сразу, всё успеть… и получается смешно.
Да, не всегда! Что-то я заработался: я думал это комментарий к новой статье, или у меня уже стрелка на блоге глючит — начал искать и пробовать
Пойду спать