Как установить красивую форму подписки rss на блог

Приветствую Вас на своем блоге!
В этой статье я решил показать и объяснить, как установить красивую форму подписки rss на блог, чтобы придать своему сайту уникальность и сделать его более привлекательным внешне.
Эта тема подойдет не только для сайтов на WordPress, но и для других движков, так как код RSS не будет отличаться друг от друга на разных движках, да и файл *.css работает по единому правилу для всех движков.

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

Здесь я рассмотрю два варианта, как можно установить красивую форму подписки rss на блог, простой и более сложный.
Красивых форм для подписки в сети много, на любой вкус, так что выбирайте то, что вам нравится и устанавливайте ее на свой блог. Особенно это относится к универсальным шаблонам общего пользования, так как придание ему уникальности, это отдельная тема для статьи.

Самый простой способ сделать форму подписки уникальной, это поставить в качестве фона красивое изображение.
Вы устанавливаете стандартную форму, заключаете ее в div блок и фоном для этого блока устанавливаете картинку.

Например так:

Этот код в виджет или файл шаблона:

Этот код в файл css:

В результате этого у вас будет форма примерно такого вида:

Как установить красивую форму подписки на блог

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

Вот пример готовых форм для подписки, которые я установил на разные сайты:

Как установить красивую форму подписки на блог

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

При установке новой формы, следуйте последовательно, подгоняя каждый элемент по порядку:
1. Основная форма.
2. Форма ввода данных.
3. Кнопка подписки.

Как установить красивую форму подписки на блог

На картинке все наглядно изображено.

Теперь от теории перейдем к практике, а точнее к самому коду, который и нужно будет редактировать.
Сначала нужно будет изменить стандартный код формы подписки сервиса feedburner.
Ниже на картинке я показал, как его нужно изменить.

Как установить красивую форму подписки  на блог

То, что выделено красным, то удаляете, то что зеленым, то дописываете.
Обратите внимание, если вы будете устанавливать свою кнопку, то надпись “Подписаться”, или что у вас там будет написано, нужно будет удалить и оставить просто кавычки.

Вот код rss, только адрес своего фида не забудьте поставить.

Далее добавьте код css в шаблон своего сайта.

Только учтите, что это только начальный шаблон кода, который нужно будет изменять и подгонять форму по месту на сайте.
Как я уже говорил, начинайте подгонять по порядку кода, сверху вниз.
Все названия файлов замените на свои, цвета и оформление сделайте по своему вкусу.

Обязательно проверьте, как смотрится ваша форма в разных браузерах, это избавит вас от неправильной настройки формы. Например Mozilla и Chrome могут по разному показывать вашу форму, ну это только в том случае, когда вы не правильно установите параметры в файле css.
Надеюсь, что эта статья вам поможет сделать ваш блог более красивым и уникальным.

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

Если вы хотите отказаться от получения рассылки rss с какого либо блога, то прочитав эту статью, вы узнаете, как это сделать.

И под конец самое сладкое…

Конкурс комментаторов

Удачи!

С уважением Юрий Хрипачев.

Поделитесь с друзьями в социальных сетях!


Если вам понравился сайт, тут Вы можете подписаться на обновления блога.

Введите свой e-mail адрес:

Обсуждение: оставлено 40 коммент.
  1. Денис:
    http://in4wp.ru

    А где результаты конкурса комментаторов? :)

    • Юрий Хрипачев:

      А в статье разве не видно?

      • gimp2:

        Он статью не читал, хотя странно не увидеть красочное фото в конце статьи. Реквизиты выслал через Обратную связь.

      • Денис:
        http://in4wp.ru

        Юрий прошу прощения, после статьи привык видеть красивую рекламу на большинстве блогов, не обратил внимания. Извините.:)

  2. ЯНИС:

    Здравствуйте! Огромное спасибо за код,я вот все его изучаю, более менее получилось у меня подписку поставить, но главная проблема -это привязка 2 полей(subscribe и ввода емайл), 3 дня я уже бился над этим, начинаешь одно поле править и обязательно второе с ним криво ставится,может шаблон такой у меня….никак не могу их отвязать друг от друга, что я только не пробовал!! Счас вроде что-то вышло, но еще буду смотреть-объясните, как именно их раздлелить, чтобы они регулировались по отдельности???
    И еще, если можно ответьте, что именно означают вот эти 3 кода css,я так и не понял-зачем они в этом коде:
    .cell-subscription-info p {
    float:left;
    width: 100%;
    padding: 0px;
    margin: 0px;
    }

    .subscription-input{
    float:left;
    width: 180px;
    margin: 10px 0px;
    background:#FAFAFA;
    border: 1px solid #CAD3DA;
    color:#555;
    }

    .subscription-input:focus {box-shadow:inset 0px 0px 3px #e6e6e6!important;}???

    • Юрий Хрипачев:

      Здравствуйте!
      Янис, сначала подгоните по месту параметр .cell-subscription-info input, а затем уже .subscription-button, так вы быстрее и лучше подгоните форму под шаблон.

      .cell-subscription-info p – я так и не понял, что он меняет, форма прекрасно работает и без него, просто не трогайте его.
      .subscription-input – это параметр формы ввода адреса, изменяется отдельно, но лучше его не трогать, без необходимости.
      .subscription-input:focus – здесь вы можете изменить вид окна ввода адреса, когда начинаешь его вводить. По умолчанию стоит только небольшая тень.

    • gimp2:

      .subscription-input – стиль css, судя по коду, текстовый для e-mail. В css отвечает за отступы, длину поля ввода адреса, фон и прочее.

      • Наталия:
        http://woman.handyandy.com.ua/

        Ни как не могу настроить длину строки ввода.
        Мне нужно чтобы ширина ввода была 240 пикс. Меняю но ширина так и остается короткой. Не знаете в чем проблема?

        .cell-subscription-info input {
        font:11px Verdana,Arial,Helvetica, sans-serif;
        padding: 5px 10px;
        border-radius: 3px;
        margin: 70px 0px 0px 0px;
        width: 240px;
        height: 13px;
        }

        .cell-subscription-info p {
        float:center;
        width: 100%;
        padding: 0px;
        margin: 0px;
        }

        .subscription-input{
        float:center;
        width: 240px;
        margin: 0px 0px;
        background:#FAFAFA;
        border: 1px solid #CAD3DA;
        color:#555;
        }

        • Наталия:
          http://woman.handyandy.com.ua/

          Разобралась

  3. ЯНИС:

    .cell-subscription-info p-Это наверное стиль для заголовка над полем ввода емайл, в коде можно по идее некоторое убрать, а оставить 4 главных:для самого блока (.cell-subscription),для формы (.cell-subscription-info),для ввода емайл(.cell-subscription-info input) и для кнопки подписаться(.subscription-button ). Там можно поэксперементировать,например градиент задать..Еще в коде DIV вы одну строку вроде как пропустили….примерно такую: onsubmit=”window.open (‘http://feedburner.google.com/fb/a/mailverify?uri=фид’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′); return true”>

    • Юрий Хрипачев:

      Изменил, спасибо за подсказку, в визуальном редакторе код (pre) постоянно слетает, вот и ошибки потом идут.

      • ЯНИС:
        http://zarabotatj-v-internete.ru/

        Это точно,знакомый бардак,я убрал те 3 кода, что выше писал-все супер встало и работает,еще поднастрою…Но я еще добавил вот такую строку в div код,дописал в поле ввода емайл после -name “email”-value=”Введите ваш email” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;” />…Будет прямо в поле написано-Введите ваш емайл, а когда начнешь писать-она исчезает-классный эффект!!

  4. Лилия:

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

  5. Антон Дышлюк:
    http://dyshlyuk.com

    Юрий, мне вот больше всего понравилась подписка, которая размещается после статьи, но какая у нее эффективность, если сравнить с той что вы поставили в правом сайдбаре?

    • Юрий Хрипачев:

      Затрудняюсь ответить.

      • Антон Дышлюк:
        http://dyshlyuk.com/

        Если будет возможность сравнить через какое то время, напишите статью, какое место будет лучше всего подходить для размещения подписки.

  6. артем:

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

    • Юрий Хрипачев:

      Попробуйте указать ширину и высоту картинки или ее адрес не правильно пишите, есть сама картинка у вас?
      В общем без подробностей трудно помочь.

  7. Артем:
    http://infoalps.ru/

    код я подправил. у вас в статье в первом примере просто код для css отличается от кода, используемого на вашем сайте. теперь все встало на свои места и подписка в конце статьи заработала с картинкой в виде конвертика.

    • Юрий Хрипачев:

      Исправил ошибку, два раза один код написал, вот и вылез лишний кусок.

  8. Максим:

    Добрый день! вот вы приводите пример готовых форм для подписки, которые вы установили на разные сайты, и мне интересно посмотреть, как смотрится на сайте форма ввиде дощечки (она на вашем скрине самая первая). На каком сайте можно ее посмотреть??? заранее благодарен Вам…

    • Юрий Хрипачев:

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

      табличка

      • Максим:

        понятно…а у вас не осталось кода этой таблички???
        не могли бы вы поделиться им???

        • Юрий Хрипачев:

          Код остался, но, к сожалению, пока не могу поделиться, только после того, как она на том сайте появится.

          • Максим:

            хорошо, понял! а можете адрес сайта того дать, чтоб я смог узнать когда она там появится?

          • Юрий Хрипачев:

            rybalka48.ru

          • Максим:

            спасибо, но чувствую там он не скоро появится…
            а продать его, тоже не можете???

          • Юрий Хрипачев:

            У вас есть сайт? Зачем вам такая форма?

          • Максим:
            http://lite-zarabotok.ru/

            Да есть сайт, и мне эта форма очень даже подошла бы по дизайну…

          • Юрий Хрипачев:

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

          • Максим:

            Спасибо, я был бы очень благодарен вам за нее!
            Тогда тут, напишите в комментах, когда сможете скинуть, хорошо?

          • Юрий Хрипачев:

            Хорошо.

          • Юрий:

            Добрый вечер, Юрий!
            Это снова я, и по тому же поводу. На данный момент, вы все еще не можете поделиться со мной кодом той формы подписки, о которой мы с вами разговаривали?

          • Юрий Хрипачев:

            Только недавно вспоминал про вас. Ок, поделюсь кодом, только найду его. Куда вам его скинуть?

          • Максим:

            На эту почту если можно, что я указываю при добавлении комментария!
            Спасибо Вам заранее!

          • Максим:

            Спасибо Юрий, за форму…встала на сайт, как родная!

  9. Елена:
    http://i-love-tourism.ru

    Здравствуйте, спасибо вам огромное за статью. У меня получилось разобраться, хотя я сама полный чайник во всем этом. Только сейчас у меня новая проблема, не могу найти место куда вставить код формы в конце статьи.

    • Юрий Хрипачев:

      Здравствуйте.
      Поищите место в конце кода файла single.php, после кода php the_content

  10. Ярослав:
    http://sdiabetom.ru

    А можете выложить картинки? с цсс

  11. Ярослав:
    http://sdiabetom.ru

    Спасибо за статью. Установил и себе (правда немного изменил)

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Рекомендую
Интересное на сайте
Лучшие комментаторы
Олеся(2)
Андрей(1)
Владимир(1)
Николай(1)
Андрей(1)
© 2017 Узнай тут 48  ||  Копирование материала без согласия автора запрещено.
Яндекс цитирования