2016-06-04

Textual description of firstImageUrl

Изменяем внешний вид формы подписки 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
  1. Цветной фон формы подписки. Пример
    Для того, чтобы сделать цветной фон, добавьте background: #F3DA3F; в код формы после text-align:center;:
    <form style="width: 300px; height:140px; border:1px solid #ccc;padding:3px;text-align:center;background: #F3DA3F;"…
  2. Изменение размеров текстового поля для ввода e-mail:
    изменить размер текстового поля textarea
    Изменяем ширину текстового поля: меняем значение width в коде:
    <input type="text" style="width:140px" name="email"/>
    Регулируем высоту поля для ввода e-mail, добавив height в эту же строку кода:
    <input type="text" style="width:240px; height:20px;" name="email"/>
  3. Добавляем изображение в качестве фона формы подписки. Для этого загружаем изображение, которое будет служить фоном в интернет, берем прямую ссылку на изображение и прописываем следующий код:
    background: url(http://www.example.com/image.jpg)

    правее text-align:center; в html формы.
    Пример:
    <form style="border:1px solid #ccc;padding:3px;text-align:center;background-image: url(http://www.example.com/image.jpg);"
    Не забудьте заменить http://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/s320/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>
    В результате получится форма вида:
    форма подписки с фоном изображением
    Добавляя изображение в качестве она, не забудьте прописать для формы подписки размеры изображения. Эти размеры выделены розовым цветом в коде, который приведен выше.
  4. Добавляем текст в текстовое поле для ввода 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>
Это не последняя статья про видоизменение форм, подписывайтесь на обновления, и вы узнаете как изменить размеры и цвет кнопки, а также цвет текстового поля, закруглить края и сделать эффекты наведения. Испытайте в действии форму:


Введите свой адрес e-mail:



19 комментариев :

-Аdmin- комментирует...

Наталья, чё ж в ней (форме) красивого то?) Она вообще не понятная, на мой взгляд. Многие посетители даже не поймут что это именно форма для подписки.

Иванова Наталья комментирует...

Admin, ну я не имела в виду, что именно эта форма красивая. Если внимательно читать статью, то здесь подробно описано, как видоизменить форму подписки e-mail под ваши нужды.

-Аdmin- комментирует...

Ну так у вас заголовок называется "красивая форма...", разве нет? ;) Лично я ничего красивого в ней не вижу. Она просто не понятная. Статью читал мельком, потому что не заинтересовала форма) Кстати, когда комменты тут сделаете более-менее нормальные? я ж Вам давал стиль хороших комментов. Эти комменты очень неудобные, у них даже нет кнопки ответить на чей-либо конкретный коммент, всё в кучу получается. И некоторые картинки у вас не кликабельные, почему то, во многих статьях замечал, что тоже не удобно - порой картинки маленькие и нет даже возможности их увеличить по клику.

Иванова Наталья комментирует...

Я не ставлю древовидные комментарии в блог, потому что они дают очень много лишних ссылок, поэтому для моего блога этот стиль не подходит. И по-моему, это мне решать что и как будет в моем блоге.

-Аdmin- комментирует...

Решать конечно же вам, спору нет. Я Вам посоветовал как лучше, но вы не прислушиваетесь к советам. Зря) Больше советовать не буду ничего. У вас тут некоторые моменты не удобные в блоге, это я вам говорю как с точки зрения обычного посетителя. Например вот комменты и не кликабельные картинки. Не хотите улучшать юзабилити - дело ваше)
Я кстати сейчас абсолютно новый дизайн блога готовлю. Что-то типа наподобии как у вас тут, но шаблон современнее и навороченее.

Иванова Наталья комментирует...

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

-Аdmin- комментирует...

Причём тут ссылки вообще - не пойму.. просто стиль комментов меняется и всё. Даже если этот новый стиль комментов увеличивает кол-во внутренних ссылок - то что с того? Каким образом это отразится на выдаче в поисковиках? Поисковики учитывают в основном сам текст статьи, заголовки и description. Короче, у вас какие то заморочки в голове, Наталья, без обид)) Надо стремиться делать блог более юзабилитным и удобным для читателей, а не думать о том, что там несколько новых ссылок прибавится и о том, что картинка станет на несколько Кб больше места занимать если сделать её в хорошем качестве... Эти лишние ссылки и несколько лишних Кб в картинках - никакой роли не играют для поисковиков.

Иванова Наталья комментирует...

В древовидных комментариях blogger вшито огромное количество скрытых внешних ссылок, которые невозможно закрыть от индексации. Про фильтры ПС слышали? В частности их накладывают и за большое количество внешних ссылок. Юзабилити - это далеко не все в СЕО, к сожалению. Это лишь одна из составляющих.

-Аdmin- комментирует...

Блин, какие внешние ссылки ещё?)) Вас этими баснями про ссылки кто-то запугал в своё время и Вы поверили? =) Я только что смотрел исходный код одной из своей статьи с комментами про которые вам говорил, никаких внешних ссылок не вижу в коде в той части где комменты находятся. Некоторые мои статьи с этими комментами на первых позициях в поисковиках держатся, даже иногда выше в поисковой выдаче стоят, чем офиц.сайт производителя техники о которой я пишу.

Иванова Наталья комментирует...

Что значит - запугал? Я вам уже говорила, что все постигала опытным путем, и с фильтрами ПС знакома не понаслышке. Спасибо, больше не хочу. Вы про АГС знаете и за что он накладывается? За продажу ссылок, это официальная информация Яндекса. На таких сайтах обычно большое количество исходящих ссылок, эти ссылки - с каждой страницы. И никто, поверьте, в ручном порядке не будет проверят - продажные эти ссылки или нет, и письма Платону не помогут.
Засорять свой блог спамом нет желания, это не есть качество. К сожалению, ведение блога на Blogger существенно ограничивает возможности, и автору блога уже решать какую меньшую из двух зол, он выберет.
Я рада за ваши успехи, но это продвижение только за счет контента. Нельзя делать целую теорию на основании одного единственного опыта. Я не говорю, что у меня опыт намного больше, или мое мнение единственно правильное, но я никому его не навязываю. Я не собираюсь для каждого моего читателя перестраивать блог. Это будет бардак. Одно дело - прислушиваться к мнению, учитывать пожелания, а другое - слепо подчиняться.

Victor Pobedonoschev комментирует...

Красивая форма подписки - будет служить украшением для блога. Можно попробовать изменить текст. Вместо "Введите свой адрес 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 будет цветом текста. Цвет текста можете изменить на свой.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности