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

rss-40674_1280400
Приветствую Вас друзья! Сегодня решил продолжить тему о сервисе FeedBurner. Если Вы помните, то в прошлой статье я рассказывал о том, как зарегистрироваться в сервисе FeedBurner и установить форму подписки себе на сайт. Мы также сделали форму подписки FeedBurner красивой. Но та красивая форма подписки предназначалась для сайдбара WordPress. Поэтому в этом посте, вы установите красивую форму подписки на сервис FeedBurner после статьи. Лично я считаю, что на блоге должны быть две формы подписки на обновление блога (одна в сайдбаре, а вторая после статьи). Это наиболее выгодные места, на которые посетитель сайта обращает внимание.

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

krasivaya-forma-feddburner-2
Вы можете заметить эту форму после статьи. Именно такой красивой формой подписки на сервис FeedBurner я хочу с вами поделиться. Желательно, чтобы Вы её немного изменили, чтобы не было у всех одинаково. Если Вам нравится такая форма подписки на обновления блога и Вы хотите её установить, то читайте статью дальше!

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

Я полагаю, что в самом сервисе Вы уже зарегистрированы и, что у вас есть адрес фида. Если всего этого нет, то читаем первую часть!

Если всё есть, то делаем простые шаги по установке формы.

Шаг  1. Копируем этот код формы подписки и вставляем его в место после статьи.

<!-- ======= | Начало формы подписки|======= -->
<div id="optin-box">
<div class="call1">Получай статьи блога на почту! Читай их первым!</div>
<div class="call2"><strong>Введите необходимые данные</strong>, чтобы знать куда отправить Вам вкусняшку:</div>
<form name="SR_form" action="http://feedburner.google.com/fb/a/mailverify" method="post"  target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=infosovety', 'popupwindow', 'scrollbars=yes,width=570,height=540,top='+((screen.height-540)/2)+',left='+((screen.width-570)/2)+',location=no');return true">
<input value="infosovety" name="uri" type="hidden">
<input name="loc" value="ru_RU" type="hidden">
<input name="email" id="email" type="text" placeholder="Введите Ваш E-Mail" />
<input name="SR_submitButton" id="button" type="submit" value="Да, хочу читать!" title="Оформить подписку!" />
</form>
&nbsp;
&nbsp;
<div class="call2"><strong></strong></div>
</div>
<!-- ======= | Конец формы подписки|======= -->

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

ВНИМАНИЕ! Если с кодами, которые в формах, будут проблемы (не будет отображаться форма), то используйте коды из текстового документа КОД ФОРМЫ.

Внимание! Если Вы не понимаете в коде своего шаблона и не знаете, куда именно нужно вставить код, чтобы он выводился после написанной статьи, то установите себе хороший плагин – Post Layout. Этот плагин позволяет вставлять необходимый код перед статьёй — в середину статьи — после статьи.

krasivaya-forma-feddburner-3
 

krasivaya-forma-feddburner-4
Используя данный плагин, вы можете легко вставлять блоки с рекламой, если вы уже монетизируете свой блок.

В этом коде Вы можете изменить заголовок и подзаголовок формы, размер самой формы, текст кнопки подписаться и поле e-mail. С этим, думаю, Вы разберётесь. Но, сначала, нужно добавить стили, чтобы форма подписки приняла красивый вид.

Шаг  2. Добавляем Стили для формы подписки.

Стили необходимо вставить в файл вашей темы – style.css.

krasivaya-forma-feddburner-5
Вот сам код стилей:

/* ================================= | ФОРМА подписки ===== */
#optin-box {
background: rgb (54,116,150); /* Old browsers */
background: /* IE9 SVG, needs conditional override of 'filter' to 'none' */

);
background: -moz-linear-gradient (top, rgba (54,116,150,1) 0%, rgba (63,86,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient (linear, left top, left bottom, color-stop (0%,rgba (54,116,150,1)), color-stop (100%,rgba (63,86,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient (top, rgba (54,116,150,1) 0%,rgba (63,86,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient (top, rgba (54,116,150,1) 0%,rgba (63,86,107,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient (top, rgba (54,116,150,1) 0%,rgba (63,86,107,1) 100%); /* IE10+ */
background: linear-gradient (to bottom, #59B854 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#367496', endColorstr='#3f566b',GradientType=0 ); /* IE6-8 */
width: 670px;
margin: 20px auto 0 auto;
text-align: center;
border-bottom: 5px solid #59B854;
border-top: 3px solid #59B854;
— webkit-border-radius: 8px;
— khtml-border-radius: 8px;
— moz-border-radius: 8px;
border-radius: 8px;
}

#optin-box .call1 {
font-size: 27px;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: 1px 1px #000;
padding: 15px 0 10px 0;
}

#optin-box .call2 {
font-size: 15px;
color: #fff;
text-align: center;
text-shadow: 1px 1px #000;
padding-bottom: 15px;
}

#optin-box input {
— webkit-border-radius: 8px;
— khtml-border-radius: 8px;
— moz-border-radius: 8px;
border-radius: 8px;
margin: 5px 0 20px 20px;
}

#optin-box input[type="text"] {
color: #333;
border: 2px solid #aaa;
font-size: 18px;
padding: 10px 10px;
width: 50%;
float: left;
}

#optin-box input#email {background: #fff url ('.../images/email.png') no-repeat center right;}

#optin-box input[type="submit"] {
background: #cc0000;
border: 2px solid #fff;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: bold;
text-decoration: none;
padding: 10px 25px;
float: left;
— webkit-border-radius: 8px;
— khtml-border-radius: 8px;
— moz-border-radius: 8px;
border-radius: 8px;
}

#optin-box input[type="submit"]:hover {
background: #ff0000;
color: #fff;
border: 2px solid #fff;
}

#optin-box .lock {
width: 40px;
height: 45px;
margin-top: 5px;
}

#optin-box #confident {display: none;}

В этом коде вы можете изменить цвет фона формы, а также цвет бордюров формы.

Вот и всё, после того как вы сохраните настройки, на вашем сайте после статьи должна отображаться красивая форма подписки на обновление вашего блога на WordPress.

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

С уважением, Никита Мельников!

 

25 thoughts on “Как сделать красивую форму подписки feedburner после статьи? Часть 2

  1. Спасибо за готовую симпатичную формочку подписки, а так было лениво самому выдумывать. А тут взял, копирнул и нет проблем http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

  2. Привет Никита! Всегда хотел установить красивую формы подписки, но так руки и не доходят! Поэтому как увидел твой пост, сразу ухватился за эту информацию! Спасибо тебе!

    Но...после установки кода в файл single.php форма не появилась под статьёй, а только видно элементы самого кода! В файл css установил тоже предоставленный тобой код стилей и...ничего не изменилось!

    Тогда я установил этот плагин Post Layout и вставил код через него, и...тот же эффект!!!! После статьи отображается сам код а не форма! http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif

    Что скажешь? Думаешь проблема в моём шаблоне?http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif

      1. Никита, ты гений! Сейчас работает! Но...ты меня извини за наглость, не смог ты подогнать эту форму под ширину моей страницы? У меня ширина 465 px То есть ширину то я смог подогнать, изменив пиксели в коде css но вот со всеми остальными подгонами запутался! Так у меня сместились поле для почты и соглашения взять!

        Если это долгая работа, то забудь! Не хочу тебя напрягать, да и время твое стоит денег!

  3. Большое спасибо! http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif Благодаря Вам сэкономил много времени.http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif Хотел именно такой тип формы подписки: информативную и понятную. Стили конечно же почти полностью изменил, чтобы не плагиатить ^_^

    Ещё раз благодарю! http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif.

  4. Спасибо за код, Никит. Я его забираю себе, пожалуй, только еще картинку какую-нибудь вставлю, пока думаю еще, какую.)

    Формы подписки это моя одна из любимейших тем, и я скапливаю все коды, которые авторы блогом нам дают бесплатно.) Радуюсь, как дитя. http://infosovety.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif

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

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