Красивая форма подписки

Красивая форма подписки в сайдбаре для WordPress.


24.08.2013 | Создание блога комментария 54 | 46830 просмотров | Автор статьи: Александр Рус


Здравствуйте, дорогие гости моего блога! С момента написания последней статьи прошло уже много времени (около 2 недель), эх что то я сдал немного свои темпы :mrgreen:

Если вы читаете данную статью, значит вы не спроста попали на мой блог. Наверняка в 80% случаях вы искали информацию: «Как украсить стандартную форму подписки от Google?» 🙂 . Да да, все верно! Вы нашли на свой вопрос ответ! Именно в этой статье я опишу все известные для меня приемы и способы, для выполнения вами поставленной задачи.

Итак, приступим!

Вкратце ниже я опишу вопросы которые мы будем разбирать в этой статье:

  1. Как поменять цвет формы подписки?
  2. Как изменить размер?
  3. Как поменять внешний вид кнопки «Подписаться»?
  4. Как изменить размер и цвет шрифта?
  5. Как вставить картинку в форму подписки?
  6. Как поменять размер и цвет рамки?
  7. Как удалить ссылку из формы подписки.

А теперь по порядку!

Изначально, стандартный код формы подписки от Google у нас выглядит так:

1
2
3
4
5
6
7
8
9
10
<form style="border: 1px solid #ccc; padding: 3px; text-align: center;" action="http://feedburner.google.com/fb/a/mailverify">method="post"
target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Agirus', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"&gt;
Enter your email address:
<input style="width: 140px;" type="text" name="email" />
<input type="hidden" name="uri" value="Agirus" />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" />
Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a>
</form>

1. Для того что бы поменять цвет формы нам необходимо в первую строку после text-align:center;  добавить атрибут background-color: #f5f5dc»; , меняя значение  #f5f5dc — вы меняете цвет фона.

2. У каждого шаблона свои размеры. И для того, что бы наша форма подписки была на всю ширину сайдбара дописываем после background-color: #f5f5dc»; следующее width:275px; — атрибут отвечающий за ширину формы подписки(подгоняем его под ширину своего сайдбара).

3. Теперь делаем красивую кнопку «Подписки».  Ее я нарисовал в фотошопе. Размер кнопки  200X31.

Удаляем строчку стандартного кода:

1
<input type="hidden" name="loc" value="en_US" /><input type="submit" value="Subscribe" />

и вместо него вставляем

1
<input style="width: 200px; height: 31px;" type="image" src="'http://myworkpro.ru/wp-content/uploads/2013/08/Bez-imeni-1.png'" />

width: 200px; — ширина кнопки;

height: 31px; — высота кнопки;

src=’http://myworkpro.ru/wp-content/uploads/2013/08/Bez-imeni-1.png’>  — путь к картинке. Здесь вы можете нарисовать свою кнопку размером: ширина — 200px, высота — 31px; загрузить картинку на хостинг и вписать вместо моей ссылки свою( так у вас будет отображаться своя кнопка). Или оставьте  все без изменения для отображения моей кнопки.

4.  Удаляем строчку

1
2
Enter your email address:
<input style="width: 140px;" type="text" name="email" />

и вместо нее вставляем

1
2
ХОТИТЕ ПОЛУЧАТЬ ОБНОВЛЕНИЯ БЛОГА НА E-MAIL?
<center><input id="src" style="width: 220px; height: 30px; background-color: #fff;" type="text" name="s" value="Введите ваш E-mail" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></center>;

width: 220px; height: 30px  — это размер поля в котором вводят email адресс.

background-color: #fff» — цвет поля.

value=»Введите ваш E-mail» — значение value выводит информацию, которая будет отображаться в поле.

строку 

1
<input type="hidden" name="uri" value="Agirus" />

оставляем без изменений.

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

Добавляем следующий ниже код:

1
<img style="width: 275px; height: 280px;" alt="" src="http:///wp-content/uploads/2013/08/onlline-marketing-rss.png" />

width: 275px; — ширина картинки. Подгоняем под ширину вашей формы.

height: 280px; — высота картинки. Тут на ваше усмотрение.

6.  За размер рамки формы подписки отвечает атрибут border:1px — он прописан в самом начале кода.

solid #ccc — атрибут отвечающий за цвет рамки. Он тоже прописан в самом начале после атрибута border:1px .

7.  В стандартной форме подписки присутствует ссылка от Google. Думаю, что лишняя внешняя ссылка никому не нужна. Поэтому находим ниже написанный код и удаляем его:

1
2
Delivered by
<a href="http://feedburner.google.com" target="_blank">FeedBurner</a>

А теперь визуально посмотрим на проделанную нами работу :mrgreen:

До После
Enter your email address:





Delivered by FeedBurner


Слева стандартная форма подписки от Google.
Справа форма после изменения.

ХОТИТЕ ПОЛУЧАТЬ ОБНОВЛЕНИЯ БЛОГА НА E-MAIL?





Вот полностью готовый код формы подписки из этой статьи.

1
2
3
4
5
6
<form  style="border:1px solid #ff0000;padding:3px;text-align:center; background-color: #f5f5dc"; " action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Agirus', 'popupwindow', 'scrollbars=yes,width=550,height=420');return true"><br>ХОТИТЕ ПОЛУЧАТЬ ОБНОВЛЕНИЯ БЛОГА НА E-MAIL?
<center> <br><input rel="nofollow" style="width: 220px; height: 30px;background-color: #fff"type="text"name="email" name="s" id="src" value="Введите ваш E-mail"onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></center>
<input type="hidden" value="Agirus" name="uri"/>
<input style="width: 200px; height: 31px;" type="image"  src='http://myworkpro.ru/wp-content/uploads/2013/08/Bez-imeni-1.png'>
<img style="width: 275px; height: 280px;" src="http:///wp-content/uploads/2013/08/onlline-marketing-rss.png"> 
</form>

На этом все. Будут вопросы пишите в комментариях.

P.S. — Ребят, предлагаю Вам произвести бесплатный обмен ссылками с мои блогом. Подробности читайте здесь «Обмен ссылками«.  Надеюсь с Вами на взаимовыгодное сотрудничество!

С Уважением, Александр Рус!

Материалы по теме:

1. Выбираем хостинг
Добрый день, уважаемые читатели! В этой статье я опишу, с чего надо начинать первые свои шаги при создании блога. Никому наверное не секрет, что фундаментом ...
Как разместить флэш-баннер на сайте
Флэш-баннер установить на свой сайт достаточно просто – он ставится так же, как и простой графический баннер. Требуется выполнить пару несложных действий, с которыми ...
2. Регистрация домена.
Итак, в прошлом уроке я описывал, с чего надо начинать создание сайта. Если вы читаете эту статью, значит у вас уже есть хостинг и ...
Настройка URL-адреса на платформе WordPress
Прогрессивное продвижение сайта невозможно без правильной настройки URL-адреса и работы с файлом .htaccess. Ниже вы найдете базовые рекомендации по этим двум аспектам. Посещаемость интернет-сайтов во ...
Виджет YouTube для сайта. Как это сделать.
Создание виджета при помощи html кода. Создание виджета при помощи плагина. Как узнать ID канала Youtube. Создание виджета через сайт Youtube. Всем привет! Сегодняшняя статья посвящается тем, кто ищет ...

1
Лидия http://tytvkysno.ru/

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

Автор2
Александр Рус http://myworkpro.ru/

Добавил в конце статьи.

3
Лидия http://tytvkysno.ru

Спасибо за отзывчивость.

Автор4
Александр Рус http://myworkpro.ru/

Да не за что)

5
Светлана http://login-slog.ru/

Уже все сама сделала. Спасибо за содержательный пост!

Автор6
Александр Рус http://myworkpro.ru/

Рад был угодить 😉

7
Светлана http://login-slog.ru/

Тоже не могу разобраться с кнопкой. Нарисовала в фотошопе такую красоту, а она не отображается. Помогите разобраться

Автор8
Александр Рус http://myworkpro.ru

Указали бы для приличия ссылочку на Ваш сайт.

9
Вячеслав

Не могу разобраться с кнопкой, она не отображается. Помогите

10
Михаил http://mihafilm.blogspot.ru

О, Александр, поздравляю в Яндексе по тематическому запросу на 5м (первой же страницы) месте этот блог!!!

Автор11
Александр Рус http://myworkpro.ru/

Это хорошо 🙂

12
Юрий http://bloger-man.ru

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

Автор13
Александр Рус http://myworkpro.ru/

Вроде говорили, что его закроют, а он уж как год назад работал, так и работает.

14
Алексей http://ozerkalke.ru

Где-то в комментах было, что благодаря feedburner гугл быстрее индексируется и для пользователей хорошая защита от спама

Автор15
Александр Рус http://myworkpro.ru/

Тоже такое читал.

16
Елена Прекрасная http://prekrasniy-mir.ru/

Да, вторая форма подписки конечно красивее, но она очень большая, хотя под статьей нормально будет, а если в сайтбар, то уменьшать надо.

Автор17
Александр Рус http://myworkpro.ru/

Размеры любые можно подобрать самому, я для примера такую создал)

18
Татьяна Сова http://sovuskino.ru/

Спасибо, Александр! Обязательно воспользуюсь. Как раз искала информацию, как поменять свою форму подписки. А тут так подробно и легко все изложено! На следующей неделе собираюсь поменять). Нарисую картинки свои, кнопочку и будет красота!!! Надеюсь, что все получится! 🙂

Автор19
Александр Рус http://myworkpro.ru/

Для Feedbunder писал, если же вы пользуетесь Smartresponder, то там немного посложнее будет поменять оформление.

20
Татьяна Сова http://sovuskino.ru/

Как раз я пользуюсь Feedbunder

21
Рита http://ritabk.ru/

Александр, спасибо за подробную статью. У меня тоже неплохая форма подписки на новости блога. Но делала я ее немного по- другому. Теперь попробую сделать так, как у вас написано. Этот вариант меня устраивает. Тем более, что картинку свою сделаю. А то я брала в интернете, а это не есть хорошо. :mrgreen:

Автор22
Александр Рус http://myworkpro.ru/

Попозже зайду в гости, посмотрю, что получилось 😉

23
Платон Щукин http://platon-shhukin.ru

Да форма красивая)

24
Екатерина http://babuwka.ru

Спасибо, немного подправила и своим формы подписок.

25
chepe94 http://blogchepe.com

Большое спасибо) буду делать..

26
Алексей http://ozerkalke.ru

По чем купил, Саш? Тоже планирую что-то особенное сделать в дизайне у себя на блоге.

Автор27
Александр Рус http://myworkpro.ru/

Точно не припомню уже, где то около 50$.

28
Олег Клышко http://klyshko.ru/

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

Автор29
Александр Рус http://myworkpro.ru

Привет, Олег купил в интернете готовую прем. тему. Просто вбил в поиске платные темы для wordpress, а потом выбирал)

30
Оксана http://magicglade1.blogspot.ru

Спасибо огромное, что делитесь опытом, буду пробовать!

Автор31
Александр Рус http://myworkpro.ru/

Да это элементарные вещи, почему бы и не помочь)

32
Максим http://oribal.ru

Еще бы хотелось статью, как вообще создать эту форму подписки) А потом дать ссылку на эту статью, как ее приукрасить.

Автор33
Александр Рус http://myworkpro.ru/

В статье говорится от куда код подписки берется.

Вообщем стандартный код формы подписки везде дается, не важно какие сервисы вы используете: Google Feedbuner, Madmini и т.д.. Копируете у них этот код и вставляете себе в блог.

34
Оксана

Александр, ооочень полезная статья, только не могу понять как и куда вставить этот код в мой блог на blogspot. На feedbuner скопировала, отредактировала, а дальше как? Если не трудно подскажите, пожалуйста.

Автор35
Александр Рус http://myworkpro.ru/

Там же все просто. Зайдите в редактор блога, выберите Дизайн. В дизайне нажмите справа в колонке добавить виджет, перед вами высветится список виджетов, выберите "Рассылка обновлений по электронной почте", откроется новое окно где необходимо вписать URL своего Feedbuner, сохраняем и все готово.

Автор36
Александр Рус http://myworkpro.ru/

Ну да, попробуйте поэксперементируйте.

P.S. Оксана, сделайте что бы при нажатии на ваш ник, можно было на ваш блог перейти.

37
Оксана

Спасибо! Это все сделала. А чтобы форма была красивая (использовать все ваши советы из этой статьи) нужно в коде править?

38
Компьютерная помощь http://ssecond-life.ru

А я как обычно все руками, без фотошопа. Ковырялся в коде. Нужно попробовать ваш урок на практике

Автор39
Александр Рус http://myworkpro.ru

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

40
Андрей http://zarobitok.ru

Статья зачетная, успехов 🙂

41
Дмитрий http://webmasterdima.ru

Спасибо большое! Кстати блог у Вас обалденно красивый, неприменно в закладки.

Автор42
Александр Рус http://myworkpro.ru/

Рад, что понравилось.

43
Владимир http://i-cando.ru/

Спасибо за хороший урок. Наконец сделал нормальную форму feedburner у себя. Правда переделал ее под себя можете взглянуть.

44

Здравствуй Владимир. Код своей формы подписки не скинешь на мой емейл?
С уважением Иван Александрович

Автор45
Александр Рус http://myworkpro.ru/

Напишите ему на его сайте в Обратную связь.

Автор46
Александр Рус http://myworkpro.ru/

Посмотрел, красивее чем у меня получилось 🙂

47
Владимир http://i-cando.ru/

Я старался 🙂

48

Это ты верно пишешь, что неинтересные формы нужно менять - всё привлекательное притягивает к себе больше народа.

Но и перебарщивать не нужно. Главное, чтобы форма была функциональной.

49
Александр Майер http://bloginfo.biz

Давно хочу поменять свой "баннер" с подпиской в конце статей на удобную, и добавить форму еще в сайдбар. Все руки никак не доходят =)

Автор50
Александр Рус http://myworkpro.ru

Не затягивай с этим, если подписчиков хочешь набрать-)

51
Игорь http://blogopraktika.ru/

Да, стандартная форма никуда не годится. Править нужно в любом случае.

Автор52
Александр Рус http://myworkpro.ru

Согласен с Вами Игорь.

53
Александр http://makyshkin.ru

Да, действительно хорошая форма, но можно сделать и красивее, я бы например изменил бы кнопку

Автор54
Александр Рус http://myworkpro.ru

Ну тут уже дело принципов. Каждый может сделать на свой вкус и цвет-) нужно только желание и ФОТОШОП-)

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.
Последние комментарии