• Страница 1 из 1
  • 1
Модератор форума: neok  
Красивая форма подписки feedburner
neok
Дата: Четверг, 13.02.2014, 20:12 | Сообщение # 1
Admin сайта Neok
Администраторы
Сообщения: «347»
Награды: «1» +
Замечания: «» +
Страна: Украина









Для начала, давайте зарегестрируемся на сайте feedburner.google.com и добавим свой rss канал для рассылки.



Будьте внимательны, запомните свой адрес фида, смотрите на скрине сверху, у меня это - com/maximoff, у вас, соответственно будет ваше название.

Код
<!-- ======= | Начало формы подписки |======= -->
      <noindex><div id="optin-box">
          <div class="call1">Действуй Прямо Сейчас!</div>
          <div class="call2"><strong>Введите необходимые данные</strong>, чтобы знать куда отправить Вам вкусняшку:</div>
          <form name="SR_form" action="http://feedburner.google.com/fb/a/mailverify" method="post"  target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=АДРЕС ВАШЕГО ФИДА', 'popupwindow', 'scrollbars=yes,width=570,height=540,top='+((screen.height-540)/2)+',left='+((screen.width-570)/2)+',location=no');return true">
              <input value="АДРЕС ВАШЕГО ФИДА" name="uri" type="hidden">
              <input name="loc" value="ru_RU" type="hidden">
              <input name="email" id="email" type="text" placeholder="Введите Ваш E-Mail" />
              <input name="SR_submitButton" id="button" type="submit" value="Оформить подписку" title="Оформить подписку" />
          </form>
          <img class="lock" src="/images/lock.png" alt="Ваш E-mail в безопасности" title="Ваш E-mail в безопасности" /><div class="call2"><strong>Вся отправленная нам информация, не разглашается третьим лицам!</strong></div>
      </div></noindex>
      <!-- ======= | Конец формы подписки |======= -->


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

Код
/* ================================= | ФОРМА подписки ===== */
  #optin-box {
      background: rgb(54,116,150); /* Old browsers */
      /* IE9 SVG, needs conditional override of 'filter' to 'none' */
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRp bz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIw JSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM2NzQ5NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3At Y29sb3I9IiMzZjU2NmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJs KCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
      background: -moz-linear-gradient(top,  rgba(54,116,150,1) 0%, rgba(63,86,107,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,116,150,1)), color-stop(100%,rgba(63,86,107,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(54,116,150,1) 0%,rgba(63,86,107,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(54,116,150,1) 0%,rgba(63,86,107,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(54,116,150,1) 0%,rgba(63,86,107,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(54,116,150,1) 0%,rgba(63,86,107,1) 100%); /* W3C */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#367496', endColorstr='#3f566b',GradientType=0 ); /* IE6-8 */
      width:660px;
      margin:20px auto 0 auto;
      text-align:center;
      border-bottom:5px solid #FFCC33;
      border-top:3px solid #FFCC33;
      -webkit-border-radius:8px;
       -khtml-border-radius:8px;
         -moz-border-radius:8px;
              border-radius:8px;
      }
      #optin-box .call1 {
          font-size:27px;
          color:#fff;
          text-align:center;
          font-weight:bold;
          text-shadow:1px 1px #000;
          padding:15px 0 10px 0;
      }
      #optin-box .call2 {
          font-size:15px;
          color:#fff;
          text-align:center;
          text-shadow:1px 1px #000;
          padding-bottom:15px;
      }
      #optin-box input {
          -webkit-border-radius:8px;
           -khtml-border-radius:8px;
             -moz-border-radius:8px;
                  border-radius:8px;
          margin:5px 0 20px 20px;
      }
          #optin-box input[type="text"] {
              color:#333;
              border:2px solid #aaa;
              font-size:18px;
              padding:10px 10px;
              width:50%;
              float:left;
          }
          #optin-box input#email { background:#fff url('../images/email.png') no-repeat center right; }
          #optin-box input[type="submit"] {
              background:#cc0000;
              border:2px solid #fff;
              color:#fff;
              cursor:pointer;
              font-size:18px;
              font-weight:bold;
              text-decoration:none;
              padding:10px 25px;
              float:left;
              -webkit-border-radius:8px;
               -khtml-border-radius:8px;
                 -moz-border-radius:8px;
                      border-radius:8px;
          }
              #optin-box input[type="submit"]:hover { background:#ff0000; color:#fff; border:2px solid #fff; }
          #optin-box .lock { width:40px; height:45px; margin-top:5px;}
          #optin-box #confident { display:none; }



Админ этого сайта. Лежать стоять оп оп БАН!

Сообщение отредактировал
[ (UA) ]
  • Страница 1 из 1
  • 1
Поиск:



Хостинг от uCozЯндекс.Метрика