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

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

Если вы читаете данную статью, значит вы не спроста попали на мой блог. Наверняка в 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>

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

До		После
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. — Ребят, предлагаю Вам произвести бесплатный обмен ссылками с мои блогом. Подробности читайте здесь «Обмен ссылками«.  Надеюсь с Вами на взаимовыгодное сотрудничество!

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

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

Как ускорить работу блога на WordPress.

Добрый вечер! В последнее время я стал замечать, что скорость загрузки страниц на моем блоге стала очень медленная. Меня это стало сильно напрягать и я ...

Зеркало сайта — что это такое и для чего создается

Всем привет! В последнее время меня все чаще хочется сменить доменное имя для своего блога. Но из-за того, что он уже немного раскручин и ...

Как исправить ошибку в RSS — ленты.

Наверное многие сталкивались с одной из распространенных ошибок в RSS - ленты.  У меня эта ошибка появилась из-за использования плагина SuperCache -  ускоряет загрузку страниц на ...

2. Регистрация домена.

Итак, в прошлом уроке я описывал, с чего надо начинать создание сайта. Если вы читаете эту статью, значит у вас уже есть хостинг и ...

Хостинг для сайтов.

Почему я выбрал Beget? Как понять, стоит ли менять хостинг? Как зарегистрироваться на Beget? Как перенести сайт на хостинг Beget? Партнерская программа. Установка любой CMS за 5 минут. Один из ...

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.