Привет всем.
В сегодняшнем посте постараюсь вам поведать о том, как установить и настроить красивую, наполненную сплошным минимализмом форму подписки на базе 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 – гарантирует небольшой вес, что значительно снизит нагрузку на ваш ресурс, абсолютная гибкость в настройках, что позволяет настроить форму под свой вкус и дизайн блога.
КАК ЛЕГКО ПОДОГНАТЬ ФОРМУ ПОД СЕБЯ?
Есть один метод, которым я постоянно пользуюсь – это изменения через “Просмотр кода”: открываем страницу, кликаем на нужный объект правой кнопкой мыши – “Просмотреть код”, производим изменения и сразу наблюдаем за результатом. По окончанию операции копируем свои изменения и переносим их в файлы шаблона.
На этом все! Всем пока!
С уважением, Владислав Лемишко.
Привет!
А меня простые формы не завлекают на подписку и на свой блог, я бы такую не поставил. Вот второй вариант — то что надо.
Привет. А у тебя смотрю появился еще один сайт… Вчера на нем был, особо не всматривался, но знакомое меню увидел — думал, что кто-то скопировал… А теперь на 100% вижу, что твой!
Да, есть. Я теперь танцую инклизивные танцы и этот сайт_http://teatr-sobolevskih.ru стал моим. Новое хобби, мне нравиться. Уже был один концерт, следующий фестиваль-конкурс «Золотой Кубок» 19 декабря — готовлюсь.
Классно. Удачи!
Прекрасная статья — пишешь с юмором — приятно читать.
Влад, а ты случайно не можешь написать подробную статью со своим примером — как установить подписную форму из смартреспондера на свой блог?
Я слышал что — она у многих почему-то правильно не вставляется на его блоге?
Спасибо. Стараюсь, совсем немного.
Как-то на досуге подумаю над твоим предложением)
у тебя чего-то смайлики дурят
Да, совести у них нет просто, вот и дурят.
Влад, отличная форма подписки получилась. Установлю себе на блог по твоей инструкции. Спасибо.
Будет интересно посмотреть на то, как ты ее усовершенствуешь!