Подарок
Приветствую Вас Гость RSS
Работа в интернете и финансовая свобода
Построй свой путь к финансовой свободе!
  • 1.jpg
    Школа веб-дизайна Юлии Первушиной
    - Четыре базовых курса, чтобы стать профи
    - Персональный куратор
    - Домашние задания
    - Гарантия дохода от 30 тыс.руб/мес и выше
    Подробнее
  • 2.jpg
    Секреты практического SEO
    Скидка 13%
    Думаю, Вам не нужно объяснять, насколько важно для Вашего сайта иметь первые позиции в поисковых системах по ключевым для Вас запросам.
    Подробнее
  • 3.jpg
    Акции, скидки, распродажи, купоны, возврат за покупку от 7% до 15%!
    И все от AliExpress!

    Узнать подробнее
  • 4.jpg
    Облачный майнинг Hashflare

    Зарабатывайте криптовалюту на удаленном использовании вычислительных мощностей >>


    Узнать подробнее
  • 5.jpg
    - БЕСПЛАТНАЯ 10 дневная бизнес игра
    - Автоматизация бизнеса
    - Бизнес инструменты
    >> Узнать подробнее

ВАШ ПОДАРОК

Ваша информация защищена на 100%! Гарантированная защита от СПАМа!


Давайте дружить;)



Скрипты [8]Макеты сайта и его составляющие [2]

Программы и обучалки » Скрипты для сайта » Скрипты » Оформление формы подписки RSS для Feedburner


Оформление формы подписки RSS для Feedburner

01.03.2014, 13:56

Здравствуйте, сегодня мы с Вами оформим форму подписки RSS Ваших новостей в feedburner. Итак, приступим.

Интернет бизнесШаг 1. Заранее создайте иконку с логотипом RSS-канала и залейте себе на сервер. Разрешение не должно превышать разрешение блока веб-сайта, обычно это значение равно 200 px(пикселей). Оптимальным вариантом будет разрешение: 125x125 px(пикселей); 64x64px(пикселей). Меньше делать не нужно. Расширение лучше использовать в "PNG"- либо в "JPG"-формате, чтобы он очно подходил к косметическому дизайну веб-сайта. Какой выбрать стиль иконке – на своё усмотрение.

Шаг 2.Заходим в Feedburner -> RSS канал, который Вы создали -> Публикуй -> Подписки по электронной почте->Subscription Managment


Здесь нам предлагается два кода: код формы подписки и код ссылки на форму подписки. Прежде чем копировать этот код, следует выбрать язык. Сделать это можно в выпадающем списке в опции "Language".


Формы с кодами тут же обновятся. Теперь внимательно смотрим на код формы подписки (1-е поле).

Код

<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=fastzar', '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="fastzar" 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>


У Вас должен быть такой же код, но со своим фидом, в моём случае это – fastzar.

Форму можно изменять как Вам угодно, в смысле дизайна. Вот мы его и изменим.

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

Шаг 3.Скопируйте нижеприведенный код на отдельную страницу сайта, где будет располагаться форма подписки.

Код

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


И так мы с Вами имеем готовый html код, с которым мы будем работать в css стилях. Но для начала замените выделенное красным на свой фид и измените цвет надписей.

Шаг 4.Установим CSS. Теперь самое основное, это css стили, которые помогут нам привести форму rss подписки на почтовый ящик в надлежащий вид. Скопируйте нижеприведенный код CSS в файл таблицы стилей (с расширением *.css).

Код

/* Подписка на почтовый ящик
------------------------------------------*/
.subscription_email {
float:left;
width:300px;
}
.subscription_email p {
margin: 5px 0px;
}
.subscription_email input {
float:left;
font:11px Verdana,Arial,Helvetica, sans-serif;
}
.rss_fieldn {
color:#555;
width:200px;
height:27px;
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;
}

Если Вы разбираетесь в html и css, то без труда можете изменить дизайн на свой вкус!

Шаг 5.Создание ссылки RSS на Вашу форму подписки. В 1 шаге Вы выбрали картинку с логотипом RSS. Теперь эту картинку привяжем к Вашей форме подписки. Для этого копируем к себе в блокнот:


<a target="blank_" href="">
<img title="Новости" src=" " width="32"></a>

В первую строчку копируем URL Вашей страницы. Во 2-ю URL Вашей картинки.

Должно получиться вот что:


<a target="blank_" href="http://sitename.ru/podpiska/index.html">
<img title="Новости" src="http://sitename.ru/RSS/rss.png" width="32"></a>

Параметр width можно опустить, если хотите чтоб размер картинки был по умолчанию.

Все кнопка готова, копируйте код кнопки к себе на страницу сайта.

Как получать новости с блогов через минуту после публикации? Полезная программа-читалка новостей по RSS: RSS FAST>>



Источник:  не указан
Категория: Скрипты | Теги: Скрипты
Просмотров: 2115 | Загрузок: 0

Похожие материалы:


    Как установить боковую панель социальных закладок?

    Как установить боковую панель социальных закл

    ЧИТАТЬ
    Как установить боковую панель социальных закладок?

    Как установить боковую панель социальных закладок?

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

    Подробнее >>


    Для чего нужны мета-теги?

    Для чего нужны мета-теги?

    ЧИТАТЬ
    Для чего нужны мета-теги?

    Для чего нужны мета-теги?

    Мета-теги – специальные, необязательные атрибуты, предназначенные сугубо для поисковых систем. Размещаются мета-теги непосредственно после «Title» в секции <head> могут содержать в себе описание страницы, ключевые слова, запрет/разрешение на индексацию

    Подробнее >>


    Как создать RSS-ленту для сайта?

    Как создать RSS-ленту для сайта?

    ЧИТАТЬ
    Как создать RSS-ленту для сайта?

    Как создать RSS-ленту для сайта?

    На многих движках уже есть встроенные RSS-ленты, осталось их только настроить и добавить в FeedBurner. А как добавить ленту и настроить FeedBurner читайте в статье: Подробнее >>


    Как установить кнопки социальных сетей на сайт?

    Как установить кнопки социальных сетей на сай

    ЧИТАТЬ
    Как установить кнопки социальных сетей на сайт?

    Как установить кнопки социальных сетей на сайт?

    Здравствуйте! Сегодня для Вас очередной интересный скрипт с блоком добавления странички материала в социальные сети для сайта, в котором используется язык HTML. На картинке видно что у Нас должно в итоге получится! Не забываем писать комментарии и вступать в наши группы в социаль

    Подробнее >>








Поделись с друзьями:



Уважаемые пользователи! Если Вы используете информацию с сайта, пожалуйста, ставьте ссылку на источник!


Читайте также:

200 бесплатных сервисов для онлайн-бизнеса
Работа фрилансерам и копирайтерам
Как заработать на файлобменниках?
Партнерские программы инфопродуктов
Самостоятельная раскрутка сайта с нуля
Лучшие сервисы по добыче Биткоина




Загрузка...


Если Вы нашли битую ссылку, пожалуйста, отпишите в комментарии!


Оставить комментарии:


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]





нет аватара




ОБ АВТОРЕ
TELEGRAM
FACEBOOK
ВКонтакте
МОЙ YOUTUBE
Я В INSTAGRAM
ПОЛУЧАТЬ НОВОСТИ САЙТА
RSS



Подписаться на E-mail:



Давайте дружить;)

РЕКОМЕНДУЮ





Купон: 3G1A10
Кнопка сайта
Если Вам понравился данный материал, то можете рекомендовать его своим посетителям. Если Вы хотите обменяться с баннерами, пишите в форме Обратной Связи.

Работа в интернете и финансовая свобода

Код баннера
<a target="_blank" href="https://fastzar.ru" alt="Работа в интернете и финансовая свобода" title="Сайт Fastzar"><img src="https://fastzar.ru/baner/banner88x31.gif" alt="Работа в интернете и финансовая свобода"></a>
Для добавления сообщения авторизуйтесь

Узнайте все секреты построения успешного бизнеса
на партнерских программах!


Что Вы получите:

бесплатные уроки по созданию собственной системы продаж
список партнерских программ для бизнеса и необходимых сервисов
первый доход в Интернете

Что Вы узнаете:

Как Вам запустить Ваш Интернет-проект, даже если Вы новичок?
Как Вам гарантированно заработать Ваш первый чек через Интернет?
Как масштабировать Ваш бизнес в интернет для увеличения прибыли?
Помогу с автоматизацией продвижения Вашего бизнеса в интернет



Чтобы получить PDF-книгу, Просто введите Ваше Имя и E-mail в форму ниже и подтвердите свой e-mail, ссылка на скачивание будет выслана сразу же в письме.

Ваша информация защищена на 100%! Гарантированная защита от СПАМа!

Оставить отзыв