Регистрация    Войти
Авторизация

Создаём форму rss подписки на почтовый ящик для uCoz

Создаём форму rss подписки на почтовый ящик для uCoz

Создаём форму rss подписки на почтовый ящик для uCoz. Всем доброго дня, я уверен, что многие пользователи системы uCoz задумывались о том, как реализовать на своём сайте такую функцию, как rss подписка на почтовый ящик, слава богу за несколько последних лет в интернете появилось множество сервисов и инструкций по их использованию, одним из таких сервисов является всеми известный Feedburner, благодаря которому мы решим данный вопрос касающийся rss подписки на почтовый ящик.

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


Шаг 1 - Установим HTML:

И так для начала заходим в Feedburner => выбираем нужный rss канал который вы создали => выбираем вкладку Публикуй => Подписки по электронной почте => ставим нужный язык => сохраняем и копируем нужный html код:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=center-dm/AimX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="center-dm/AimX" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="Subscribe" />
<p>
Delivered by
<a href="http://feedburner.google.com" target="_blank">FeedBurner</a>
</p>
</form>


У вас должен быть такой же код, но со своим фидом, в моём случае это - center-dm/AimX.

Как многие могли заметить в данном html коде очень много лишнего, дополнительные теги, стили в тегах и т.д, я предлагаю убрать всё ненужное, прописать классы нужным тегам и переименовать кнопку подписки на русский язык.

И так мы с вами имеем готовый html код, с которым мы будем работать в css стилях:

<form class="subscription_email" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=center-dm/AimX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<p>Подписаться на E-Mail:</p>
<input class="rss_fieldn" type="text" name="email"/>
<input type="hidden" value="center-dm/AimX" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input class="rss_button" type="submit" value="Подписаться" />
</form>


Шаг 2 - Установим CSS:

Теперь самое основное, это css стили, которые помогут нам привести форму rss подписки на почтовый ящик в надлежащий вид:

/* Подписка на почтовый ящик 
------------------------------------------*/
.subscription_email {
float:left;
width:400px;
}

.subscription_email p {
margin: 5px 0px;
}

.subscription_email input {
float:left;
font:11px Verdana,Arial,Helvetica, sans-serif;
}

.rss_fieldn {
color:#555;
width:270px;
height:15px;
outline:none;
padding:5px 10px;
border: 1px solid #CAD1DB!important;
border-right:none!important;
}

.rss_fieldn:focus {
box-shadow:inset 0px 0px 3px #ccc!important;
}

.rss_button{
width:100px;
height:27px;
cursor:pointer;
border:1px solid #186F8F!important;
color:#fff!important; text-shadow:1px 1px 1px #186F8F!important;
background: #3CB6E3!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3CB6E3), color-stop(1, #2CA0CA))!important;
background: -moz-linear-gradient(top, #3CB6E3 1%, #2CA0CA 100%)!important;
background: -o-linear-gradient(#3CB6E3, #2CA0CA)!important;
}

.rss_button:active {
box-shadow:inset 0px 0px 3px #0b5a77!important;
}

.rss_button:hover {
background:#50bfe8!important;
}


На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  26-01-2013, 12:28   Просмотров: 2869   

Источник новости: сеntеr-dm.ru

подписки на почтовый ящик для uCoz, ящик для uCoz, Создаём форму rss
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.