Красивая форма подписки FeedBurner

Красивая форма подписки FeedBurner

Здравствуйте дорогие читатели! Последнее время занимался улучшением дизайна своего SEO блога. Даже создал для этого специальную тему на форуме maultalk.com, где мне писали, что нравится, и что не нравится в моём блоге. Исходя из критики людей, дизайн немного изменился, хотя и остался предельно простой. Сегодняшний пост будет в тему улучшения дизайна, а именно – создание красивой формы подписки в сервисе feedburner.

Если кто не в курсе, Feed Burner – это сервис который создаёт RSS ленту и E-mail подписку для Вашего сайта. Так вот, стандартная форма подписки у этого сервиса не очень красивая. Изначально выглядит так

Красивая форма подписки FeedBurner

Количество подписчиков, в какой-то мере зависит и от красоты оформления формы подписки. Да-да это действительно так! Для примера можно взять стандартную форму подписки и ту которую я отредактировал.

Красивая форма подписки FeedBurner

Мне кажется, разница очевидна! Если я Вас убедил, сделать свою форму подписки более красивой, приступим!

Для начала надо зайти в feedburner, далее вкладка «публикуй» и нажать сервис «подписки по электронной почте». Откроется страница от куда нужно скопировать код формы подписки по E-mail, перед тем как скопировать поставьте русский язык для формы. (подробности на скриншоте)

Красивая форма подписки FeedBurner

Итак, у Вас стандартный код формы. Сейчас я расскажу, как его можно изменить.

Делаем красивее кнопку подписки

Ищем строчку:


<em>input type="submit" value="Subscribe"</em>

Изменяем её на кнопку – картинку:


<em><span style="line-height: 1.3em;">input style="width: 120px; height: 21px;" type="image" src="ссылка на кнопку-картинку" </span></em>

Задаём необходимые размеры для кнопки, и указываем ссылку на кнопку – картинку. Например вот моя кнопка которую я использовал.

Красивая форма подписки FeedBurner

Изменяем цвет заливки, цвет и размер рамки вокруг подписки

Ищем строчку:


<em>form style="border:1px solid #ccc;padding:3px;text-align:center;"</em>

Изменяем на:


<em>form style="width:250px; background-color: #E0FFFF; border:3px solid #6495ED; padding:3px; text-align:center;"</em>

Как видно, здесь задаём необходимый размер самого блока подписки (width:250px), цвет формы (background-color:#E0FFFF), размер рамки (border:3px) и её цвет (#6495ED), внутренний отступ (padding:3px), расположение текста (text-align:center).

Добавление надписи «Введите ваш email»

Ищем строчку:


<em>input type="text" style="width:140px" name="email"</em>

Изменяем на:


<em>input rel="nofollow" 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;"</em>

Добавляем надпись «Хотите получать обновление блога на e-mail?»

Ищем строчку:


<em>Enter your email address:</em>

Изменяем на:


<em>Хотите получать обновление блога на e-mail?</em>

Убераем ненужную ссылку FeedBurner:

Удаляем строчку:


<em>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></em>

В принципе это всё что можно изменить в форме подписки FeedBurner. В итоге у Вас должна получиться очень красивая форма для email подписки.

Loading Likes...

МАТЕРИАЛЫ ПО ТЕМЕ

23 Комментариев  —  Развернуть

  1. Я сделал форму подписки по вашим советам, надеюсь читателям она приглянётся! Спасибо за полезный материал 🙂

  2. Я думаю эта форма подписки намного приятнее смотрится нежели стандартная, и пользователям она должна понравится.

  3. Спасибо! Давно искал подобный урок, позаимствовал у вас кнопочку, надеюсь вы не против)

  4. Павел, добрый день! Все сделала, только почему то у меня кнопка не отображается на сайте? Картинка моя находится на files.mail.

  5. Зачем Вам files.mail? Картинку кнопки залейте к себе на хостинг, и всё должно работать 🙂

  6. Павел, я залила ее в папку public_html в формате png. Вставила ссылку, а она все равно не отображается.

  7. Надежда, если всё правильно сделали то должно работать… Смотрите, в Вашем случае ссылка должна быть такая:

    input style=”width: 120px; height: 21px;” type=”image” src=”/имя_карти нки-кнопки.png”

  8. Павел, спасибо! Теперь все работает. Я просто вместо имени картинки вставляла ссылку на нее. В статье же написано ССЫЛКУ, вот я и вставляла ссылку :sigh:

  9. Спасибо за совет, сделала у себя но все получилось. Изменила надпись Subscriber на подписаться. Вот и все, что удалось. Но я хотя бы попыталась. Не проходит и все тут. А остальным удачи… 🙂

  10. Павел, добрый день! А Вы не подскажите, есть ли возможность вставить в эту форму еще одно поле “Ваше имя” для оформления подписки на бесплатные курсы.

    Спасибо за ответ.

  11. дравствуйте Ольга! Для Ваших целей я бы посоветовал использовать сервис – smartresponder.

  12. Здравствуйте! а куда картинку загрузить? и цвет текста как изменить?

  13. Здравствуйте Владимир! Картинку загружайте к себе на хостинг в папку “images”.
    Цвет текста можно сделать так (в данном случае цвет текста будет красным):
    Хотите получать обновление блога на e-mail?

  14. Добрый день, сделал подписку все как у вас. Все работает нормально, но есть маленькое «но»
    Сегодня заметил что на почту приходит не анонс статьи, а вся статья сразу. Получается подписчик получил статью на почту, прочитал там ее и ему нету необходимости заходить на мой сайт. Вы не подскажете как мне быть? может это как то можно исправить?

  15. Здравствуйте! Попробуйте так:

    1. Заходите сюда – feedburner.google.com/fb/a/myfeeds , и выберите Ваш фид.

    2. Нажмите вкладку “Оптимизируй”

    3. Далее активируйте (если он не активирован) сервис “Summary Burner” (находится внизу слева)

    4. Введите количество символов для анонса новости – “Maximum length:”

  16. Здравствуйте,Павел! У меня п 😥 чему-то кнопка не показывается,что я только уже не перепробовала 😥 ! Может посмотрите,в чем дело? Заранее спасибо.

  17. Здравствуйте Ольга! Напишите адрес сайта, помогу Вам…

  18. Здравствуйте!
    Всё бы хорошо, но вот одна загвоздка есть. Если делать что бы отображалось “Введите ваш e-mail” непосредственно в поле, то нужно повторно вводить е маил уже и в открывшемся окне, что не очень удобно для посетителей. Можно ли решить данную проблему?

  19. Спасибо за урок, постараюсь сделать подписную форму по вашему методу, а то моя пока еще простенькая.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *