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

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

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

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

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

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

Он понадобиться чуть позже. Можно пока скопировать в блокнот и русифицировать в нём кнопки.
Также из него нужно выкинуть строчку 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 это делается так:

Источник.