(Последнее обновление: 07.05.2019)

Доброго времени суток, дамы и господа! Как вы знаете, что форма подписки по Email от Feedburner устанавливается для подписчиков, то есть, для посетителей, которые явно продемонстрировали заинтересованность в вашем контенте. Иначе, бесплатная подписка на e-mail рассылку позволяет посетителям получать на указанный ими адрес электронной почты письма с анонсом ваших новых статей на блоге/сайте.

И запомните, email-рассылка характеризуется тем, что пользователи подписываются на нее добровольно и не надо им навязывать её, как делают некоторые популярные веб-ресурсы. Иногда формы на сайтах натурально гоняются за посетителями: перемещаются вверх и вниз по странице при скроллинге или внезапно всплывают в виде попапов. Я такие сайты закрываю сразу и поэтому стоит расположить её (форму) в правильном месте и делать её ненавязчивой.

Форма подписки по электронной почте не должна слишком напрягать посетителей. Вот, как то, так.

Подписка по Email

Подписка по Email для сайта Blogger или WordPress

Сегодня мы поговорим с вами, как разместить форму подписки по email от Feedburner после каждого сообщения или боковую панель в вашем блоге. Я предлагаю для вас уже готовые формы подписки на обновления блога, вам нужно только установить их и добавить нужную информацию в код.

Форма подписки по Email для сайта

Данная форма/блок подписки можно установить, как на боковую панель блога WordPress или Blogger (смотреться будет лучше, если ширина  сайдбара 300), так и после каждого сообщения. Она не содержит картинок, оформление блока чисто на CSS.

На боковой ( здесь, ширина 260) будет выглядеть так, скриншот увеличен:

Форма подписки

Форма подписки по Email

А после статьи так:

Подписка на e-mail

Подписка на e-mail после статьи

Естественно, вы можете оформить цвета по своему желанию в коде CSS. Кто предпочитает минимализм, тогда эта форма для вас. Установка стандартная. Код стиля CSS в Blogger устанавливаем чуть выше строки ]]></b:skin> в шаблоне блога, а для WordPress: Внешний вид - Редактор - файл Таблица стилей (style.css) и в самом конце после знака } вставляем код.

И так, стиль CSS оформления формы для установки такой:

.BD-sub{
border:1px;
solid #1A2638;
border-radius:10px;
margin-bottom:0px;
padding:10px;
text-align:center;
}
.BD-sub input{
border-radius:10px 10px 10px 10px;
font-size:14px;
padding:10px;
text-shadow:1px 1px 0 #FFF;
width:190px;
color:#0000CC;
font-family:georgia;
margin-bottom:5px;
border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(192, 191, 191);
border-color: #0066FF;
background:-moz-linear-gradient(top, #D6FCFE, #fff);
background:-moz-linear-gradient(top, #D6FCFE, #fff);
}
.BD-sub .kirim{
border: 2px solid rgb(9, 149, 223);
border-radius:5px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#000000;
cursor:pointer;
font-family:verdana;
font-size:12px;
padding:0px;
text-transform:uppercase;
width:auto;
height:36px;
border-color: #006A9D;
background: -o-linear-gradient(top, #00FFFF, #00A4A4);
text-shadow: none;
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
background:-moz-linear-gradient(top, #00FFFF, #0076AE);
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
}
.BD-sub .kirim:hover{
color: #666666;
box-shadow:0 0 4px 2px #666 inset;
border-color: #333333;
background-color: #00CCCC;
}
.bdbal-sub {
position:relative;
padding:10px;
margin:-10px 5px 5px 5px;
color:#000000;
border-radius:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: solid #999999 1px;
background-color: #00FFFF;
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
background:-moz-linear-gradient(top, #00FFFF, #0076AE);
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
box-shadow: 2px 2px 2px 2px #bbb;
}
.bdbal-sub:after {
content:"";
display:block;
position:absolute;
top:-30px;
left:50px;
width:0;
height:0;
border:15px solid transparent;
border-bottom-color:#00FFFF;
}

Следующий код HTML виджета подписки в Blogspot устанавливается, если в сайдбар блога тогда при помощи волшебного гаджета " HTML/JavaScript ", а если после сообщения тогда после одной из этих строчек:

<data:post.body/> таких бывает три, вставлять после второй или третьей

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

В WP установка происходит на боковую панель при помощи виджета Текст, а если после статьи, то в файле Отдельная запись (single.php) после строчки <?php the_content(); ?>.

HTML код виджета:

<!--Subscribe box start -->
<div style="width:300px; border:dashed #0000CC 2px; padding:5px; background-color:#FFFFFF; ">
<div class='BD-sub'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;https://feedburner.google.com/fb/a/mailverify?uri=ВАШ ID ФИДА &#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=600,height=550&#39;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Введите Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' type='text' value='Enter Your Email Address...'/>
<input name="kirim" type='submit' class='kirim' value='Subcribe'/>
<input name='uri' type='hidden' value='ВАШ ID ФИДА'/>
<input name='loc' type='hidden' value='ru_RU'/>
</form></div>
<div class="bdbal-sub" >
<em>Бесплатная подписка на новые статьи по электронной почте!</em><br/>
Введите свою почту, чтобы получать последние обновления из этого блога ..
</div></div>
<!--Subscribe box End -->

Вставьте ваш фид блога, напишите подходящий текст, измените ширину 300 на подходящий вам размер. Друзья, после установки этого виджета цвет может отличаться от скриншота, все настройки цвета производятся в первом коде. И ещё, для разнообразия виджет подписки по E-mail с кнопками соцсетей на боковую панель блога.

У меня данная форма была установлена, но после перехода на безопасный протокол https (как перейти? читаем туточки) пришлось от неё отказаться. Подписка по RSS не поддерживает https протокол и вместо зелёного замка отображается смешанный контент (!). Сейчас удалю кнопку RSS и установлю заново. Так что, прошу подписывайтесь. И так, красивая готовая форма для вас. Работает и на WordPress сайте и на платформе блоггер.

Виджет подписки по E-mail с кнопками соцсетей

Выглядеть форма будет так, с кнопкой RSS:

Форма подписки почта

Форма подписки по почте

Устанавливать данную форму нужно на боковую панель блога, с помощью гаджета "HTML/JavaScript " (в Blogger). В ВордПресс - виджет "Текст". Код CSS совмещён с HTML кодом формы, так что, вам облегчает задачу. Вставили код в поле гаджета/виджета и всё. Кодик для формочки такой:

<style>
#sidebar-subscribe-box{width:350px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.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;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/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="https://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/#######"><img src="https://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/########"><img src="https://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="https://feeds.feedburner.com/########"><img src="https://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a>
<p>Подписка на обновления блога</p>
<div class="sidebar-subscribe-box-form"><form action="https://feedburner.google.com/fb/a/mailverify?uri=#######" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=#######', '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>

Обратите внимание, что можно поменять картинки - фон блока, иконки кнопок соцсетей на свои (если конечно потребуется) или удалить их совсем, а также, не забываем подставлять имена профилей ваших социальных сетей вместо решёток ##### и конечно в трёх местах ваш ID блога/сайта FeedBurner. Вот, товарищи, по моему ничего не забыл. Да, к стати, у меня есть ещё красивые формы для подписки по почте, так что, ждите, скоро выложу. Вам они обязательно понравятся.

А теперь позвольте с вами попрощаться, совсем не на долго. Удачи всем без исключения. Живите дружно и до новых встреч. Пока, пока и женский пол чмоки, чмоки.