Приветствую.

В эфире пятая часть серии статей ““Как превратить посетителей вашего блога в E-mail подписчиков”. В этой части мы с вами разместим форму подписки на вашу рассылку в блоге (в боковом меню и после каждой статьи).

Предыдущие части вы сможете найти по этим ссылкам:

Как превратить посетителей вашего блога в E-mail подписчиков (Часть 1)

Как превратить посетителей вашего блога в E-mail подписчиков (Часть 2)

Как превратить посетителей вашего блога в E-mail подписчиков (Часть 3)

Как превратить посетителей вашего блога в E-mail подписчиков (Часть 4)

Итак, давайте начнем.

Получение кода формы:

1. Перейдите на сайт СмартРеспондер.

2. Войдите в свой аккаунт

3. В меню “Формы” выберите “Генератор форм подписки”

4. В настройках формы выбираете рассылку.

5. Настраиваем внешний вил формы по своему вкусу (в поле “Текст кнопки” я рекомендую вам выбрать “Получить!”).

6. Копируем код формы из панели “HTML-код сгенерированной формы”.

Настройка вывода формы подписки в боковом виджете блога

1. Переходим в панель управления блогом (у меня WordPress так что я буду показывать добавлений формы на примере этой CMS)

2. Переходим в раздел “Дизайн”->”Виджеты”

3. В поле “Доступные виджеты” выбираем виджет “Произвольный текст или HTML-код” и перетаскиваем его на область отображаемых виджетов блога.

4.Открываем только что созданный виджет, заполняем поле “Заголовок”. Перед обложкой можно написать название бонуса.
Добавляем по центру виджета обложку бонуса (мы делали ее в этом уроке). Обложка должна быть перед этим закачана на ваш хостинг.

Я добавил все эти элементы следующим кодом:

<center>
<u>Как создать красивый видео урок</u><br>
<img src="http://gavrilov.enterbook.ru/minicover.png" alt=""/>
</center><br>

5. После изображения вставляем код формы подписки (также по центру).

У меня получилось так.

6. Нажимаем кнопку “Сохранить”.

У меня получился вот такой симпатичный виджет.

Вывод формы подписки после каждой статьи

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

1. Переходим в панель управления блогом.

2. Переходим в раздел “Дизайн”->”Редактор”.

3. Выбираем страницу которая отвечает за вывод текста статьи (у меня эта страница называется content-single.php, у вас она может называться по-другому, например single.php).

4. В конце страницы создаем красивую ячейку в которой будет выводиться форма подписки. Сделать это можно с помощью этого кода:

<div style="border:1px solid #E2E2E2;border-radius:5px;-moz-border-radius:5px;background:#FAFAFA;padding:5px 7px 0 6px;margin-bottom:10px;">

</div>

5. Теперь давайте создадим внутри ячейки новую таблицу с двумя столбцами и двумя ячейками.

Код таблицы:

<table cellspacing="0" cellpadding="0" align="center" width="680">
<tr>
	<td width="340" valign=top></td>
	<td width="340" valign=top></td>
</tr>
</table>

В первой ячейке первого столбца мы разместим изображение.

Вот так (не забудьте поменять путь к изображению на свой):

<table cellspacing="0" cellpadding="0" align="center" width="680">
<tr>
	<td width="340" valign=top><center><img src="http://gavrilov.enterbook.ru/minicover.png" alt=""/></center></td>
	<td width="340" valign=top></td>
</tr>
</table>

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

Вот так:

<table cellspacing="0" cellpadding="0" align="center" width="680">
<tr>
	<td width="340" valign=top><center><img src="http://gavrilov.enterbook.ru/minicover.png" alt=""/></center></td>
	<td width="340" valign=top><center><u>Как создать красивый видео урок</u></center><br><center>ЗДЕСЬ ВСТАВЬТЕ КОД ФОРМЫ ПОДПИСКИ</center></td>
</tr>
</table>

У меня получилось вот такой код блока с подпиской:

6. Нажимаем кнопку “Обновить файл”.

У меня получился вот такой симпатичный блок с формой подписки:

Попробуйте “поиграться” с данным блоком, увеличьте размер формы, поменяйте шрифт т.д.

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

Так, что если вы не хотите ни чего пропустить, то подписывайтесь на RSS ленту блога.