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


Сегодня я решил обновить форму подписки на своем сайте. Думаю, что красивая форма подписки feedburner привлекает внимание посетителей и может увеличить число подписчиков любого блога. Естественно качественный и правильно подобранный контент еще никто не отменял, но как дополнение, как способ немного приукрасить сайт, такая красивая форма подписки вполне подойдет.

Сделал себе и решил опубликовать об этом статью, хотя таких публикаций в интернете уже достаточно много. Правда авторы интернет страничек предлагают похожие друг на друга формы. Такое впечатление, что один — два человека написали код этих красивых форм подписки feedburner, а другие просто взяли себе на заметку и после опубликовали. Я понимаю там какой-то код, предназначенный для расширения функционала сайта, но насчет формы уж можно было пофантазировать и сделать что-то свое.

Итак, давайте сделаем свою красивую форму feedburner. Для начала нужно, конечно взять исходник формы и посмотреть, что можно оттуда убрать, а что и добавить.

Вот исходник, просто для сравнения :

 <form style="border: 1px solid #ccc; padding: 3px; text-align: center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">Enter your email address:
<input style="width: 140px;" name="email" type="text" />
<input name="uri" type="hidden" value="filwebs/podpiska" /> <input name="loc" type="hidden" value="ru_RU" /> <input type="submit" value="Subscribe" />
</form>

Я из него убрал последнюю строчку со ссылкой на feedburner и добавил свои классы стилей для некоторых элементов. И вот какой код в итоге у меня получился :

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

 <div class="botton_body">
<div class="stitched">Свежие статьи блога на e-mail :</div>
<form class="feedberner" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">Введите свой e-mail адрес :
<input class="e_mail" name="email" type="text" />
<input name="uri" type="hidden" value="filwebs/podpiska" /> <input name="loc" type="hidden" value="ru_RU" /> <input class="bottom111" type="submit" value="подписаться" />
</form></div>

Если эта форма вам понравилась, то возьмите этот код и просто поставьте свои ссылки на feedburner в код, а именно в те места, которые указаны на скриншоте.

После этих нехитрых изменений добавьте полученный код в текстовый виджет и найдите ему подходящее место в сайдбаре.
Эта форма подписки рассчитана на сайдбар, но можно поставить ее и в пост. Только нужно будет немного подправить CSS.

Но это еще не все, нужно скачать файл с фонами, которые используются в этой форме. В папке находятся две картинки — текстура кожи. И закиньте их себе на хостинг, или сервер, это одно и то-же и запишите путь к этим картинкам. Кто не знает как прописать путь к папке, файлу, вот статья.

Cкачать архив с Яндекс Диска

И в завершении установки красивой формы подписки feedburner, нужно скопировать код CSS, прописать свой путь к картинкам и уже со своими URL к картинкам, измененный кусок кода добавить в окончание файла style.css

Код CSS

/* ---- feedberner skin ------ */
.stitched {
padding: 5px;
margin: 0 auto;
margin-bottom: 10px;
background-image: url(/images/skin_black.jpg);
background-color: #77482c;
color: #fff;
font-size: 15px;
font-weight: bold;
text-align: center;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 0px #77482c, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}
.botton_body {
background-image: url(/images/skin_grey.jpg);
background-color: #77482c;
border-radius: 10px;
margin: 0 auto;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 0 0px #77482c, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
border: 2px solid #fff;
}
.feedberner {
border:1px solid #ccc;
padding-top :5px;
padding-bottom :10px;
text-align:center;
background-image: url(/images/skin_black.jpg);
background-color: #77482c;
color: #fff;
font-size: 13px;
font-weight: bold;
text-align: center;
line-height: 1.3em;
border-bottom: 2px dashed #fff;
border-right: 2px dashed #fff;
border-left: 2px dashed #fff;
border-top: none;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
box-shadow: 0 0 0 0px #77482c, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}
.bottom111 {
background-color: #77482c;
cursor: pointer;
border: 2px solid #3a2416;
color: rgb(230, 230, 230);
font-size: 15px;
text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
background: rgb(106, 70, 40);
background: -moz-linear-gradient(90deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
background: -webkit-linear-gradient(90deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
background: -o-linear-gradient(90deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
background: -ms-linear-gradient(90deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
background: linear-gradient(0deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
-webkit-box-shadow: 0px 3px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 9px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 9px rgba(50, 50, 50, 0.75);
}
.e_mail {
color: #000000;
width:180px;
height: 18px;
font-size: 12px;
}

Вот еще одна форма, принцип остался тот-же, немного изменен CSS код :

Cама форма :

 <div class="botton_body1">
<div class="stitched1">Свежие статьи на e-mail :</div>
<form class="feedberner1" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">Введите свой e-mail адрес :
<input class="e_mail1" name="email" type="text" />
<input name="uri" type="hidden" value="filwebs/podpiska" /><input name="loc" type="hidden" value="ru_RU" /><input class="bottom1111" type="submit" value="подписаться" />
</form></div>

CSS :

/* ---- feedberner skin ------ */
.stitched1 {
padding: 5px;
margin: 0 auto;
margin-bottom: 10px;
background-image: url(/meshok.jpg);
background-color: #77482c;
color: #352d02;
font-size: 17px;
font-weight: bold;
text-align: center;
line-height: 1.3em;
border: 2px dashed #352d02;
border-radius: 10px;
box-shadow: 0 0 0 0px #77482c, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #000000;
font-weight: normal;
}
.botton_body1 {
background-image: url(/oboi.gif);
background-color: #77482c;
border-radius: 10px;
margin: 0 auto;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 0 0px #77482c, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
border: 2px solid #fff;
}
.feedberner1 {
border:1px solid #ccc;
padding-top :5px;
padding-bottom :10px;
text-align:center;
background-image: url/meshok.jpg);
background-color: #77482c;
color: #352d02;
font-size: 13px;
font-weight: bold;
text-align: center;
line-height: 1.3em;
border-bottom: 2px dashed #856f05;
border-right: 2px dashed #856f05;
border-left: 2px dashed #856f05;
border-top: none;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
box-shadow: 0 0 0 0px #77482c, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #000000;
font-weight: normal;
}
.bottom1111 {
background-color: #77482c;
cursor: pointer;
border: 2px solid #3a2416;
color: rgb(230, 230, 230);
font-size: 15px;
text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
background: rgb(106, 70, 40);
background: -moz-linear-gradient(90deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
background: -webkit-linear-gradient(90deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
background: -o-linear-gradient(90deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
background: -ms-linear-gradient(90deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
background: linear-gradient(0deg, rgb(106, 70, 40) 30%, rgb(189, 131, 83) 70%);
-webkit-box-shadow: 0px 3px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 9px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 9px rgba(50, 50, 50, 0.75);
}
.e_mail1 {
color: #000000;
width:180px;
height: 18px;
font-size: 12px;
}

А вот к ней фоны :

Cкачать архив с Яндекс Диска

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

На этом пока все, хотел еще написать форму в «джинсовом» стиле, но нет пока время. Позже к этому вопросу вернусь. Ну и напоследок : Кому понравилась статья «Красивая форма подписки feedburner», отметьте ее на своих социальных страничках. Пока !

Ковры с логотипом придверные коврики с логотипом.


Похожие по Тегам статьи


16 thoughts on “Красивая форма подписки FeedBurner

  1. Максим

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

    1. Егор Автор записи

      Вам, наверное, нужно делать просто под цвета сайта.

  2. Сергей

    Я тоже в будущем планирую преукрасить форму подписки. Но сейчас пока не до нее. Поэтому пока по простому вывожу.

    1. Егор Автор записи

      Копируйте код, просто заменяйте картинки, можно подобрать совсем маленькие по размеру, бесшовные и замените. И Все =) а можно вместо картинок на чистом CSS на генераторе подобрать background c градиентами, например и так-же внедрить в код. В коде уже прописан background-color, его можно заменить. Вообще, как макет можно использовать, что-бы не писать код заново.

  3. Александр+Белый

    У себя уже сделал. Немного ранее Ваш пост был бы то, что надо

  4. Татьяна

    Здравствуйте, Егор! Хочу у себя шаблон сменить и попробую воспользоваться вашей статьей, надеюсь у меня все получится.

    1. Егор Автор записи

      Здравствуйте Татьяна. Все у вас получится. И почему, собственно, не должно получиться? Если что пишите.

      1. Татьяна

        Хорошо, если что буду надоедать с вопросами =)

          1. Егор Автор записи

            Я с удовольствием постараюсь в чем-то вам помочь.

    2. Егор Автор записи

      Я сейчас к вам заходил на сайт. Единственное, что вам придется самую малость поправлять каждую статью вручную. Вы, наверное, уже смотрели, как будет выглядеть обновленный сайт?
      И статей у вас не много. Я свой обновил за пару вечеров. Первым делом поправил статьи, а потом уже устранил остальные недочеты.
      За-то теперь голова не болит.

  5. Андрей Зимин

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

    1. Егор Автор записи

      Пожалуйста, Андрей. Да это и не урок, а просто делюсь своими наработками