4 варианта красивой формы подписки для Blogger

Всем, привет. Специально на днях создала новый ярлык для статей о форме подписки для Блоггер. Достаточно их у меня уже накопилось и пришлось как - то объединить в отдельную категорию. Если есть желание посмотрите в облаке ярлыков в сайдбаре. Сегодня пополню эту тему и предложу вам на выбор 4 яркие, красивые формы подписки на обновления блога. Первые две устанавливаются в боковой колонке, а последние лучше смотрятся в конце сообщения. 

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

Код

<style type="text/css">

.hbzsignup-form {

    background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmFkjIMvqpW1Mf3nBMAQJJhkeeUIZaslDnhsXhQjVr3bGWdcLVa5zOfymtIKZkyk2wIv1wyJmaZdtigInZAzf4tfkd-_okE6tfnLMp-omQRWa9p7DlvEILUjEXY3h_Uos90meg9vWKAKTd/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;

    height: 150px;


    width: 250px;

    margin: 10px auto 60px auto;

}



.hbzform-inner H2 {

    text-align: center;

    color: #000;

    padding: 10px;

    font: bold 30px "trebuchet MS","Tahoma";

}



.hbzemailform {

    margin: 120px auto 5px;

    width: 215px;

}



#hbzemailbox {

    background: #FEFEFE none repeat scroll 0% 0%;

    border: medium none;

    font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;

    margin-right: 5px;

    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);

    padding: 7px;

    box-sizing: content-box;

    height: 12px;

    vertical-align: top;

    display: inline-block;

}

#hbzemailbutton {

    background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;

    box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;

    border: medium none;

    color: #FFF;

    cursor: pointer;

    font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;

    padding: 6px;

    border-radius: 5px;

    height: 27px;

    display: inline-block;

}



#hbzemailbutton:hover {

    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;

}



.hbzsocial-icons {

    margin: 20px 0 0;

    overflow: hidden;

    display: block;

    text-align: center;

}



.hbzsocial-icons ul {

    display: inline-block;

    margin: 0 auto !important;

    text-align: center;

    padding: 0px

}



.hbzsocial-icons ul li {

    background: transparent !important;

    border: none !important;

    float: left;

    list-style-type: none !important;

    margin: 0 4px 10px !important;

    padding: 0 !important;

}



.hbzsocial-icons ul li::before,

.hbzsocial-icons ul li::after {

    display: none !important;

}



.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbRQDXzA2wGdUyTItD0z91j3QOK3MhkMNfeCI98faB4Ue9y0htf_uIwlQgWjEgyHE8yJD9UpQ5CWBFMxbtyxUKr3rNC4HphUAj51kWTpOdvVgxMkPoHqXp69sHd-9t-udT3sGt7dVbDvWf/s1600/sprite_32x32.png") no-repeat scroll 0 0;

    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    display: block;

    height: 38px;

    overflow: hidden;

    text-indent: -999px;

    transition: all 0.25s linear 0s; width: 38px;

}



.hbzsocial-icons ul li.social-facebook a {

    background-color: #3b5998;

    background-position: -60px 3px;

}



.hbzsocial-icons ul li.social-twitter a {

    background-color: #00aced;

    background-position: -253px 3px;

}



.hbzsocial-icons ul li.social-gplus a {

    background-color: #dd4b39;

    background-position: -93px 3px;

}



.hbzsocial-icons ul li.social-pinterest a {

    background-color: #cb2027;

    background-position: -157px 3px;

}



.hbzsocial-icons ul li.social-rss a {

    background-color: #F87E12;

    background-position: -189px 3px;

}

.hbzsocial-icons ul li a:hover {

    background-color: #333;

}



.hbzsocial-like {

    display: block;

    text-align: center;

}





</style>



<br />

<div>

<div class="hbzsignup-form">

<div class="hbzform-inner">

<div style="text-align: center;">

<span style="color: white; font-size: large;"><b>Подписка на новости блога</b></span></div>

</div>

<div class="hbzemailform">

<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" 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 id="hbzemailbox" name="email" placeholder="Ваш email..." required="" type="text" />

    <input id="hbzemailbutton" title="" type="submit" value="Да" />

   </form>

</div>

</div>

<div class="hbzsocial-icons">

<ul>

<li class="social-facebook"><a href="https://www.facebook.com/viktoria.barad" target="_blank" title="Facebook">Facebook</a></li>

<li class="social-twitter"><a href="https://twitter.com/vikserv" target="_blank" title="Twitter">Twitter</a></li>

<li class="social-gplus"><a href="https://plus.google.com/u/0/102675035951405180575" target="_blank" title="Google+">Google+</a></li>

<li class="social-pinterest"><a href="https://draft.blogger.com/[Pinterest%20url]" target="_blank" title="Pinterest">Pinterest</a></li>

</ul>

</div>

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

Его ещё можно увидеть во вкладке настройки - другое - URL переадресации канала сообщений.

Вариант 2. С синим фоном и красивым hover эффектом при наведении.

Код

<style>
#sidebar-subscribe-box{width:250px;border:3px solid #191970;border-radius:1px;padding:1px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://memuaris.ru/uploads/product/image/23901/449916.jpg) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;font-weight: bold;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;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/AVvXsEj7qvXqPaQic9UVwCxya9FvTC2BXrqqrDLbpaJAw4F4BomQwJe4l5CTg_YwDe69kojRFEP6sZbN7UJBkrpm3QU7Er7lB1K2-m-tUjm2XozHDxEVsOtuxTTfA9bQmZ1Yub4aZUa-4Jp0Xio/s1600/icons.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;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}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br/>
<a class="social-icons" href="https://facebook.com/######"><img src="http://i069.radikal.ru/1406/d9/74471340c15b.png" /></a>
<a class="social-icons" href="https://twitter.com/#######"><img src="http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png" /></a>
<a class="social-icons" href="https://plus.google.com/########"><img src="http://s019.radikal.ru/i618/1406/40/71d113bc8bce.png" /></a>

<p>Подписка на обновления блога</p>
<div class="sidebar-subscribe-box-form"><form action="https://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="########" />
<input name="loc" type="hidden" value="ru_RU" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Введите свой email..."/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Подписаться сейчас " /></form>
</div></div></div>

В этом коде так же поменяйте адрес фида. В самом начале кода розовым цветом отметила фоновую картинку. Можно поиграться и подобрать свою.
Оба кода предусматривают ширину боковой колонки не менее 250 px - width:250px;

Готовый код устанавливайте в гаджет HTML/JavaScript в сайдбаре блога. Обычно его располагают где - нибудь в самом верху. 

Наглядно увидеть каждую форму подписки и подкорректировать можно в этом редакторе. Вставьте код в поле и нажмите просмотр. 

Вариант 3. Яркая форма подписки, которую можно установить в конце каждого поста.

Код.

<style>#Subscribe{background:#D00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQD6ZAaTtBLEzxz54HbYjuMW8GJS-vOyAYQFYkOsEJ2gRcRNczDxxqCuinS0kWlqoDLpfQSnJjCsdhIAdYMOYQqBR88VBpt92Dq71X1gPMu_BdH3WJNnnt4NwhDd1QOKp_Qe8qN8qicSU/s1600/email.png) no-repeat 100% center;border-radius:5px;box-shadow:0 0 30px #600 inset;height:100px;margin:5px auto 0;padding:10px;width:550px;} #Subscribe .Arrow{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB6buV3mYGAQopXE4xV8fJOdW5pAM08thPkCdPjQP2AH2kwZ9M9rZ1JRjzvHN2UGPUI2OUYUlEGwI2MDwiH84Toq0H7kNo_EFDFkXhIBn3adXdLNHC5FDdukiVJboyUSIfttdmY6pQRUM/s1600/Left.png) no-repeat;float:left;height:70px;margin:0 0 0 10px;width:80px} #Subscribe form input.Text{background:#FFF;border:1px solid #800;border-radius:5px;box-shadow:0 0 5px #600 inset;color:#333;float:left;padding:5px 10px;width:145px} #Subscribe .headline{color:#FFF;font-size:24px;margin:5px 0 0 60px} #Subscribe table{margin:30px 0 0 10px;} #Subscribe form input.Button{background-color:#148314;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQLq3fGKW7_9nCAjNEkT4YpRMlTPxt9o0X3wf7Vayza_0oX47B8GgXnaSF6HIbrwslVhkin_9Iz1HZ21mbBSsqnFrgLZl9IoSVmBNLFpAp3s6qgDCAVw3XUgL_N5Y5lQWiOZoemvg0rxo/s1600/Subscribe.png);border:1px solid #7a7a7a;border-radius:5px;color:#fff;padding:5px 10px;position:relative;width:125px}</style>

<b:if cond="data:blog.pageType == &quot;item&quot;"> </b:if><br />
<div id="Subscribe">
<form action="http://feedburner.google.com/fb/a/mailverify" 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">
<table> <tbody>
<tr> <td><input class="Text" name="Name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Name&quot;;}" onfocus="if (this.value == &quot;Enter Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Ваше имя" /></td> <td><input class="Text" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email&quot;;}" onfocus="if (this.value == &quot;Enter Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Ведите ваш Email" /> <input name="uri" type="hidden" value="shpargalochkiru" /><input name="loc" type="hidden" value="en_US" /></td> <td><input class="Button" type="submit" value="Подписаться" /></td> </tr>
</tbody></table>
</form>

</div>

Вариант 4. Ещё одна в чёрном варианте.

Код.

<style>#shetoldme{clear:both;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN5KAdoamwBeqAjZfb5ZQ8hgvRuSCuGho-ZBUVP9_ZSniyMb55-W31ipDKEqCyyviG1DPurgXDm7GIFJo4SA82H6uYrejZwdzFw6KuX8EpvgvAfFG4SGSoytaijg2HoESFBdT_ySdqVZw/s320/new+border.png');color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#shetoldme
h4{font-size:22px;border-bottom:1px solid #746E6E;letter-spacing:2px}#shetoldme input[type="email"],.sl_in_mail{margin-right:-6px;padding:16px
0 16px 40px;border:none}#shetoldme
form{text-align:center;padding:20px
90px}#shetoldme input[type=submit]{border-radius:0;box-shadow:none;padding:6px
30px 6px;letter-spacing:2px;border:none;background:#E06;cursor:pointer;color:#FFF}#shetoldme
.counter{margin:0
0 8px}#shetoldme.efooter{background:none}#shetoldme.efooter
form{text-align:left;padding:10}#shetoldme.efooter input[type="submit"],#shetoldme.efooter input[type="email"],.wg_in_mail{padding:10px;letter-spacing:0px}#shetoldme.efooter.sidebar{background:#3C3C33;padding:5px}#shetoldme.efooter.sidebar
form{text-align:center}</style>

<br />
<div id="shetoldme">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=750,height=400');return true" target="popupwindow">
<h4>
Форма подписки</h4>
<div class="counter">
Оформите подписку на новые статьи блога</div>
<input class="sl_in_mail" name="email" placeholder="введите ваш email" type="email" /><input name="uri" type="hidden" value="shpargalochkiru" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="Подписаться" /></form></div>

Во всех случаях меняйте название вашего фида на свой shpargalochkiru.

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

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email