Плавающий виджет без плагина JAVASCRIPT и с плагином Q2W3 Fixed

Приветствую Вас на блоге!

Сегодня будет статья про то, как я поставил себе плавающий виджет в сайдбаре для того, чтобы больше людей подписывалось на обновление моего блога. В статье покажу и расскажу Вам, как установить такой виджет у себя на блоге.

Кроме формы подписки можно поставить рубрики записей, поставить скрипт самых популярных статей своего ресурса, последние или ТОП комментаторов, свою какую-то рекламу, да и вообще все, что угодно.

Расскажу о двух способах: первый с плагином, а второй без, с помощью кода. Если один не понравиться, то можно выбрать другой. У виджета, который плывет за Вашим посетителем, пока он читает, много преимуществ!

ЗАЧЕМ НУЖЕН ПЛАВАЮЩИЙ ВИДЖЕТ

Когда я вижу, что за мной движется, что-то полезное и красивое, то обязательно нажимаю по нему. Думаю, что эта штука работает не только на мне. Кстати с помощью этого виджета, я увеличил число подписчиков на блог в 3 раза. Узнайте, как этого можно добиться в этой статье.

У кого есть счетчик «Яндекс метрика»? Раньше он у меня стоял, в веб-визоре наблюдал за поведением моих читателей. Блоки, которые расположены в сайдбаре, посетители вообще почти не замечали. Если часть сайдбара будет плыть за пользователем, пока он будет читать, то он по любому обратит на него внимание, кликнет или подпишется. Подписывайтесь на мои обновления.

Только тут нельзя переусердствовать, так как такие штуки могут многих раздражать. Если делаете, то делайте уже красиво, а не как не будь, старайтесь. Ведь блог, это Ваше лицо и по нему посетители будут судить о Вас. Если не умеете сами делать какие-то эффекты, рисунки, баннеры и т.д., то отдайте это дело фрилансеру. Пускай сделает цацу из задуманного Вами! Ну да ладно, думаю, хватит мне тут улюлюкать, давайте перейдем к делу. Сначала расскажу о:

  1. Специальном плагине + настройках
  2. Специальном скрипте +  настройках

ПЛАВАЮЩИЙ БЛОК С ПЛАГИНОМ Q2W3 FIXED WIDGET

Для начала его нужно скачать. Даю [urlspan]ссылку на скачку[/urlspan] с официального сайта этого плагина. После чего нужно его установить и активировать на блоге. Ну, тут думаю, Вы и без меня справитесь, но на всякий случай покажу видео:

После того, как активировали, заходите в админ панель своего блога по адресу/wp-admim и заходите на вкладку «Внешний вид». Видите там, появилось «Фикс виджеты»? Вот это и есть настройки плагина. Мы с Вами разберем их по частям, то есть узнаем, что к чему.

Плавающий виджет в сайдбаре

  • Первоначально идет верхний отступ. Здесь необходимо указать, сколько нужно отступить от верхней части страницы. Там все измеряется в пикселях, чтобы при прокрутке движущаяся панелька не врубилась в header, то есть шапку блога. Измерять Вам придется самим. Могу сказать только примерно, ставьте от 10 до 20 px.
  • Вторая строка – нижний отступ. Тут все то же самое, только нужно ставить отступ от низа, то есть размер в пикселах от подвала (footer). Если верхний отступ уже настроен, то ставьте 0 и идем дальше.
  • Походу третья строка – нужно указать ширину браузера. Этот функционал нужно настроить для людей, которые заходят в интернет с мобильных телефонов. В наше время это очень важно, так как через телефон заходит очень много людей на блоги и сайты! Ставьте 800.
  • Поставьте галочку против следующей строки – исправлять id виджетов. Эта функция нужна для кривых шаблонов.
  • Следующая строка не так важна, но если Q2W3 Fixed Widget конфликтует с библиотекой Query или плагин вообще идет в отказ от работы, то поставьте галочку напротив «Вкл. jQuery (window).load ()».

Последний шаг в настройке. Зайдите на вкладку виджеты, перенесите нужный, вставьте в него подготовленный код. Внизу поставьте галочку «Зафиксировать». Вот и все готово! Плагин теперь будет работать как часы. Если уже решили, какой плавающий блок ставить, то рекомендую размещать его ниже всех остальных, чтобы он не закрывал собой другие. Перейдем к джава скрипту? Тогда поехали.

ПЛАВАЮЩИЙ БЛОК НА JAVASCRIPT

Этот способ избавит Вас от плагина, который может замедлять загрузку страницы или записей блога. Дальше мы будем использовать соединение через FTP. Кто не знает, как пользоваться FTP или просто не любит им пользоваться, может зайти на вкладку админ панели блога «Внешний вид/редактор» и там найти файл footer.php вместе с sidebar.php. Эти два файла нам понадобятся! Ну а для FTP соединения: заходите в корень движка WordPress, двигайтесь по такому адресу:

wp-admin/themes/название темы

Найдите файл footer.php. Перед закрывающим тегом </body> вставьте script, который нужно скачать здесь. После того, как вставите, не забудьте сохранить изменения. Почти все! Нам нужен файл sidebar.php. Открывайте его и там где хотите видеть свой плавающий виджет, вставьте следующий код:

<div id="fixblock">Код</div>

Тут необходимо заменить надпись «Код» на то, что хотите, например, подписку на обновления или свою рекламу. Сохраняйте изменения и все будет работать.

Пару слов напоследок. В статье, я не раз повторял «Ставьте свою рекламу». Если зарабатываете в интернете, размещая рекламу от Google на своем веб-ресурсе, то не советую ее ставить в этот плавающий блок. Потому что это противоречит правилам Google. Могут забанить и деньги не выплатить, оно Вам надо?

На этом буду заканчивать. Надеюсь, эта статья помогла разобраться каждому в установке и настройке! Надеюсь, что плавающий виджет теперь будет стоять и работать. Подписывайтесь на [urlspan]обновления этого блога[/urlspan], чтобы ничего не пропускать. Не прощаемся!

С уважением, Алексей Кобзарев



Интересный и полезный контент

26 thoughts on “Плавающий виджет без плагина JAVASCRIPT и с плагином Q2W3 Fixed

  1. Таисия Егорова

    Абсолютно согласна, когда что то красивое то хочется нажать, у вас сейчас здорово сделано!

    1. Алексей Кобзарев Автор записи

      Спасибо. Думаю, чтобы еще сделать для красоты и удобства.

  2. Софья

    Алексей, очень интересная и нужная статья. Я бы выбрала вариант, когда скачиваю код, затем его вставляю в файл footer.php, перед тегом , но не поняла в каком месте вставляется красивая картинка для виджета сайдбара, на которой будет располагаться надпись о подписке на обновления блога.

    1. Алексей Кобзарев Автор записи

      Код виджета нужно вставить в sidebar.php, там где будет располагаться красивая картинка. Если вы используете файлы шаблона, то код разместите в самом низу, после последнего блока сайдбара. Вот, например, у меня последний блок — мой канал на YouTube, после него сразу ставлю

      «Код»

      .

      1. Софья

        Алексей, получается, что словом «код», ты вначале назвал то, что нужно -скачать здесь- , а потом, то, что нужно написать на плавающем виджете, может их как-то различить, вначале код, потом код1. Хотя мне стало понятнее. Попробую сделать.

        1. Алексей Кобзарев Автор записи

          Чтобы не было путаницы, я заменил первое слово код на script. Спасибо за подсказку!

        2. Софья

          Алексей, к сожалению со скриптом не получилось. У меня подписка стоит в сайдбаре -нажимаешь на картинку и происходит переход. Для этой подписки я вставляла текст кодах в html на странице Виджеты, а не в файле sidebar.php . Видимо придется плагином воспользоваться. Но там не понятно как расстояние до шапки измерять, ведь этот плавающий виджет будет последним в колонке, а между ним и шапкой другие виджеты находятся.

        3. Алексей Кобзарев Автор записи

          Там главное поставить его в самый низ и зафиксировать. Все остальные настройки для общего развития. Ставьте отступы, как я порекомендовал в статье, то есть от 10 до 20.

  3. Виталий

    У видео слишком большая пауза между Я покажу вам…. как установить плагин для плавающего виджета. А так очень познавательно получилось. 🙂

    1. Алексей Кобзарев Автор записи

      После записи не проверил, быстро выложил. Но ведь главное, что там все понятно, верно?

  4. Bikersky

    Классно сделал! Уж на девушку должны клюнуть! Надо будет и себе что-нибудь прикрутить на блог, подумаю. Познавательная статья 😉

  5. Надежда Давыдова

    Отлично, наконец-то ты написал этот пост! Я тоже собираюсь заняться такими экспериментами. На днях хотела поставить рекламу Ноликс: сделала все по инструкции, но код почему-то слетел, появились ошибки в валидаторе. Пришлось удалять. Получается, в хедер мне лезть нельзя… Вот бы кто-нибудь написал толковую статью, как вставить эту рекламу в нужное место. Интересно, можно ли ее засунуть в такое плавающее окно?

    1. Алексей Кобзарев Автор записи

      Ноликс — это вроде бегущая строка? Если да, то ее нужно вставить в виджет. Если хочешь, то скинь мне на почту код ноликса. Попробую вставить рекламу у себя на тестовом блоге. Короче могу попробовать помочь.

  6. Надежда Давыдова

    Ноликс ставят обычно над шапкой блога, тоненькая строчка с текстом. Спасибки за отклик, напишу на почту 🙂

  7. Игорь Черноморец

    Я очень часто захожу на блоги через смартфон и у меня уже установлен такой плавающий виджет. Но через смартфон он не плывет. Кстати твой виджет также не плывет через смартфон(остается на верху). Ты никогда не проверял это дело у себя? Может есть идея как исправить?

    1. Алексей Кобзарев Автор записи

      У меня виджет на обычном HTML, может поэтому и не работает. Проверял на планшете, там он не плавает, а резко передвигается. Решение по улучшению по любому есть.

      В этой статье, я описывал плагин. С его помощью плавающий блок, будет работать на всех устройствах (если правильно настроить). Код тоже хороший. Кстати думаю о том, чтобы свой HTML, заменить на этот скрипт.

  8. Игорь Черноморец

    Ты говоришь, что если правильно настроить плагин, то будет работать на всех устройствах, а как правильно настроить? Третий пункт отвечает за видимость в мобильных устройствах, так там я пытался менять на разные критерии, ну и соответственно ставил 800 миллисекунд по твоему совету, НЕ РАБОТАЕТ!

    1. Алексей Кобзарев Автор записи

      Странно, мне знакомый показывал, что все работает именно по таким настройкам, вот и написал их.

      1. Игорь Черноморец

        Неужели зависит от модели смартфона? Ты меня заинтриговал!!! Завтра проверю на всех существующих смартфонах и отпишусь! Ну очень интересно стало ❓

        1. Алексей Кобзарев Автор записи

          Давай, мне тоже очень интересно стало.

        2. Игорь Черноморец

          Алексей, пока что проверил на трёх смартфонах и на одном планшете. Три смартфона, все работают на платформах андроид (galaxy s, galaxy s3, sony ericsson) Как ни странно, но на двух galaxy виджет не плывёт совсем, а на sony глючит, то прыгает, то пропадает, то плывёт, то… 😮
          На планшете от ipad 2 виджет резко передвигается, как ты сказал, но в общем работает! Завтра проверю на iphone и на LG!

        3. Алексей Кобзарев Автор записи

          Походу надо к фрилансерам обращаться. Они в миг починят эту проблему.

  9. Сергей

    Совсем не давно подключил такой виджет, мне он очень нравиться для блогов это самое то, поскольку по рекламе в этом виджеты кликают чаще всего, потому что он всегда на глазах….

  10. Лидия

    Спасибо, попробую сделать, заодно и банеры научусь делать, сам все равно сделаешь лучше, чем фрилансер. 💡

    1. Алексей Кобзарев Автор записи

      Ну да, ведь фрилансер не чувствует твое желание, а сам можешь сделать от души.

  11. Алексей Кобзарев Автор записи

    Я не знаю какая у Вас тема, а вот этот вопрос забейте в интернете. Хотя такое должно быть у меня на блоге — поищите.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *