17 мая 2013 г.

Форма подписаться на обновление блога по email под каждым постом

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

Если у Вас еще нет возможности подписки на ваш блог через почту, рекомендую исправить данную ситуацию, потому что, многие пользуются электронной почтой ежедневно и возможно Вы потеряли большую аудиторию, которая могла воспользоваться rss подпиской по email. Главный вопрос это, где форму "Подписаться по email" установить?

Обычно блок подписки устанавливают сверху или снизу в боковой колонке; под шапкой блога или в подвале; во всплывающем окне или после каждого сообщения.

Сегодня я хочу предложить вам два блока подписки на обновление блога и покажу как установить форму "Подписаться по email" после каждой статьи

Простая, без всяких излишеств форма:

Простой блок с подпиской по email
Для того чтобы установить такой простой блок подписки, вам нужно зайти в панель инструментов Blogger - Шаблон - Изменить HTML. Найти одну из строчек: <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-2'/> и прямо чуть ниже вставьте этот код:

<style> /* Subcribe CSS */ .frm-stx-btm  {border:1px solid gainsboro ;padding-left:10px;overflow: hidden;background:#F0F0F0;} #email-ui {font-size:25px;margin:10px 0px; } .nam-subeml {display:inline;border:2px solid gainsboro;width:300px !important;height:30px;font-size:25px;color:grey;font-family:Arial, Helvetica, sans-serif;padding:0px 5px 5px 10px;} .nam-subeml:focus {color:black;border-color:#3AA3E9;outline:none; } .inl-9005 p {display:inline !important;} #ui63494 {width:160px;padding:2px;top:-3px;vertical-align:middle;position:relative;border:2px solid #2580D5;background-color:#1B89EE;font-family:"verdana";color:white;font-size:25px;} #ui63494:hover {background-color:#46A6FF; } </style> <div class="subscribe-stx"> <form action="http://feedburner.google.com/fb/a/mailverify" class="frm-stx-btm" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/jizET', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <div id="email-ui"> Подписка по e-mail для обновлений</div> <div class="inl-9005"> <input class="nam-subeml" name="email" style="width: 140px;" type="text" /> <input id="ui015424" name="uri" type="hidden" value="blogspot/jizET" /> <input id="ui03994" name="loc" type="hidden" value="en_US" /> <input id="ui63494" type="submit" value="Подписаться" /> </div> <div id="ui43524"> Получайте новости от <a href="http://feeds.feedburner.com/blogspot/jizET" target="_blank">Школа Blogger(а)</a></div> </form> </div>
Далее, в коде заменяем blogspot/jizET на ваши данные feedburner. Текст в форме, заменяете на любой, какой вам нравится. Готово.

Следующий социальный блок "Подписаться по email". Дополнительно в этой форме присутствует:

• Изображение Вашего профиля или логотип блога,
• Краткая справка о себе или о блоге,
• Возможность присоединиться к Вам на twitter,
• Стать вашим другом на facebook.

Социальный виджет "Подписаться по email"
 Чтобы вставить такую социальную форму в блог, нужно сначала установить стиль для неё. Зайдите в панель инструментов Blogger - Шаблон - Изменить HTML. Находим тег: ]]></b:skin> и перед ней (чуть выше) вставляем стиль нашего блока:

.profile-box {
background: #E1DCDC;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #CEC2C2;
overflow: auto;
}
.profile-box p {
margin: 0;
padding: 0;
}
.profile-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #DFC7C7;
}
Как Вы уже знаете, здесь можно менять цвет. Подобрать цвета можно при помощи генератора, тут. Продолжаем. Дальше находим одну из строчек: <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-2'/> и прямо чуть ниже вставьте такой код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='profile-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://lh5.googleusercontent.com/-T6T3JXqfXug/TrOzfQON2YI/AAAAAAAABhM/cG6xIiuujNo/s300/0_4ea3e_ff1dbf45_M.jpg' width='70'/><b>Об авторе</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Супер блог Школа Blogger(а)<br/>
Follow Me on Twitter [at] <a href='https://twitter.com/#!/zagulyaevsv'>Сергей</a><br/>
Будте моим другом на Facebook [at] <a href='http://www.facebook.com/sergej.zagulaev'>Сергей</a><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=jizET&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #DDD;padding:3px;text-align:center;background:#F1F1F1;' target='popupwindow'><span style='margin:0 auto; padding-left:24px; position:relative;background: url(http://3.bp.blogspot.com/_b0xJ7qk6DTc/TEg2iHmUivI/AAAAAAAAAu0/j9tIV5fjTXw/s1600/myrss.gif) right center no-repeat;'/>Получите Бесплатные обновления: <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Введите email&quot;;}' onfocus='if (this.value == &quot;Введите email&quot;) {this.value = &quot;&quot;}' style='width:176px;height:18px; background: #ffffa0 url(http://1.bp.blogspot.com/_b0xJ7qk6DTc/TInWwRjgSUI/AAAAAAAABC0/DWQZc1mUvaU/s1600/new-email.png) left no-repeat;padding: 1px 0px 1px 24px;border: 1px solid #8cafe3;' type='text' value='Enter your email'/><input name='uri' type='hidden' value='Школа Blogger(а)'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Подписаться'/>
<center><i>*Пожалуйста, нажмите на ссылку для подтверждения подписки в своём почтовом ящике..и если не пришло во время, проверьте в папке со спамом.*</i></center>
</form>
</div></p></div></b:if>

Меняем мои данные на ваши: фото - https://lh5.googleusercontent.com/-T6T3JXqfXug/TrOzfQON2YI/AAAAAAAABhM/cG6xIiuujNo/s300/0_4ea3e_ff1dbf45_M.jpg; Twitter - zagulyaevsv; Facebook - sergej.zagulaev; feedburner - jizET. Текст напишите любой. Готово. Всем пока. До новых встреч.

С уважением, Сергей - блог Помощь Blogger-ru


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

5 коммент. :

  1. Можно у Вас спросить где можно красивый виджет для подписки найти ( что то вроде вашего)
    кстати у Вас на Rss фиде лишний пробел после" COM/ "
    Заранее спасибо!

    ОтветитьУдалить
  2. Для подписки выбирайте - http://shkolablogger.ru/stilnyie-socialnyie-vidzhetyi-dlya-blogger.html или http://shkolablogger.ru/socialnyiy-vidzhet-podpisatsya-dlya-blogger.html и т.д. Пробела не вижу.

    ОтветитьУдалить
  3. Благодарен Вам !
    Ссылка на rss в выджете :
    http://feeds.feedburner.com/%20blogspot/zWEJq

    ОтветитьУдалить
  4. В шаблоне кода простой подписки поменяйте на ru_RU, ведь русские же пользователи будут подписываться.

    ОтветитьУдалить

 
Яндекс.Метрика