Home / Блоговедение / Как сделать красивую форму подписки Feedburner под каждой статьей?

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

Здравствуйте, дорогие читатели! Мне уже несколько раз задавали вопрос как сделать форму подписки под каждой статьей. И вот я решил написать об этом пост. Я уже писал, как сделать красивую форму подписки, сегодня будет продолжение этой темы. Кстати благодаря этому посту, нашел в прошлой статье кое-какие ошибки, на днях исправлю.

форма под статьей

Собственно, если вы имеете познания в HTML и CSS то сделать форму подписки под каждой статьей для вас не составит труда. Если же все сложно, то читайте статью дальше и применяйте все на практике.
Для начала сделайте резервную копию блога, чтобы в случае чего могли восстановить работу блога.

В первую очередь нужно скопировать код формы подписки Feedburner. В стандартном варианте он выглядит примерно так:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=nazyrov/yioQ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="nazyrov/yioQ" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" />
<p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>
</form>

Далее выполняйте все действия по шагам:

Шаг 1. Удаляем ссылку на сервис Feedburner. Нужно полностью удалить вот этот кусок кода в самом конце:

<p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>

Шаг 2. Меняем на русский язык надписи. Вместо надписи Subscribe нужно прописать – Подписаться, а вместо Enter your email address- Введите ваш e-mail.

Шаг 3. Всю форму подписки берем в блок div и приписываем CSS класс podpiska. На примере цветом выделен вставленный блок и приписанный класс:

<div class="podpiska">
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=nazyrov/yioQ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Введите ваш e-mail:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="nazyrov/yioQ" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Подписаться" />
</form>
</div>

Шаг 4. Удаляем стандартный встроенный стиль в начале статьи

<form style=”border:1px solid #ccc;padding:3px;text-align:center;”

и вместо него приписываем свой

<form class=”feedburner-form”

Должно получиться примерно вот так:

<div class="podpiska">
<form class="feedburner-form" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=nazyrov/yioQ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Введите ваш e-mail:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="nazyrov/yioQ" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Подписаться" />
</form>
</div>

Шаг 5. Изменяем значение width:140px на width:200px (это ширина поля ввода почты и кнопка) и приписываем свой стиль кнопке перед надписью value=”Подписаться” как на примере:

<div class="podpiska">
<form class="feedburner-form" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=nazyrov/yioQ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Введите ваш e-mail:</p>
<p><input type="text" style="width:200px" name="email"/></p>
<input type="hidden" value="nazyrov/yioQ" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" class="feedburner-submit" value="Подписаться" />
</form>
</div>

Шаг 6. Кусок кода <input type=”submit” class=”feedburner-submit” value=”Подписаться” /> возьмите в теги абзаца <p> … </p>

<div class="podpiska">
<form class="feedburner-form" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=nazyrov/yioQ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Введите ваш e-mail:</p>
<p><input type="text" style="width:200px" name="email"/></p>
<input type="hidden" value="nazyrov/yioQ" name="uri"/><input type="hidden" name="loc" value="en_US"/><p><input type="submit" class="feedburner-submit" value="Подписаться" /></p>
</form>
</div>

Шаг 7. Загрузите в корневую директорию блога фоновое изображение, которое будет в нашей форме, желательно с размером 580 X 140 (можно и другой размер, но тогда придется редактировать немного стили CSS),и изображение кнопки размером 200 X 30. Я загрузил вот это изображение (можете закачать себе его же):

Возможно вас заинтересует:  Как сделать клон страницы записей в Wordpress но с другими свойствами

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

Шаг 8. Отредактированный код формы подписки вставьте под статьей, если пользуетесь движком WordPress, то это в файле single.php

Шаг 9. Вставьте в файл style.css код стилей формы подписки:

*---------- Форма подписки под каждой статьей ----------*/
.podpiska {
 position: relative; /* положение формы */
 width: 560px; /* ширина формы */
 height: 140px; /* высота формы */
 margin-bottom: 10px; /* отступ от нижнего края */
 background: url(ссылка на изображение) no-repeat top center; /* ссылка на фоновое изображение */
 overflow: hidden; /* скрыть все что выходит за область формы */
 border: 3px dashed #ccc; /* размер, цвет и стиль рамки */
}
 
.feedburner-form {
 width: 560px; /* ширина полей формы */
 height: 190px; /* высота полей формы */
 margin-top: 34px; /* отступ сверху */
 text-align: center; /* положение текста */
 }
 
.feedburner-submit {
 width: 200px; /* ширина кнопки */
 height: 30px; /* высота кнопки */
 margin-bottom: 10px; /* отступ снизу */
 background: url(ссылка на изображение кнопки) no-repeat; /* ссылка на изображение */
 border: 1px solid #ffffff; /* размер, цвет и стиль рамки для кнопки */
 box-shadow: 1px 1px 5px #aaaaac; /* тень */
 font: bold 14px Arial, sans-serif; /* стиль надписи на кнопке */
 color: #ffffff; /* цвет надписи */
 cursor: pointer; /* стиль курсора при наведении */
}
 
.feedburner-form p {
 margin-top: 2px; /* отступ сверху */
 text-align: center; /* положение текста */
 font: bold 13px Arial, sans-serif; /* стиль текста */
 color: #333399; /* цвет текста */
}

Не забудьте вставить в код стилей ссылки на свое фоновое изображение и изображение кнопки.

Ну а теперь наслаждайтесь результатом.Если возникли какие-то вопросы, задавайте в комментариях, постараюсь на них ответить. Но я думаю, что трудностей возникнуть не должно, я вроде рассказал каждую мелочь.

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

18 комментариев

  1. Полезная статья, применю к себе на сайт.

    Подписался на блог

    Ответить
  2. Мне одному кажется или FeedBurner уже давно как умер?:) Почему не пользоваться нормальными сервисами рассылки?

    Ответить
    • Андрей, с чего такое мнение? Фидбернером пользуется большая часть блогеров. Мне он нравится, не нужно вручную редактировать и отправлять каждую рассылку. Конечно большой минус невозможность редактировать письма, но я не инфобизнесмен 🙂 ничего не продаю, поэтому фидбернер мне идеально подходит, не знаю как другим.
      А какие по вашему нормальные сервисы рассылки? Может и мне понравятся.

      Ответить
      • Из бесплатного, можно смартреспондер подключить. Там тариф вроде до 1000 подписчиков.

        Ну да цели чуток разные у сервисов рассылок и фидбиндера. Последний подходит в роди сборщика анонсов:)

      • Смартом тоже пользуюсь, даже есть пару десятков подписчиков, но вот лень мне делать через него рассылку 🙂 Может если было бы больше подписчиков, то и мотивация была бы 🙂

    • Мне тоже интересно, какая рассылка может конкурировать с feedburner, давно ищу.

      По факту: письма никогда не попадают автоматом в спам, сервис рассылки не отправляет автоматически ваших подписчикам спам, нет ограничений на количество писем и количества подписчиков, бесплатная — это требования.

      Ответить
  3. Отлично сделал. А я вот все никак не могу добраться и сделать форму подписки в конце статьи, надо тоже наверное выделять время и заниматься своим блогом

    Ответить
    • Привет, спасибо! Сколько же у тебя сайтов что так времени на блог не хватает?

      Ответить
  4. Очень чётко и подробно всё описано, круто! Но…если блогер новичок, читает эту статью, то я ему не завидую 🙂 Блин, сколько кодов сколько редактирования, это же завал :))))))

    Ответить
    • Привет, Игорь. Согласен, новичку будет сложновато, поэтому постарался максимально все разжевать 🙂 Ну а если возникнут какие-то трудности, я конечно помогу, подскажу что следует поправить.

      Ответить
  5. Оказывается все довольно просто. И ненужно досконально в коде разбираться. Статья написана доступным языком. На фото представлен код. Только бери и делай. Спасибо.

    Ответить
  6. Хорошая статья Андрей, но мне тоже кажется что все меньше и меньше блогеров пользуется Feedburner.Надо переходить на более современные сервисы.

    Ответить
  7. Спасибо Вам за подробную инструкцию! Очень полезно.

    Ответить
  8. Сейчас уже Feedburner устарел, не обновляется, многие переходят на Smartresponder.ru. Этот сервис лучше тем, что есть возможность контактировать с подписчиками, отправлять им письма.

    Ответить
    • Я думаю, не лишнем будет использование обоих сервисов. Тем более, что подписчиков из Feedburner можно перенести в Smartresponder.ru

      Ответить
      • Я того же мнения 🙂
        Андрей, а при экспорте подписчиков из фидбернера в смартреспондер, они повторно должны подтверждать почту?

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

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