В данной статье вы найдете информацию о том, как создать красивую форму подписки Feedburner для WordPress.
О том, как создать форму подписки на обновления сайта я писал в этой статье.
Но стандартный вид получившейся формы оставлял желать лучшего, в чем можете убедиться сами:
Согласитесь, подобный внешний вид не может благоприятствовать привлечению подписчиков вашего сайт.
Именно по этой причине я решил сделать его более привлекательным.
Как сделать красивую форму подписки?
Итак, что нам для этого понадобиться:
- исходный код формы подписки Feedburner.
- нарисовать картинку, которую будем использовать в качестве изображения кнопки.
- нарисовать картинку, которую будем использовать для украшения фона формы подписки.
- провести определенные изменения в исходном коде формы подписки.
Так выглядит краткий план действий. Переходим непосредственно к делу.
Исходный код моей формы подписки выглядит следующим образом:
На самом деле в исходном виде данный код не был разбит по строкам. Это я для удобства представил его именно в таком виде, с переносом каждого характерного фрагмента на новую строку, чтобы в дальнейшем было легче объяснять с какой строкой кода производить те или иные действия.
Также, как я говорил выше, когда обговаривал план действий, нужно заготовить две картинки:
-
- картинку, которую будем использовать в качестве изображения кнопки (я сделал ее размером 200px на 30px):
- картинку, которую будем использовать для украшения фона формы подписки (я сделал ее размером 260px на 200px):
В качестве примера я представил свой вариант картинок. Идем дальше.
Теперь я по порядку опишу действия, которые нужно произвести с исходным кодом формы подписки:
- строка 1 — удаляем конструкцию, которая отвечает за отображение рамки: border:1px solid #ccc; и добавляем конструкцию background-color: #e1f6e8, отвечающую за цвет фона, номер цвета можете заменить на свой.
- строки 4 и 7 трогать не будем.
- строка 2 — заменяем код строки на следующий:
1
<img style="width: 260px; height: 200px;" src="http://expromtom.ru/wp-content/themes/themeone/images/Podpiska.jpg" />строка отвечает за вывод картинки, на которой у меня уже написано предложение подписаться на обновления сайта. Не забудьте предварительно закинуть файл картинки на хостинг и изменить в данном коде путь к данному файлу на свой. Также не забудьте подобрать нужную ширину (width) и высоту (height) вставляемой картинки.
- строка 3 — заменяем код строки на следующий:
1
строка отвечает за оформление поля для ввода email подписчика. Ширину (width) и цвет фона (background-color) нужно подбирать под каждый конкретный случай, в зависимости от темы, думаю это не вызовет затруднения. Также данный код предусматривает вывод в данном поле фразы «Введите ваш email», которая исчезает при установке в него курсора.
- строка 5 — заменяем код строки на следующий:
1
<input style="width: 200px; height: 30px; padding-bottom: 10px;" src="http://expromtom.ru/wp-content/themes/themeone/images/Knopka.jpg" type="image" />не забудьте предварительно закинуть на хостинг файл картинки кнопки, а путь к этому файлу пропишите в данном коде вместо моего.
- строка 6 — удаляем, так как в ее коде сервис Feedburner предусмотрел ссылку на свой сайт, а нам данная ссылка никакой пользы не несет.
После внесения всех указанных изменений код моей формы подписки принял следующий вид:
1 |
Результатом чего явилась вполне красивая форма подписки Feedburner для WordPress:
По сравнению с исходным вариантом стало гораздо лучше, не так ли?
Так что если на вашем сайте до сих пор нет формы подписки или есть, но стандартная, то советую улучшить ее внешний вид проделав этот нехитрый порядок действий. Куда приятнее подписаться на обновления через красивую форму.
Владимир, здравствуйте! Огромное человеческое спасибо!!!!
Сделала на пробу подписку, как описано у Вас. У меня почти все получилось. Единственное, не пойму, откуда взялась рамка вокруг первого рисунка. И почему внизу нет никакого отступа после кнопки «Подписаться» (( Пыталась сама подписаться, и когда ввела адрес и нажала кнопку «подписаться», в появившейся форме почему-то не был указан адрес e-mail автоматически, так и должно быть? Просветите, пожалуйста, по этим вопросам, я пока, к сожалению, еще чайник в этом (((
Заранее большое спасибо!
Здравствуйте, Татьяна!
Очень рад, что моя статья статья оказалась для Вас полезной!
Чтобы убрать рамку вокруг рисунка удалите из первой строчки кода конструкцию border:1px solid #ccc;.
Чтобы добавить отступ после кнопки Подписаться нужно после конструкции < input style="width: 180px; height: 30px;" перед закрывающими кавычками добавить код padding-bottom:10px; где 10 - это величина отступа в пикселах, можете поменять на любое другое число. На счет повторного ввода адреса действительно в коде присутствует ошибка, виноват, нужно в строке 3 заменить код name="s" на name="email". Надеюсь после этого у Вас все будет работать как часы! Если будут еще вопросы, пишите!
Кстати, я внес данные изменения в саму статью.
Ура! Ура! Ура! Владимир, все получилось! Огромное Вам спасибо! И очень приятно, что Вы так быстро откликнулись, сразу видно, что Вы цените своих читателей!
Поэтому я тоже подписалась на Ваш блог, и стану Вашим постоянным читателем.
Но вот в процессе подписки к Вам на сайт у меня снова возник вопрос. Когда я занесла в форму подписки свое имя и email, нажала «Подписаться», у меня возникло симпатичное окошко «Оформление подписки», где говорилось: проверьте почту, и т.д. … А когда я подписывалась к себе на сайт, у меня появилось окно от FeedBurner, где требовалось внести капчу. Конечно же, Ваш вариант выглядит просто отлично по сравнению с тем, что появляется от FeedBurnera. Подскажите, пожалуйста, если не сложно, как что-то подобное можно реализовать? А то стандартный сервис все-таки не так красив, как хотелось бы. Заранее благодарю!
Татьяна, я очень рад, что у Вас все получилось и что Вы подписались на мой блог, надеюсь информация в нем будет для Вас полезной!!!
По поводу отличия в процедуре подписки дело в том, что с недавних пор вместо FeedBurner я стал использовать сервис рассылок JustСlick. Там совершенно другой принцип, и если в FeedBurner рассылка осуществляется автоматически после публикации новой статьи и построена на трансляции RSS фида, то в JustСlick нужно самому формировать каждое письмо, рассылаемое подписчикам. Однако у данного сервиса куча преимуществ, таких как более приятный внешний вид писем, возможность рассылать письма любого нужного содержания, возможность создавать автоматизированные рассылки и т.д. Я пока сам не во всем разобрался 🙂
Именно по этой причине у меня в блоге теперь стоит форма подписки данного сервиса и процедура подписки отличается, как Вы верно и заметили
🙂
Все понятно теперь, Владимир! Тогда я лучше остановлюсь на FeedBurner, мне все-таки больше нравятся сервисы, которые «поставил и забыл» 🙂 Немного смущает только то, что я слышала, Гугл приостанавливает поддержку FeedBurner. Вот потом точно придется искать альтернативу )).
Да, слухи ползут уже давно, но пока все работает. Слышал вроде есть аналоги, правда среди них бесплатные нечасто попадаются, но думаю все будет хорошо, выход всегда найдется 🙂 !
Сделала всё по вашей инструкции! Очень благодарна! Всё красиво и главное — работает!))))
Анна, рад, что моя статья вам помогла!
Еще небольшой совет: в первой строчке кода после background-color: вам нужно вместо #e1f6e8 прописать свой номер цвета (чтобы все было однотонно желтое)!
Владимир, добрый день.
Спасибо за такой понятный пост!
Только вот как сделать форму подписки и кнопку НА фоновой картинке? Чтобы они наслаивались друг на дружку, а не были друг под другом?
И в чем может быть проблема — закинула картинки на хостинг, адрес картинки перепроверяла несколько раз, но на сайте картинки не отображаются…
Заранее Вам большое спасибо!
Здравствуйте, Наталья!
Попробуйте в строке 1 кода вместо background-color: #номер цвета прописать background-image: url(путь к фоновому изображению, к примеру wp-content/uploads/2014/01/krasivaya-forma-podpiski-feedburner-dlya-wordpress_4.jpg)
Только подгоните размер картинки под размер виджета.
На счет неотображающихся картинок: попробуйте почистить файлы cookie.
Надеюсь мои советы помогут, если будут вопросы — пишите!
Владимир, спасибо огромное за статью!
Я только-только в процессе создания блога и много чего пока еще не понимаю 🙂 И ваша пошаговая инструкция мне очень помогла! С заданием справилась ❗ ❗ ❗ Спасибо!!!
Пожалуйста, Светлана, рад что у вас все получилось и моя статья принесла вам пользу!
Желаю вам успехов в создании блога! Если будут вопросы — обращайтесь 🙂 !
Захотелось и мне сделать форму подписки поинтереснее. Перелистала массу статей, пробовала и так, и сяк. Наконец нашла вашу статью и получилось. Пока есть недоработки, но главное — принцип поняла. До ума доведу позже, сейчас уже голова не варит. На радостях хочу сказать вам большое спасибо, Владимир!
Пожалуйста, Елена! Очень приятно, что именно моя статья помогла Вам!
Владимир здравствуйте, помогите пожалуйста с формой. Мне хотелось бы чтобы форма была в рамочке в виде узора, нашла такой узор и сделала белую картинку, а на ней по периметру узор. Прописываю такой код <form style= background-image: ("http://sait.ru/wp-content/uploads/2014/07/0.jpg"); но рамочка не появляется, не могу найти ошибку. Или так не получится сделать и фон нужно однотонный?
Здравствуйте, Марго! Попробуйте после background-image: добавить аргумент url, то есть в вашем случае < form style= background-image: url ("http: // sait.ru / wp-content / uploads / 2014 / 07 / 0.jpg); Если это не поможет, обращайтесь!
Ой, Владимир, вы уберите ссылочку пожалуйста, а то она ведет на несуществующую страницу. Я так тоже делала, еще скобочки пыталась убрать, не было, еще я не поняла как ее размеры подогнать под размер самой формы, в общем запуталась уже. ❓ ❓ ❓
Спасибо, Марго, ссылку убрал 🙂
Чтобы узнать размеры картинки для фона, нужно узнать размеры самой формы, вы правы! Сделать это можно просмотрев исходный код страницы, например в Google Chrome это делается щелчком правой кнопкой мыши по элементу и выбором из контекстного меню пункта «Просмотр кода элемента». Там можно будет выбирая разные контейнеры div просмотреть размеры соответствующих элементов в пикселях. Это как один из наиболее простых вариантов, а вообще вся информация о размерах элементов содержится в файле стилей CSS.
Владимир, в общем я сегодня вас достану, уж сорри. Обратила внимание что все картинки, которые мы вставляли в код, также в коде прописывали из размеры, я не добавляла размеры к фону, может это и есть ошибка? 😯 😥 ❓
Марго, не думаю, что это могло стать причиной, ведь в этом случае картинка вставляется своими исходными размерами.
Надо смотреть код вашей формы подписки, чтобы разобраться. Можете скинуть мне на почту код формы и фоновое изображение, я посмотрю.
Спасибо за пост. Сейчас поколдую и себе что-нить сваяю ❗
Пожалуйста, Александр! Желаю удачи 🙂 !
Володя,спасибо тебе. Получилось отлично. На тестовом поддомене проверял.Пока времени не хватает вникать в суть языка,неделю назад только свой первый блог открыл, инфы новой куча навалилась.Так такие как ты люди и выручают. Еще раз спасибо. ❓
Спасибо на добром слове, Егор 🙂 !
Спасибо Вам! Правда, если поработать с фотошопом, можно еще красивее сделать!)
Владислав, безусловно можно 😉
Владимир, спасибо за статью, все получилось! Удачи!
Пожалуйста, Ринат, рад что все вышло)
Владимир, спасибо. Получилось с первого раза, т.к. у Вас все подробно, по шагам расписано. Скопировала Вашу картинку с конвертом, очень понравилась, оставалось лишь заменить фон в тон своего шаблона. С удовольствием сразу подписалась на Ваш блог.
Еще добавила счетчик в форму. Жаль только, не удается перевести слово «Подписчики» на русский. Вы не подскажете, возможно ли это сделать, не применяя плагины, скрипты и пр.? В коде не могу понять, какой фрагмент отвечает за это. Пытаюсь в Фидбернер, в «feed Count» перевести на русский, включая русский язык в «languages», все равно текст остается на английском.
Пожалуйста, Сауле, очень рад что моя статья Вам помогла и Вы подписались на обновления моего блога 🙂
Слово readers перевести без использования плагинов и скриптов не получится, ведь код, отвечающий за его генерацию, находится на сервере сервиса feedburner. Если честно, то я не знаю даже о том, можно ли это сделать, как Вы сказали, с использованием плагинов и скриптов, никогда не задумывался об этом 😕
Владимир, я прочла на некоторых блогах, что раньше устанавливали с помощью скрипта подписку feedburner, а затем, что эта информация уже неактуальна, т.к. feedburner внес какие-то изменения. И подумала, может, все же есть какой-то способ, о котором я не догадываюсь.
Ну, а раз нет такого волшебного средства, то и не буду терять время на поиски. И так очень нравится, как получилось по Вашему описанию. Спасибо еще раз.
Владимир, не могли бы подсказать, почему при подтверждении подписки по этой форме, которую я сделала по Вашему описанию, отражается обратный адрес (название блога) в таком виде: ;>3 !0C;5 030?>2>9 > 2O70=88
Сначала не заметила этого, а сегодня обратила внимание.
Сауле, я не знаю, почему так происходит, у меня такая же ситуация. Но я не думаю, что это вызвано какой-то ошибкой и вообще в каком-либо смысле критично, так что не стоит переживать по этому поводу.
С Вашего позволения я бы хотел дать пару советов по корректировке внешнего вида Вашей формы подписки, в частности можно заменить цвет фона (прописать background-color: #ff99cb в первой строке кода). Также можно подогнать размер кнопки «Хочу получать!», т.е. в строке 5 размеры прописать следующие: width: 212px; height: 44px;. Правда тогда желательно будет отрисовать кнопку по-новому, иначе она сольется с фоном формы подписки.
Владимир, спасибо Вам за полезные рекомендации! Внесла изменения в форму, сразу стало лучше, когда фон формы стал однородным.
Если не трудно, подскажите, пожалуйста, как можно убрать белый фон вокруг кнопки подтверждения подписки. Никак не могу понять, как это исправить 😕
Честно говоря, я думал что второе действие, описанное мной выше, как раз таки приведет к исчезновению белого пространства вокруг кнопки, оказалось — нет. Чтобы разобраться мне нужно посмотреть код Вашей формы подписки, перешлите, если не сложно, его через форму обратной связи в моем блоге 🙂 .
Спасибо большое, Владимир! Код формы подписки отправила Вам через форму связи.
Владимир, здравствуйте! Статью прочитала с интересом, но меня сейчас накрыла другая проблема — забрела к вам, пытаясь найти решение. Подписка через feedburner вдруг перестала работать — т.е. подписчики прибавляются, но перестали идти рассылки анонсов статей. Вы не сталкивались с подобным? Вдруг подскажете — куда писать, с кем разбираться… 😥
Здравствуйте, Галина!
Причину навскидку сказать крайне сложно, для начала проверьте работоспособность самого RSS фида Вашего блога, который доступен по ссылке вида http: // feeds.feedburner.com / логин_при_регистрации_на_фидбёрнере
Владимир, здравствуйте! Не знаю, похоже, всем все понятно, а я туплю… Но где взять исходный код, чтобы его менять? Я понимаю, что могу внести изменения в предоставленном Вами коде, но куда его потом вставить? 😮 ❓
Ну, точно туплю по полной! Сообразила! Извините! 😳
Ничего страшного))
Здравствуйте,Владимир. Спасибо за форму подписки. Вот что-то не получается убрать рамку вокруг картинки. Не подскажите, что сделать? Картинку планирую поменять.
Здравствуйте, Юрий! Нужно подогнать форму подписки под размеры виджета, в вашем случае размер 212×346. Ну а для этого нужно корректировать код формы подписки.
Спасибо за ответ. Но, Вы не поняли. В сайтбаре у меня стоит подписка со смартреспондера. А после статей стоит фитбернер (Ваша форма). Вот там и рамка не убирается.
Все, понял, я смотрел на главной, а речь шла о форме подписки после статей.
Нужно в файле style.css найти .art-article img, img.art-article и удалить строку border: solid 1px #DBB700;
Спасибо большое, Владимир. Разобрался и настроил под себя. А та строка в файле style.css которую удалил еще за что отвечала? Не навредит ли в дальнейшем?
Пожалуйста, Юрий!
Строка border: solid 1px #DBB700; отвечала как раз лишь только за отображение рамки и ее отсутствие никак не скажется в дальнейшем.
Многие сейчас уходят с фидбирнера на респондер. Как вы можете прокомментировать это Владимир?
Отличная статья, сделала очень красивую форму подписки. Автору спасибо огромное. Прочитала несколько статей на эту тему, ваша оказалась самой доступной для применения в жизни.
Спасибо огромное! Наконец-то у меня нормальная и симпатичная подписка на сайт!
Владимир, добрый день!Пытаюсь сделать подписку на своём блоге, всё сделал, как вы учили, но картинки в итоге не отображаются!Файлы cookie в браузере почистил, ничего не изменилось!
Полезная информация вашего поста просто клад для юзеров — новичков, спасибо большое!
Фид бурнер штука нужная, потому что в Смартреспондере подписчикам требуется отправлять заготовленные письма — рассылки. А это дополнительное время, которого и так не хватает.
А вот интересный вопрос, может что порекомендуете. Если на моём сайте много разных рубрик и я мечтаю под каждую рубрику для подписчика сделать так, чтобы он сам решал, на какой подписке или нескольких остановиться. И, соответственно, получать анонсы только с одной или нескольких рубрик. Это было бы супер для меня. Тогда одним про одно, другим про другое, что просто полезная информация, как и название моего сайта, а другим что то платное и т. д.
Пока, я вижу только разместить от смартреспондера в сайдбаре несколько форм подписки по отдельным рубрикам, но это же …. сами понимаете.
Такие сервисы то есть, но за деньги и не слабо.
Хочу спросить Владимира — как настроить Фид бурнер, чтобы человек сам выбирал, с какой рубрики получать анонсы, а не все подряд?
Добрый день! А где взять картинку? Если можно сбросьте
Огромнейшее спасибо!!! У меня теперь супер картинка!! Все четко, понятно, без лишнего. Вы- молодец, удачи во всем!
Спасибо огромное за статью! Была очень полезна и помогла вывести свою интересную форму подписки.
Пожалуйста, Ерлан!