Изменяем внешний вид формы подписки Feedburner
E-mail подписка – является отличным способом для оповещения об обновлениях вашего блога ваших подписчиков. Вы можете предложить вашим читателям подписаться через сервисы подписок: feedburner, subscribe, smartresponder, specificfeeds и другие. Эти сервисы отличаются друг от друга удобством пользования, функциональными возможностями, поддержкой русского языка, а также некоторые из них являются платными.
Содержание статьи:
Как добавить форму подписки в блог
В этой статье речь пойдет о форме подписки через feedburner, так как этот сервис до сих пор пользуется популярностью среди блоггеров из-за своей простоты и удобства. Вам не придется самостоятельно писать письма подписчикам, рассылка об обновлениях вашего блога будет автоматически рассылаться вашим читателям. Я уже писала о feedburner, если вы не знакомы с сервисом, то как зажечь фид и другие первые шаги по работе с сервисом, у меня описаны в статье “Feedburner – начало работы”.
Если вы ведете блог на Blogger, то вставить форму подписки вы можете через специальный гаджет – читайте подробнее. Для других блогов существует другой способ. Им же можно воспользоваться и для блога Blogspot тоже. Для этого перейдите в настройки фида, кликнув по его названию:
Теперь перейдите во вкладку “Публикуй” –> Подписки по электронной почте –> активировать (кнопка “Activate”–> переведите на русский язык –> скопируйте полученный код и вставьте его в виджет HTML/Javascript (для блога Blogger), в виджет “Текст” (для WordPress). Вы можете также вставить код в сообщение или в новую страницу блога. Для этого следите, чтобы разместить в запись в режиме HTML.
Изменение формы подписки feedburner
Полученный на feedburner код формы нужно обязательно изменить. Во-первых, избавиться от ссылки на фидбернер, т.е. удалить код вида:
<p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>
Во-вторых, руссифицировать. Для этого замените “Enter your email address:” на “Введите ваш e-mail” и кнопку “Subscribe” – на “Подписаться”.
Вы также можете изменить размеры формы подписки, настроив ширину (width) и высоту (height). Добавьте в стили. Пример вставки кода:
<form style="width:350px; height:150px; border:1px solid #ccc;padding:3px;text-align:center;" action="…далее весь код формы подписки… </form>
4 способа изменения подписки feedburner
Рассмотрим 4 способа видоизменения формы подписки feedburner
- Цветной фон формы подписки. Пример
Для того, чтобы сделать цветной фон, добавьте background: #F3DA3F; в код формы после text-align:center;:
<form style="width: 300px; height:140px; border:1px solid #ccc;padding:3px;text-align:center;background: #F3DA3F;"…
- Изменение размеров текстового поля для ввода e-mail:
Изменяем ширину текстового поля: меняем значение width в коде:
<input type="text" style="width:140px" name="email"/>
Регулируем высоту поля для ввода e-mail, добавив height в эту же строку кода:
<input type="text" style="width:240px; height:20px;" name="email"/>
- Добавляем изображение в качестве фона формы подписки. Для этого загружаем изображение, которое будет служить фоном в интернет, берем прямую ссылку на изображение и прописываем следующий код:
background: url(https://www.example.com/image.jpg)
правее text-align:center; в html формы.
Пример:<form style="border:1px solid #ccc;padding:3px;text-align:center;background-image: url(https://www.example.com/image.jpg);"
Не забудьте заменить https://www.example.com/image.jpg на ссылку на ваше изображение. Вам может понадобится выровнять содержимое формы по вертикали. Для этого оберните содержимое формы в div и задайте для него стили выравнивания. Смотрите пример кода ниже. Я выделила цветом добавленный код:
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=my-crib', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="background-image: url(https://2.bp.blogspot.com/-KWZqsb9bHCg/V1Lpz-XN4eI/AAAAAAAATYM/Px1TddpkXNIs8G2XLpVqjU_QB5S50N3ogCLcB/s1600/kak-sdelat-email-rassilky%25281%2529.png); border: 1px solid rgb(204, 204, 204); height: 305px; text-align: center; width: 316px;" target="popupwindow">
<div style="margin: 150px auto;"><b style="background-color: #f4cccc;">Введите свой адрес e-mail:</b><br />
<br />
<input name="email" style="height: 20px; width: 156px;" type="text" /><br /> <br /> <input name="uri" type="hidden" value="my-crib" /><input name="loc" type="hidden" value="ru_RU" /><input type="submit" value="Отправить" /> </div>
</form>В результате получится форма вида:
Добавляя изображение в качестве она, не забудьте прописать для формы подписки размеры изображения. Эти размеры выделены розовым цветом в коде, который приведен выше. - Добавляем текст в текстовое поле для ввода e-mail:
Найдите код в вашей форме вида:
<p>Введите свой e-mail:</p><p><input type="text" style="width:140px" name="email"/></p>
И измените его на этот отрезок кода:
<p><input type="text" style="width:140px" name="email" onblur="if (this.value == '') {this.value = 'Введите свой e-mail';}" onfocus="if (this.value == 'Введите свой e-mail') {this.value = '';}" value="Введите свой e-mail"/></p>
Это не последняя статья про видоизменение форм, подписывайтесь на обновления, и вы узнаете как изменить размеры и цвет кнопки, а также цвет текстового поля, закруглить края и сделать эффекты наведения. Испытайте в действии форму:
input {background: #FEAA25;
border: 1px solid #F59A07;}
Наталья, чё ж в ней (форме) красивого то?) Она вообще не понятная, на мой взгляд. Многие посетители даже не поймут что это именно форма для подписки.
Admin, ну я не имела в виду, что именно эта форма красивая. Если внимательно читать статью, то здесь подробно описано, как видоизменить форму подписки e-mail под ваши нужды.
Ну так у вас заголовок называется "красивая форма…", разве нет? 😉 Лично я ничего красивого в ней не вижу. Она просто не понятная. Статью читал мельком, потому что не заинтересовала форма) Кстати, когда комменты тут сделаете более-менее нормальные? я ж Вам давал стиль хороших комментов. Эти комменты очень неудобные, у них даже нет кнопки ответить на чей-либо конкретный коммент, всё в кучу получается. И некоторые картинки у вас не кликабельные, почему то, во многих статьях замечал, что тоже не удобно — порой картинки маленькие и нет даже возможности их увеличить по клику.
Я не ставлю древовидные комментарии в блог, потому что они дают очень много лишних ссылок, поэтому для моего блога этот стиль не подходит. И по-моему, это мне решать что и как будет в моем блоге.
Решать конечно же вам, спору нет. Я Вам посоветовал как лучше, но вы не прислушиваетесь к советам. Зря) Больше советовать не буду ничего. У вас тут некоторые моменты не удобные в блоге, это я вам говорю как с точки зрения обычного посетителя. Например вот комменты и не кликабельные картинки. Не хотите улучшать юзабилити — дело ваше)
Я кстати сейчас абсолютно новый дизайн блога готовлю. Что-то типа наподобии как у вас тут, но шаблон современнее и навороченее.
С картинками соглашусь, но восстанавливать их нет возможности, так как это пришлось бы все изображения блога заново делать. На будущее учту. На счет комментов — я против древовидных, так как блог просядет в выдаче наверняка, так как ссылок с них невообразимое количество.
Причём тут ссылки вообще — не пойму.. просто стиль комментов меняется и всё. Даже если этот новый стиль комментов увеличивает кол-во внутренних ссылок — то что с того? Каким образом это отразится на выдаче в поисковиках? Поисковики учитывают в основном сам текст статьи, заголовки и description. Короче, у вас какие то заморочки в голове, Наталья, без обид)) Надо стремиться делать блог более юзабилитным и удобным для читателей, а не думать о том, что там несколько новых ссылок прибавится и о том, что картинка станет на несколько Кб больше места занимать если сделать её в хорошем качестве… Эти лишние ссылки и несколько лишних Кб в картинках — никакой роли не играют для поисковиков.
В древовидных комментариях blogger вшито огромное количество скрытых внешних ссылок, которые невозможно закрыть от индексации. Про фильтры ПС слышали? В частности их накладывают и за большое количество внешних ссылок. Юзабилити — это далеко не все в СЕО, к сожалению. Это лишь одна из составляющих.
Блин, какие внешние ссылки ещё?)) Вас этими баснями про ссылки кто-то запугал в своё время и Вы поверили? =) Я только что смотрел исходный код одной из своей статьи с комментами про которые вам говорил, никаких внешних ссылок не вижу в коде в той части где комменты находятся. Некоторые мои статьи с этими комментами на первых позициях в поисковиках держатся, даже иногда выше в поисковой выдаче стоят, чем офиц.сайт производителя техники о которой я пишу.
Что значит — запугал? Я вам уже говорила, что все постигала опытным путем, и с фильтрами ПС знакома не понаслышке. Спасибо, больше не хочу. Вы про АГС знаете и за что он накладывается? За продажу ссылок, это официальная информация Яндекса. На таких сайтах обычно большое количество исходящих ссылок, эти ссылки — с каждой страницы. И никто, поверьте, в ручном порядке не будет проверят — продажные эти ссылки или нет, и письма Платону не помогут.
Засорять свой блог спамом нет желания, это не есть качество. К сожалению, ведение блога на Blogger существенно ограничивает возможности, и автору блога уже решать какую меньшую из двух зол, он выберет.
Я рада за ваши успехи, но это продвижение только за счет контента. Нельзя делать целую теорию на основании одного единственного опыта. Я не говорю, что у меня опыт намного больше, или мое мнение единственно правильное, но я никому его не навязываю. Я не собираюсь для каждого моего читателя перестраивать блог. Это будет бардак. Одно дело — прислушиваться к мнению, учитывать пожелания, а другое — слепо подчиняться.
Красивая форма подписки — будет служить украшением для блога. Можно попробовать изменить текст. Вместо "Введите свой адрес e-mail:", вставить текс:"Подпишись на e-mail рассылку" и неже добавить: "или жди гостей" — шутка!!!
Здравствуйте, Наталья! сделала форму подписки от feedburner, но она не работает пытаюсь подписаться на свой блог появляется следующее сообщение Подача не имеет подписки по электронной почте включена.Подскажите, где могут быть ошибки.
Елена, я попробовала подписаться на вашем блоге на обновления. Появилось сообщение на английском: "The feed does not have subscriptions by email enabled". Это говорит о том, что вы не активировали сервис "Подписки по электронной почте" в разделе "Публикуй". для активации вам нужно зайти в раздел "Публикуй" -> выбрать сервис "Подписки по электронной почте" -> нажать на кнопку "Активировать".
Наталья,добавил background: #F3DA3F,цвет не появился
Игорь, может вы забыли точку с запятой после указания цвета, забыть кавычки или что-то еще? Если хотите знать точно, то скиньте сюда отрезок вашего кода.
Spasibo за форму очень помогла)))
Денис, очень рада была помочь )
Здравствуйте! Подскажите, а как изменить цвет текста над полем ввода емайл? То есть текст "Введите свой емайл адрес" отображается у меня в шаблоне серым цветом, я хочу его сделать белым. Как его поменять?
Сергей, измените строчку кода <b style="background-color: #f4cccc;"> на <b style="background-color: #f4cccc; color:#000000">, где color b будет цветом текста. Цвет текста можете изменить на свой.
Наталья подскажите пожалуйста, как изменить размер кнопки подписаться и переместить всю подписку на правую часть страницы? Спасибо огромное.
Подскажите почему у многих при установке плагина на подписку выходит ошибочное сообщение "The feed does not have subscriptions by email enabled" Адрес фида в плагине прописываем правильно. По ссылке или по коду без плагина подписка срабатывает без проблем.
Влад, извините, что поздно отвечаю. Не было возможности откликнуться раньше. Как вариант, вы можете изменить внешний вид кнопки через идентификатор. Добавьте идентификатор к кнопке:
<input id="fgt" type="submit" value="Подписаться" />
Добавленную часть отметила жирным.
Теперь пропишите дополнительный код, изменив или размеры кнопки (width и height или создав отступы padding). Пример:
<style>#fgt {
width: 300px;
font-size: 13px;
padding: 6px 0 4px 10px;
border: 1px solid #cecece;
background: #b6b;
border-radius: 8px;
}
</style>
Влад, может быть вы не активировали подписку по e-mail во вкладке "Публикуй"