Красивая форма подписки 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», отметьте ее на своих социальных страничках. Пока !

https://zvka.ru земельное управление продажа земельных участков.

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

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Слайдер Bootstrap Ken Burns Effect Carousel

Собрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта….