Всем читателям блога SEOBID.NET привет! Сегодня подниму тему важности подписки на блоге – ее содержанию и форме. За основу хочу взять форму подписки сервиса Smartresponder – надеюсь, вы с ним уже знакомы.

Думаю, что у всех блогеров понимание необходимости существования своей базы подписчиков и формы е распространения приходит не сразу – сначала все стремятся оформить дизайн блога, затем улучшить функционал с одновременным пониманием того, что тут же потребуется внутренняя и внешняя оптимизация ресурса, и только потом, когда количество посетителей растет и ваши аппетиты тоже, вы начинаете задумываться, а как еще можно привлечь на блог посетителей?

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

А для этого будет очень полезным иметь свою подписную базу. И уже отлаженный, четко работающий сервис рассылки будет как нельзя кстати. Все вы знаете Feedburner, но в сегодня я расскажу о сервисе Smartresponder.

Регистрация на Smartresponder

Регистрация на Smartresponder

Создать свою форму подписки на Smartresponder довольно легко, и затевать ради этого статью смысла не имело бы, если бы не одно обстоятельство. Не всех удовлетворяет стандартная форма подписки, хотя таких форм сервис предлагает несколько. Я же предлагаю создать не только свою рассылку, но и адаптировать форму подписки под дизайн вашего блога.

Итак, начнем по порядку, и первое, что мы сделаем – зарегистрируемся в Smartresponder. Это можно сделать по адресу http://smartresponder.ru. Форма для регистрации выглядит на сегодняшний день вот так:

Регистрация на SmartresponderДальше все стандартно — придумайте логин, введите свою почту, придумайте пароль, а также впишите свое имя и фамилию. Затем нажимайте кнопку «Начать сейчас», и вас перебросит вот сюда:

Регистрация на Smartresponder

Все поля, помеченные звездочкой, обязательно нужно заполнить. После всех этих недолгих процедур у вас появляется личный кабинет, в котором уже можно приступать к созданию рассылки. Для начала ее создания жмите пункт верхнего меню «Создать новую рассылку».

Создать новую рассылку

И вы сразу попадете на страницу, где и будете ее ваять. Те поля, рядом с которыми стоит красная звездочка (*), заполняйте обязательно, рассылка просто не создастся.

Создать новую рассылку

Всплывающие подсказки для каждого поля есть с правой стороны в виде вопросительного знака — наведите на него курсор, и увидите подробный ответ на вопрос, что и как заполнять. Дальше просто жмите кнопку «Создать», и все – ваша рассылка создана. Но это только рассылка, и теперь необходимо для нее создать форму подписки и получить HTML код, чтобы эту форму вставить на свой сайт или блог. Чтобы создать любую из понравившихся форм, выбирайте «Новые формы подписки».

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

Создать новую рассылку

Здесь вы увидите дополнительные поля, такие, как «Фамилия» и т.д., но они практически вам не нужны – никто не любит заполнять много полей, вполне достаточно двух — имя и e-mail. Впрочем, это уже ваше личное дело, как будет выглядеть ваша форма подписки. В любом случае, после подготовки формы вам остается только вставить ее на сайт, а для этого нужно скопировать код – жмите на кнопку «Получить HTML код».

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

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

Если вы хотите, чтобы подписка находилась после каждой записи, то код нужно вставить или в файл single.php после окончания контента («Внешний вид» — «Редактор» — single.php), или в файл comments.php перед полем ввода комментариев.

Например, в single.php это можно сделать после строк

<!--?php comments_template(); ?--> 

(или похожих, содержащих функцию вывода комментариев), а в файле comments.php – перед строкой

<textarea id="comment" name="comment"></textarea>

(или похожей, с полем textarea).

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

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

Существующий код можно не только значительно сократить, но и изменить его внешний вид – расположение блоков, полей, изменить цвета и оттенки формы. Так как код от Smartresponder довольно сильно замусорен, не помешает его немного облегчить или даже совсем заменить на свой.

Ну, например, взять за основу тот же код из Feedburner, и просто вставить в него свой идентификатор от смартреспондер. А, добавив своих стилей CSS, вы добьетесь уникальности в оформлении дизайна. Вот один из способов создания собственной формы рассылки:

<form onsubmit="return SR_submit(this)" method="post" action="http://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_2_61">
<input type="hidden" value="1" name="version">
<input type="hidden" value="0" name="tid">
<input type="hidden" value="" name="uid">
<input type="hidden" value="ru" name="lang">
<input type="hidden" value="644697" name="did[]">
<div id="optin">
<h3>Подпишись на новости</h3>
    <input type="text" tabindex="900" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value=" Имя" class="name" name="field_name_first">
    <input type="text" tabindex="901" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value=" E-Mail" class="email" name="field_email">
    <input type="submit" value="Подписаться на рассылку!" name="SR_submitButton">
</div>
</form>

То есть, в этом коде вам необходимо только указать свой идентификатор (ID) в строке input type=»hidden» value=»644697″ name=»did[]», а узнать его вы можете в своем списке рассылок – на скриншоте он обведен красным.

Теперь приведу самые простые стили CSS:

form{width: 300px; border: 1px solid rgb(200, 200, 200);
 margin-left: ; border-radius: 0px;}
#optin {padding:10px 25px;
    text-align: center;
    background-color: #f9f9f9;
    width: 250px;
}
#optin input[type="text"] {
    border: 1px solid #CCCCCC;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 8px 10px;
    width: 90%;}
#optin input[type="submit"], #optin_post input[type="submit"] {
    background-color: #1C5D28;
    background-repeat: repeat-x;
    border: 1px solid #137725;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 15px;
    text-shadow: -1px -1px #1C5D28;
}

Здесь, надеюсь, тоже все понятно, и манипулировать оформлением вы можете как угодно, хотя бы путем эксперимента. Так, вы должны знать, что:

  1. значение width – это ширина блока. Если вы будете вставлять форму после статьи, то вам наверняка нужно будет изменить ее ширину – сделать ее шире.
  2. border-radius – радиус закругления углов формы;
  3. border – толщина рамки блока;
  4. text-shadow – тень от рамки.

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

Это пример стилей CSS, которые помогут корректно отображать форму подписки в сайдбаре, но вы можете сделать и свои стили для любого места на сайте.

Просто скопируете и вставьте, не забудьте при этом прописать свой идентификатор — в коде он прописан под моим номером (644697). Вот, собственно, и вся проблема. Если вы хоть немного знакомы с PHP и CSS, то для вас воплотить это решение в жизнь не составит труда. До встречи в следующих публикациях!