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

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

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

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

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


Enter your email address:






Delivered by FeedBurner


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

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

Delivered by FeedBurner

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

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



Введите ваш e-mail:







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

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

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


action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=nazyrov/yioQ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

Введите ваш e-mail:







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



Введите ваш e-mail:


«width:200px» name="email"/>




class="feedburner-submit" value="Подписаться" />

Шаг 6. Кусок кода  возьмите в теги абзаца 

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

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

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

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
*---------- Форма подписки под каждой статьей ----------*/
.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; /* цвет текста */
}

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

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

Введите ваш e-mail:

Как вам статья?
Полная ерундаНичего интересногоТак себеХорошоОтлично (2 голосов, оценка: 5,00 из 5)
Loading...Loading...

Понравилась статья? Поделись с другими, нажав на одну из кнопок.


Комментариев 13 на “Как сделать красивую форму подписки Feedburner под каждой статьей?
  1. Мне одному кажется или FeedBurner уже давно как умер?:) Почему не пользоваться нормальными сервисами рассылки?

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

      А какие по вашему нормальные сервисы рассылки? Может и мне понравятся.

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

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

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

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

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

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

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

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

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

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

Добавить комментарий для Александр Отменить ответ

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

Можно использовать следующие HTML-теги и атрибуты:

Александр