Как сделать форму подписки в теле статьи

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

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

Для того, что бы установить код формы в статью, необходимо после его создания зайти в редактор шаблона в файл single.php, и установить его в нужное место. Вы это сможете сделать, если владеете некоторыми знаниями.

Код формы мы берем на ресурсе во вкладке - Публикуй. В разделе Подписка по электронной почте, заходим в Менеджер Подписки, переводим язык на русский и получаем код формы.

код формы подписки

Именно его мы можем вставить в файл. Но только выглядеть эта форма будет не очень привлекательно. Как ее сделать более интересной мы рассмотрим ниже.

Вариант, который я выше описала доступен продвинутым пользователям. А что делать тем, кто боится лишний раз зайти в опции Редактора? Или уже имел горький опыт перекоса сайта, или его потери, при не корректной установке кода. Для этих пользователей я предлагаю установку плагина, который поможет вставить код в любую область страницы и даже сайтбара.

Итак, плагин называется Quick Adsense. Просто вводите название плагина в строку поиска плагинов своего блога. Он появится в выдаче первым. Устанавливаете его и активируете обычным способом. Ссылка на него появится в разделе Настройки консоли блога. Заходим в настройки и плагина и ничего не меняем.

Для того, что бы установить форму подписки в конце статьи - надо вставить код в первое поле раздела Adsense Codes

плагин

Таким образом мы вставим самую простую форму от ресурса.

Как сделать красивую форму подписки

А теперь давайте попробуем ее украсить. Для этого нам необходимо взять точную ссылку нашей ленты. Заходим в Мои фиды, заходим в свою ленту и в верхней части страницы находим ссылку -   Edit Feed Details… И в поле - Адрес фида, копируем "кончик" его

код формы

 

Сохраняем его в блокноте.

Теперь я предлагаю код формы, такой как установлена в конце этой статьи.

А сейчас будьте внимательны! В строке 5 надо "хвостик" моей ленты заменить на "хвостик" Вашей ленты. Фразу, (irismirnoff/kHpF) которую нужно заменить - я выделила красным цветом.

open('http://feedburner.google.com/fb/a/mailverify?uri=irismirnoff/kHpF&;#39;, 

Тоже самое надо сделать в 9 строке

name="uri" value="irismirnoff/kHpF" />

И только после этого, готовый код вставляйте в первое поле плагина. Не забудьте сохранить изменения и зайти на страницу и посмотреть результат.

Как видите не слишком привлекательно. Что бы сделать форму красивой, надо применить css стиль. Для установленной моей формы я сделала следующий код.

Фон формы Вы сможете заменить сами. Просто определите код цвета и установите его вместо моего - #E5CEB1. Он отображен во второй строке. Но что бы цвет действительно поменялся - пройдитесь по коду и замените его везде, где встретите.

Вставляем мы его в файл CSS стили, редактора шаблона, в самый конец файла. Будьте внимательны! Аккуратно, отступите от последней строки файла и вставляйте. Обновите файл. И зайдите на страничку. Обновите ее и любуйтесь полученным результатом.

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

Теперь осталось только проверить работу формы. Обязательно это сделайте. Надо убедиться, что все в порядке.

Удачной работы!

Related Posts Plugin for WordPress, Blogger...

About Смирнова Ирина

Очень рада приветствовать Вас на своем сайте! Моя задача - помочь начинающим интернет-предпринимателям пройти путь к поставленной цели без потерь. Смело перенимайте мой опыт! УДАЧИ!
Продвижение блога, , Permalink

7 комментариев к Как сделать форму подписки в теле статьи

  1. Спасибо Вам, Ирина, за полезную и понятную информацию! Прошла по шагам и все отлично получилось! Хотя на первый взгляд все показалось таким сложным!

  2. Витос says:

    Приветствую, Вас! Статья для меня полезная и актуальная. Недавно настраивал форму подписки от фидбернер и установив форму она в коде прописалась, а по факту не работает я ее тестировал. Больших знаний в HTML у меня нет, боюсь вообще делов натворить… Попробую Вашим методом. Спасибо.

  3. Надо пробовать… И не сдаваться

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

  5. Муза says:

    Ирина ! Так подробно описаны все действия.Попробую секлать.

  6. Да, Елена, именно так. Давайте встретимся и попробуем все исправить

  7. Здравствуйте, Ирина! Для меня задание оказалось нелёгким. Все, что я вставляла сразу не появлялось на блоге, наверное держит кеш. Но когда появились кнопки и форма подписки почему-то получилась абракадабра. Кнопки встали не в одну строку, а одна под другой и не по центру, хотя тег я применяла. Кнопка Fesebook так и не появилась. Форма подписки пока встала без цвета и в одних статьях в конце, в других вначале, а в некоторых вообще её нет. Ещё вопрос: я сомневаюсь, что правильно установила фон формы. Вы пишите в редакторе в файл CSS стили, в таблицу стилей?

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