Красивая элегантная форма подписки для Blogger (2 варианта)

Всем, доброго времени суток. И опять для вас красивая элегантная форма подписки для блога. У меня уже достаточно много статей о вариантах формы подписки, ссылки на некоторые дам в конце поста.  Сегодня добавлю в копилку ещё два.

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

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

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

Вариант 1. Блог подписки с анимированной кнопкой.

Код.

<style>#subscribe-box {width: 250px;height: auto;border-radius: 2px;background-color: #95a5a6;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #555;text-align: center;background: #ecf0f1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: &#39;Droid Serif&#39;;font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: &#39;Droid Serif&#39;;width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #F4836A;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;box-shadow: 0px 3px 0px 0px #e23b16;}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #DD7761;}</style>

<div id='subscribe-box'>
              <div class='title'>
               Форма подписки
              </div>
                 <p>Получайте на свою почту новые статьи блога.</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ваше имя &quot;;}' onfocus='if (this.value == &quot;Ваше имя&quot;) {this.value = &quot;&quot;;}' value='Ваше имя'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ваш Email&quot;;}' onfocus='if (this.value == &quot;ВаEmail&quot;) {this.value = &quot;&quot;;}' value='Ваш Email'/>
<input name='uri' type='hidden' value='shpargalochkiru'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Подписаться!'/>

              </form>
             </div>
</div>

Поменяйте в двух местах shpargalochkiru на ваш адрес фида. Посмотрите, где его можно увидеть и что именно менять. На снимке я подчеркнула красным. Именно то, что идёт за слешем (/ )/

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

Второй вариант.

Код.

<style>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPcjV7PTMv0uwI0J_IDOBaRfAw49bsIRC_F5PpBzCnSfGmqT7sBuPAhuOjXLb1D1hUL7vzPf7mdMMAsIV1uuWhovFZ78bNnaauUaamF4ZMCR2fqhkwUtFGTsK_qv8kJxr92uy2BDHYjM4/s1600/colored-strip.png) repeat scroll 0 0 transparent;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyz1yVN5kTTWF6D0up_js-Rb0iu4i9tSVlaxsxRqafESGYOmDf9TWs8ZAXhCaPnyOFNzKpsIbDdkl8ilAMdSHK_dHW6eyJHSN929syb-cNJAvevjG_J69Q7S2hyW_Y38h_5zqu5-s2eXMo/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKu2r5jOsQBWySWoTAf_G4zCpfjDppEh1k6_6rcWIEpl6541AuDvQv9pd7sgQF8huMX1xlvQnRaCnQ6wJB6AJFXfiP8-sdLtKe3m3TyQBkLhGAT0ri_4Nyj3sDOpCrPGW_nc7K-JPUPgs2/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}</style>

<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Оформите подписку на обновления блога и получайте новые статьи прямо на почту</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="shpargalochkiru" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Введите ваш email адрес :)" required="required"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Подписаться !" /></form></div></div></div>

Также замените в трёх местах shpargalochkiru на свой адрес. Смотрите скриншот выше, что именно нужно.

Последний вариант может подойти и для формы подписки в конце каждого поста. Скопируйте код полностью и проверьте на этом генераторе. Ширина задана width:auto. Можно установить нужный вам размер ширины в px. Вставляйте код в конце каждого вашего сообщения. Как просто можно это сделать прочитайте в этом сообщении. Это намного упростит задачу и не будет отнимать время в дальнейшем.

Красивая форма подписки под каждым постом блога
Красивая форма подписки с иконками социальных сетей
Всплывающая форма подписки

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email