
Красивая форма подписки в сайдбаре для WordPress.
Здравствуйте, дорогие гости моего блога! С момента написания последней статьи прошло уже много времени (около 2 недель), эх что то я сдал немного свои темпы
Если вы читаете данную статью, значит вы не спроста попали на мой блог. Наверняка в 80% случаях вы искали информацию: «Как украсить стандартную форму подписки от Google?» 🙂 . Да да, все верно! Вы нашли на свой вопрос ответ! Именно в этой статье я опишу все известные для меня приемы и способы, для выполнения вами поставленной задачи.
Итак, приступим!
Вкратце ниже я опишу вопросы которые мы будем разбирать в этой статье:
- Как поменять цвет формы подписки?
- Как изменить размер?
- Как поменять внешний вид кнопки «Подписаться»?
- Как изменить размер и цвет шрифта?
- Как вставить картинку в форму подписки?
- Как поменять размер и цвет рамки?
- Как удалить ссылку из формы подписки.
А теперь по порядку!
Изначально, стандартный код формы подписки от 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"> 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> |
А теперь визуально посмотрим на проделанную нами работу
До | После | |
---|---|---|
Слева стандартная форма подписки от Google. Справа форма после изменения. |
Вот полностью готовый код формы подписки из этой статьи.
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. — Ребят, предлагаю Вам произвести бесплатный обмен ссылками с мои блогом. Подробности читайте здесь «Обмен ссылками«. Надеюсь с Вами на взаимовыгодное сотрудничество!
С Уважением, Александр Рус!
Спасибо за информацию. Но было бы лучше, если бы вы в статье дали полную форму подписки.
Добавил в конце статьи.
Спасибо за отзывчивость.
Да не за что)
Уже все сама сделала. Спасибо за содержательный пост!
Рад был угодить 😉
Тоже не могу разобраться с кнопкой. Нарисовала в фотошопе такую красоту, а она не отображается. Помогите разобраться
Указали бы для приличия ссылочку на Ваш сайт.
Не могу разобраться с кнопкой, она не отображается. Помогите
О, Александр, поздравляю в Яндексе по тематическому запросу на 5м (первой же страницы) месте этот блог!!!
Это хорошо 🙂
Да, feedburnerom уже не так много пользуются даже если сравнивать с прошлым годом. Но для тех, кто ещё использует и форму подписки под него этот мануал будет как нельзя кстати. Все подробно и без лишней воды.
Вроде говорили, что его закроют, а он уж как год назад работал, так и работает.
Где-то в комментах было, что благодаря feedburner гугл быстрее индексируется и для пользователей хорошая защита от спама
Тоже такое читал.
Да, вторая форма подписки конечно красивее, но она очень большая, хотя под статьей нормально будет, а если в сайтбар, то уменьшать надо.
Размеры любые можно подобрать самому, я для примера такую создал)
Спасибо, Александр! Обязательно воспользуюсь. Как раз искала информацию, как поменять свою форму подписки. А тут так подробно и легко все изложено! На следующей неделе собираюсь поменять). Нарисую картинки свои, кнопочку и будет красота!!! Надеюсь, что все получится! 🙂
Для Feedbunder писал, если же вы пользуетесь Smartresponder, то там немного посложнее будет поменять оформление.
Как раз я пользуюсь Feedbunder
Александр, спасибо за подробную статью. У меня тоже неплохая форма подписки на новости блога. Но делала я ее немного по- другому. Теперь попробую сделать так, как у вас написано. Этот вариант меня устраивает. Тем более, что картинку свою сделаю. А то я брала в интернете, а это не есть хорошо.
Попозже зайду в гости, посмотрю, что получилось 😉
Да форма красивая)
Спасибо, немного подправила и своим формы подписок.
Большое спасибо) буду делать..
По чем купил, Саш? Тоже планирую что-то особенное сделать в дизайне у себя на блоге.
Точно не припомню уже, где то около 50$.
Привет Александр, давно у тебя на блоге не был. Дизайн сделал красивый, я то же планирую поменять дизайн своего блога может посоветуешь к кому можно обратиться? А за статью спасибо давно хочу сделать красивую форму подписки.
Привет, Олег купил в интернете готовую прем. тему. Просто вбил в поиске платные темы для wordpress, а потом выбирал)
Спасибо огромное, что делитесь опытом, буду пробовать!
Да это элементарные вещи, почему бы и не помочь)
Еще бы хотелось статью, как вообще создать эту форму подписки) А потом дать ссылку на эту статью, как ее приукрасить.
В статье говорится от куда код подписки берется.
Вообщем стандартный код формы подписки везде дается, не важно какие сервисы вы используете: Google Feedbuner, Madmini и т.д.. Копируете у них этот код и вставляете себе в блог.
Александр, ооочень полезная статья, только не могу понять как и куда вставить этот код в мой блог на blogspot. На feedbuner скопировала, отредактировала, а дальше как? Если не трудно подскажите, пожалуйста.
Там же все просто. Зайдите в редактор блога, выберите Дизайн. В дизайне нажмите справа в колонке добавить виджет, перед вами высветится список виджетов, выберите "Рассылка обновлений по электронной почте", откроется новое окно где необходимо вписать URL своего Feedbuner, сохраняем и все готово.
Ну да, попробуйте поэксперементируйте.
P.S. Оксана, сделайте что бы при нажатии на ваш ник, можно было на ваш блог перейти.
Спасибо! Это все сделала. А чтобы форма была красивая (использовать все ваши советы из этой статьи) нужно в коде править?
А я как обычно все руками, без фотошопа. Ковырялся в коде. Нужно попробовать ваш урок на практике
Можно и без фотошопа, какую нибудь красивую картинку в интернете для формы подписки найти и скопировать)
Статья зачетная, успехов 🙂
Спасибо большое! Кстати блог у Вас обалденно красивый, неприменно в закладки.
Рад, что понравилось.
Спасибо за хороший урок. Наконец сделал нормальную форму feedburner у себя. Правда переделал ее под себя можете взглянуть.
Здравствуй Владимир. Код своей формы подписки не скинешь на мой емейл?
С уважением Иван Александрович
Напишите ему на его сайте в Обратную связь.
Посмотрел, красивее чем у меня получилось 🙂
Я старался 🙂
Это ты верно пишешь, что неинтересные формы нужно менять - всё привлекательное притягивает к себе больше народа.
Но и перебарщивать не нужно. Главное, чтобы форма была функциональной.
Давно хочу поменять свой "баннер" с подпиской в конце статей на удобную, и добавить форму еще в сайдбар. Все руки никак не доходят =)
Не затягивай с этим, если подписчиков хочешь набрать-)
Да, стандартная форма никуда не годится. Править нужно в любом случае.
Согласен с Вами Игорь.
Да, действительно хорошая форма, но можно сделать и красивее, я бы например изменил бы кнопку
Ну тут уже дело принципов. Каждый может сделать на свой вкус и цвет-) нужно только желание и ФОТОШОП-)