На главную Блог проекта +9 Сообщество +13 Новые посты Мини-новости Люди
Купить ссылку здесь
(Цена: 5 руб)


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

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

Как настроить Feedburner

Cчетчик Feedburner и подписка по E-mail

Установка
Шаг 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;  
}

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



Всего 0 комментариев и 359 просмотров
Готовые решения по Графика, JavaScript, (x)HTML, CSS, PHP советы и ошибки при создании сайта или блога, партфолио и других сайтов узнать, что такое юзабилити и как его применять на своём сайте, и просто интересный материал для вашего сайта, уни собраны самые уникальные материалы и разработки от многих известных авторов