Как сделать для блога всплывающее окно подписки через Email (Feedburner)

blogger email subscribe
Во многих блогах, сделаных с помощью свободного движка Wordpress, часто встречается всплывающее окно, в форме которого автор сразу предлагает не терять времени и подписаться на новости блога.
Хорошо это или нет по отношению к гостям, решать не мне, но ниже опишу, как для Blogger сделать тоже самое своими руками.

Демо можете посмотреть здесь.

А вот скриншот того, что вы должны увидеть, пройдя по ссылке ↓

подписка через email feedburner

Установка.
Для тренировки рекомендуется сначала ставить на тестовый блог.

Первое, что нужно сделать - это слазить в админку Feedburner и найти такой код (для установки формы подписки через email):

feedburner настройка подписки через почту

Он понадобиться чуть позже. Можно пока скопировать в блокнот и русифицировать в нём кнопки.
Также из него нужно выкинуть строчку style="border:1px solid #ccc;padding:3px;text-align:center;".

Что приведёт код подписки к подобному виду:
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=omg-linux/blogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='omg-linux/blogger'/><input name='loc' type='hidden' value='ru_RU'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form>

Затем идём в редактор шаблона, обязательно сохраняем его копию к себе на жёстки диск, находим в шаблоне тег </body> и вставляем до него следующую конструкцию:
<div id='popupContact'>
<a id='popupContactClose'>x</a>
<h3>
Подпишись и получай последние новости блога прямо на Email</h3>
<p id='contactArea'>
КОД_ИЗ_FEEDBURNER
</p>
</div>
<div id='backgroundPopup'/>
В которую нужно предварительно скопировать предыдущий код из своей админки Feedburner.
Чтобы окно подписки всплывало прямо на фоне страницы, а не на затёмнённом участке, удалите <div id='backgroundPopup'/>. И конечно измените текст приветствия на более подходящий.

Теперь находим в шаблоне тег </head> и вставляем перед ним ссылки на два скрипта:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.js' type='text/javascript'/>
Если библиотека jQuery уже подключена к блогу, то первая ссылка не понадобится.

Сразу после этих ссылок вставлем этот скрипт:
<script type='text/javascript'>
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$(&quot;#backgroundPopup&quot;).css({
&quot;opacity&quot;: &quot;0.7&quot;
});
$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $(&quot;#popupContact&quot;).height();
var popupWidth = $(&quot;#popupContact&quot;).width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$(&quot;#popupContact&quot;).css({
&quot;position&quot;: &quot;absolute&quot;,
&quot;top&quot;: toppos,
&quot;left&quot;: leftpos
});
//only need force for IE6

$(&quot;#backgroundPopup&quot;).css({
&quot;height&quot;: windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie(&quot;anewsletter&quot;) != 1) {

//load popup
setTimeout(&quot;loadPopup()&quot;,5000);
}
//CLOSING POPUP
//Click the x event!
$(&quot;#popupContactClose&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Click out event!
$(&quot;#backgroundPopup&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
}
});

});
</script><script type='text/javascript'>
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$(&quot;#backgroundPopup&quot;).css({
&quot;opacity&quot;: &quot;0.7&quot;
});
$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);
$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $(&quot;#popupContact&quot;).height();
var popupWidth = $(&quot;#popupContact&quot;).width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$(&quot;#popupContact&quot;).css({
&quot;position&quot;: &quot;absolute&quot;,
&quot;top&quot;: toppos,
&quot;left&quot;: leftpos
});
//only need force for IE6

$(&quot;#backgroundPopup&quot;).css({
&quot;height&quot;: windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie(&quot;anewsletter&quot;) != 1) {

//load popup
setTimeout(&quot;loadPopup()&quot;,5000);
}
//CLOSING POPUP
//Click the x event!
$(&quot;#popupContactClose&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Click out event!
$(&quot;#backgroundPopup&quot;).click(function(){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });
}
});

});
</script>

Переходим к css.
Необходимо найти в шаблоне тег ]]></b:template-skin> и скопировать до него все стили:
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:1px solid #ebedef; 

 border-radius: 10px; 

 -moz-border-radius:10px 10px 10px 10px;

 box-shadow:2px 2px 3px #ebedef; 

 -moz-box-shadow:2px 2px 3px #ebedef 

 -webkit-box-shadow: #999 2px 2px 3px;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h3{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
Все настройки внешего вида всплывающей формы ковырять здесь.
Пробелами выделены закругление окна (для разных бразеров) и тень.

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

opera сбросить настройки

Источник.

17 комментариев:

  1. Блин, вроде полезная штука, повышает шансы подписки на тебя. А с другой стороны, меня например такая навязчивость слегка раздражает. =\

    ОтветитьУдалить
  2. Меня тоже раздражает, когда на каждом шагу в блоге предлагают подписаться.

    ОтветитьУдалить
  3. Буду вешать рекламу вместо формы подписки.

    ОтветитьУдалить
  4. Вот блин, одну из моих идей реализовал)) Хотел тоже про это написать в будущем. И поменяй наконец то форму коментариев. Хоть без всплывания окошка.

    ОтветитьУдалить
  5. Так напиши, есть ещё свободные варианты таких окон, даже готовые от разных буржуйских сервисов.

    С формой комментариев прям засада - никак не получается втиснуть поле ввода после статьи. По каким-то своим соображениям оно пляшет на странице. Найду время, проинспектирую какой-нибудь шаблон и по аналогии найду ошибку. Пока скилл не позволяет делать вручную совершенные шаблоны :-). Нужно хорошие описание базовой части шаблонов Blogger.

    ОтветитьУдалить
  6. подскажи где регулировать задержку перед появлением окна?

    ОтветитьУдалить
  7. Думаю, что здесь:
    //load popup
    setTimeout("loadPopup()",5000);

    ОтветитьУдалить
  8. Установил форму подписки Feedburner в конце каждой статьи, но она почему-то коряво отображается в Opera и IE 9.0, нет цветного фона, только белые буквы. В Firefox отображается нормально, но цвет почему-то другой. В Google Chrome все нормально, цвет тот, который установлен. Кто-нить может подсказать, как это исправить? (Сайт см. нажав на мое имя)

    ОтветитьУдалить
  9. Спасибо за стать! А не подскажете ли, как сделать аналогичное всплывающее окно "Получи бесплатно книгу на свой е-мейл"?

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

    1. ВСТАВЛЯЕШЬ ЛЮБОЙ КОД
      делаешь в сообщении ( Блоггер) код как надо и копируешь код

      Удалить
  10. Скажите почему скрипт не работает в блоггер,если припаркован домен?

    ОтветитьУдалить
  11. Вчера ещё работал код Сейчас пробую нет! Вот снял видео скажите в чём проблема? Есть скрипты запоминают пользователя,то-есть окно открывается
    один раз(например за сеесию) пробую через прокси,с другого браузера тишина Вот снял видео В чём ошибка? http://youtu.be/EwkqipSt_gM

    ОтветитьУдалить
  12. вот каким-то чудом окно заработало с новым шаблонам Строки Там нет Вот видео в чём ошибка?

    вот видео http://youtu.be/Y6cT0DaGjhk
    Я так понял оно открывается один раз!


    css вставил сюда ]]>

    ОтветитьУдалить
  13. Всё решил проблему !Проблема была в скрипте показа новостей в блоке

    ОтветитьУдалить
  14. ☺ Как сделать что бы банер стоял на мести при прокрутки странице ?

    ☺ И по щелчку мышки окно не закрывалась?

    ОтветитьУдалить
  15. хороший материал по пробовал на своем сайте работает нормально. только глючит в двух браузерах интерне эксп и firefox. подскажите как откорректировать.

    ОтветитьУдалить
  16. Можно ли настроить что бы форма подписки всплывала не сразу???

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