Доброго времени суток, уважаемый посетитель сайта Webik-Diz! Ты находишься на сайте, на котором сможешь скачать действительно качественные шаблоны. Помимо обычных дизайнов, на сайте есть огромный архив наших авторских рипов, множество красивейших макетов, уникальных версток и адаптаций. Мы стараемся помочь пользователю найти шаблон для сайта, а также помочь в освоении системы uCoz. Оставайтесь со StuDRippo и будьте в курсе всех последних поступлений на сайте!
Главная страница » Архив материалов » Другое » Создаём форму rss подписки ...
Создаём форму rss подписки на почтовый ящик для uCoz
20.04.2013
Создаём форму rss подписки на почтовый ящик для uCoz
Скриншот материала «Создаём форму rss подписки на почтовый ящик для uCoz»
Нажмите, чтобы увеличить
  • Просмотров: 811
  • Скачиваний: 206
  • Комментариев: 0
  • от Nikola
Так как в интернете уже расписаны многие нюансы по работе с данным сервисом, я не буду тратить своё время на повторную писанину, а начну с улучшения кода формы rss подписки на почтовый ящик, для тех кто столкнулся с данной системой впервые, советую прочитать следующие инструкции:

Как настроить Feedburner
Cчетчик Feedburner и подписка по E-mail

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

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 стилях:

HTML
Код
<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 подписки на почтовый ящик в надлежащий вид:

CSS-Code
Код
/* Подписка на почтовый ящик  
------------------------------------------*/  
.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;  
}

На этом всё, спасибо за внимание!
Если у Вас всё же остались вопросы, ответы на которые Вы не нашли, воспользуйтесь Обратной связью, либо напишите Администратору или Модератору персональное сообщение с описанием проблемы.
    В комментариях запрещено:
  • Писать сообщение прописными буквами (Caps Lock).
  • Рекламировать какие-либо сайты.
  • Использовать более двух смайлов в одном комментарии.
  • Оскорблять пользователей сайта.
  • Выражаться некультурными словами.
Чат
Цена: 2 руб.
Витрина ссылок
Поставить к себе на сайт
Купить ссылку здесь
Реклама
Люди говорят
Nikola оставил отзыв:
Оставляйте отзывы и пожелания в гостевой книге. Нам важно, что вы думаете!
+0 Все отзывы