Установка и настройка формы подписки на базе Feedburner.
Привет всем.
В сегодняшнем посте постараюсь вам поведать о том, как установить и настроить красивую, наполненную сплошным минимализмом форму подписки на базе Feedburner.
FeedBurner — это один из крупнейших сервисов, предоставляющих RSS услуги и бла-бла…
Раз вы пришли на эту страницу и читаете данный пост, значит, вы уже итак все знаете, вам просто нужно готовое решение, вы горите желанием заменить скучную, стандартную форму, которую предоставляет сервис:
Поэтому, обойдемся без воды и сразу приступим к делу!
КРАСИВАЯ ФОРМА ПОДПИСКИ – УСТАНОВКА, НАСТРОЙКА!
|
1 2 3 4 5 |
<div id="mbt-sub-box"><h3>Хотите подписаться на обновление блога по почте?</h3><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Amplayru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><center> <input type="text" name="email" onfocus="if (this.value == 'Введите свой E-mail адрес') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите свой E-mail адрес';}" value="Введите свой E-mail адрес"> <input name="uri" type="hidden" value="Amplayru"> <input name="loc" type="hidden" value="ru_RU"> <input class="submit" type="submit" value="Подпишусь-ка на всякий случай!"></center></form></div> |
Код… Опять этот набор непонятных символов и… Ну а куда же без него?
Тем не менее, дальше все будет ну очень-очень просто и понятно, впрочем как и всегда на этом блоге!
Проделаем небольшие изменения и настроем форму под ваш Feed:
|
1 |
http://feedburner.google.com/fb/a/mailverify?uri=Amplayru |
|
1 |
<input name="uri" type="hidden" value="Amplayru"> |
Нам предстоит изменить в этих двух строчках всего лишь название вашего фида, то есть только слово “Amplayru”.
Если вы вдруг забыли название своего фида – не беда! Особого труда, чтобы его узнать, здесь не возникнет:
- Заходите на свой Feed и кликаете вот на такое “Edit Feed Details…” и собственно вот:
- Узнать Feed Address из старой формы подписки… Уверен на 100%, что ее код у вас есть и вы знаете где его достать:
Также, можете заменить в предоставленном коде все слова написанные на русском языке на что свое:
- “Хотите подписаться на обновление блога по почте?”.
- “Введите свой E-mail адрес”.
- “Подпишусь-ка на всякий случай!”.
Так, здесь с настройками разобрались. Находим, изменяем и переходим к следующему этапу под названием “Вставка кода”.
Данная форма подписки скорее всего найдет свое место и отлично впишется под статьей, но при правильных корректировках может неплохо смотреться и в сайдбаре. Рассмотрим первый вариант и вставим код в “Одна запись (single.php)” (Админка – Внешний вид – Редактор).
У меня она нашла место вот после таких слов:
|
1 |
<!-- end // post--> |
А для корректного отображения формы во всей ее красе осталось добавить стили в файл вашего шаблона “Таблица стилей (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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* форма подписки на feed под постами */ #mbt-sub-box { background: -webkit-gradient(linear, left top, left bottom, from(#6AB6C4), to(#6AB6C4)); border: 0px solid #1A2638; border-radius: 10px; margin-bottom: 10px; padding: 30px; text-align: center; background: -moz-linear-gradient(top, #333, #1A2638); } #mbt-sub-box input { background: -moz-linear-gradient(center top , white, #EFEFEF) repeat scroll 0 0 transparent; border: medium none; border-radius: 10px 10px 10px 10px; font-size: 14px; padding: 10px; text-shadow: 1px 1px 0 white; width: 280px; color: #666; font-family: cursive; margin-bottom: 5px; } #mbt-sub-box .submit { background: -webkit-gradient(linear, left top, left bottom, from(#46A4B6), to(#46A4B6)); background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent; color: white; cursor: pointer; font-weight: bold; margin-left: 20px; text-shadow: 0 1px 2px black; width: 270px; font-family: cursive; margin-left: 5px; } #mbt-sub-box h3 { margin-top: 5px; color: white; font-family: cursive; font-size: 25px; margin-bottom: 20px; padding: 0; text-shadow: 0 2px 3px black; line-height: 35px; } |
А вот и результат, вы наверняка его уже видели не раз на страницах моего блога:
Плюсы: не использовано ни одной картинки, чистый CSS – гарантирует небольшой вес, что значительно снизит нагрузку на ваш ресурс, абсолютная гибкость в настройках, что позволяет настроить форму под свой вкус и дизайн блога.
КАК ЛЕГКО ПОДОГНАТЬ ФОРМУ ПОД СЕБЯ?
Есть один метод, которым я постоянно пользуюсь – это изменения через “Просмотр кода”: открываем страницу, кликаем на нужный объект правой кнопкой мыши – “Просмотреть код”, производим изменения и сразу наблюдаем за результатом. По окончанию операции копируем свои изменения и переносим их в файлы шаблона.
На этом все! Всем пока!
С уважением, Владислав Лемишко.
Читайте также:
- А ты получил свой новогодний подарок от Advertur?
- Как сделать копию любого продающего сайта или страницы подписки?
- Векторные заготовки для новогоднего дизайна.
- Top-7 ошибок, которые «воруют» у сайта трафик!
- Рекламная строчка Nolix — все то, о чем молчат обычные блоггеры!
А меня простые формы не завлекают на подписку и на свой блог, я бы такую не поставил. Вот второй вариант — то что надо.
Влад, а ты случайно не можешь написать подробную статью со своим примером — как установить подписную форму из смартреспондера на свой блог?
Я слышал что — она у многих почему-то правильно не вставляется на его блоге? :smile:
Как-то на досуге подумаю над твоим предложением)