Красивая форма подписки под каждым постом блога.

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

А основная ценность любого сайта или блога, это его читатели и подписчики.

Она должна быть удобной и всегда на виду. Сервисов почтовых рассылок достаточно много. Большинство  пользователей для этого используют FeedBurner, который предлагает готовый вариант. Такая стоит у меня в конце каждого сообщения.

Хочу предложить вам ещё один красивой вариант формы подписки. И как установить её, чтобы она автоматически появлялась в конце каждого сообщения.
Рабочий вариант можно посмотреть здесь.

Как настроить блок подписки.
Чтобы удобнее было сделать все настройки, которые разберём ниже, сначала скопируйте в блокнот следующий код.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(http://star-like.ru/assets/images/icon_menu/letter.png ) no-repeat scroll 4px center transparent;
padding:8px 15px 8px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 3px solid#AE0C0C ;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:550px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<tr>
<td align='left'> <p style='color:#000000; font-style:italic; margin:0px 0px 5px 0px; '>Получайте новые статьи блога на почту</p>
<form action='http://feedburner.google.com/ shpargalochkiru' class='emailform' 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' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloguspeh/JrXo'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot; Ваш E-mail...&quot;;}' onfocus='if (this.value == &quot;Введите Ваш E-mail...&quot;) {this.value = &quot;&quot;}' type='text' value=' Введите Ваш E-mail...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Хочу!'/>
</form>
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '/>

<a href=' https://twitter.com/vikserv' rel='nofollow' target='_blank' title='Я в Twitter'><img src='https://cdn3.iconfinder.com/data/icons/3d-box-maker-social-icons/48/twitter.png '/></a>
<a href='https://plus.google.com/u/0/102675035951405180575'>
<img border='0' src='https://cdn3.iconfinder.com/data/icons/3d-box-maker-social-icons/48/google_plus.png '/></a>
<a href=' https://www.facebook.com/viktoria.barad' rel='nofollow' target='_blank' title='Я в Facebook'><img src='https://cdn3.iconfinder.com/data/icons/3d-box-maker-social-icons/48/facebook.png  '/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if> 

Красным цветом я выделила цвет и толщину рамки блока.

Зелёным width:550px, её ширина.

В двух местах кода вместо shpargalochkiru укажите свой идентификатор в Feedburner. Посмотрите на скриншот, что именно нужно.

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

Адреса иконок соц. сетей я выделила фиолетовым цветом. Если вас такие не устраивают, установите свои.

Зелёный цвет это ширина самой формы. Подгоняйте под ваши размеры.

Как установить форму подписки, чтобы она автоматически отображалась в конце каждого сообщения.

Когда код готов, заходим во вкладку шаблон и обязательно делаем резервную копию. На случай если что-то пойдёт не так. Нажимаем опцию изменить HTML.С помощью клавиш Ctrl+F находим в шаблоне строку  <data:post.body/>. Их в шаблоне 2. И весь готовый код устанавливаем после второй. Нажмите просмотреть. Если нет предупреждений, жмём сохранить.

Сейчас просмотрите любое сообщение. Если всё сделали правильно в конце поста у вас должна отобразиться новая форма подписки. Поздравляю вас. Теперь ваши читатели обязательно обратят на неё внимание и смогут легко подписаться на все обновления блога.

Сегодня у меня всё. Если возникнут вопросы пишите. Разберёмся. Спасибо, что читаете мои шпаргалки. Удачи всем.

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

Введите Ваш email