Доброго времени суток, дамы и господа! Сегодня, друзья, я хочу предложить вам, ещё один набор виджетов для вашего блога — подписка по E-mail. У пользователей Blogger есть возможность установить родной и простой, без всяких излишеств виджет: Рассылка обновлений по электронной почте, чтобы позволить вашим посетителям блога подписаться на получение ваших новых записей по электронной почте (E-mail).
Стандартный виджет Blogger подписка по почте
Для этого, достаточно зайти в дизайн блога. Нажать «Добавить гаджет» и из списка выбрать нужный виджет «Рассылка обновлений по электронной почте»:
А на следующем шаге, вам останется только дать название виджету в настройках (фид для вашего блога будет создан автоматически с помощью FeedBurner) и кликнуть кнопку «Сохранить»:
И в результате у нас получится простая форма подписки по почте для ваших посетителей:
Так, товарищи, с этим мы разобрались, пойдём дальше. Выбирайте понравившийся виджет подписки на обновление блога. Сначала, пожалуйста, посмотрите вот эти хорошие блоки подписки — здесь, тут и ещё.
Следующие формы подписки подходят и для blogger и для WordPress.
Подписка по E-mail — виджет Blogger
Выглядеть он будет так, симпатично:
Установить такой виджет и другие, представленные ниже, можно с помощью нашего любимого, и не заменимого гаджета HTML/JavaScript. Вставьте в его поле такой код:
<style>
.abt-email{
background:url(https://lh3.googleusercontent.com/-3mMr7bVkJEA/T2mKAcZEBkI/AAAAAAAAAZI/IWMC_nG_foU/h120/service-email.jpg) no-repeat -8px 10px ;
width:280px;
padding:10px 0 0 65px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
box-shadow: 1px 1px 5px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.abt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4.4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
}
.abt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }
</style>
<div class='abt-email'>
Подписаться по Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=#######', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="######" name="uri"/><input type="hidden" name="loc" value="ru_RU"/>
<input class="abt-emailsubmit" value="Подписаться" type="submit" />
</form>
</div> Как видите, здесь, объедены стили виджета и сам HTML код и поэтому вам, дополнительно, не надо лазить в шаблон блога. Всё просто, вставили и готово. Теперь, что нужно в коде заменить. По умолчанию ширина виджета выставлена 280 px, менять в этой строке — width:280 px; (в самом верху). Естественно, надписи можете тоже заменить и самое главное, в двух местах замените решётки #### на свой ID Feedburner. Побежали дальше.
Виджет: Рассылка обновлений по электронной почте
Вот такой виджет, на любителя:
Естественно, цвета виджета и надписи можно настроить по своему желанию. Код формы подписки такой:
<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=######', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
<h1>Подписаться сейчас</h1>
<img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px"> Сообщать о новых статьях бесплатно </span></font></center><br/>
<input type="hidden" value="########" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
<input type="hidden" name="loc" value="ru_RU" />
<input type="submit" value="Подписаться !" class="login-submit" />
</form>
</center>
<style>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
}
::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
color: #bcc0c8;
}
:-ms-input-placeholder {
color: #bcc0c8 !important;
}
.input {
font: 12px/20px "Lucida Grande", Verdana, sans-serif;
color: #404040;
background: #ebc9a2;
}
.input {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login {
padding: 18px 20px;
width: 80%;
background: #3f65b7;
background-clip: padding-box;
border: 1px solid #172b4e;
border-bottom-color: #142647;
border-radius: 5px;
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
background-image: radial-gradient(cover, #437dd6, #3960a6);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
display: block;
width: 90%;
height: 37px;
margin-bottom: 20px;
padding: 0 9px;
color: white;
text-shadow: 0 1px black;
background: #2b3e5d;
border: 1px solid #15243b;
border-top-color: #0d1827;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
outline: 0;
background-color: #32486d;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
line-height: 35px;
}
.login-submit {
display: block;
width: 100%;
height: 37px;
margin-bottom: 15px;
font-size: 14px;
line-height: 10px;
font-weight: bold;
color: #294779;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
background-clip: padding-box;
border: 1px solid #284473;
border-bottom-color: #223b66;
border-radius: 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
background: #a4c2f3;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
text-align: center;
}
.login-help > a {
font-size: 11px;
color: #d4deef;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
text-decoration: underline;
}
</style> Тоже самое, обязательно поменять в коде решётки #### на свой фид блога. И последний виджет подписки по емейл, специально для Алекса, по его просьбе выкладываю код виджета, который стоит у меня на этом блоге.
Красивый виджет подписки по E-mail с кнопками соцсетей
Вот скриншот на всякий случай, если вдруг у себя поменяю на другой и вы не увидите:
Наш код блока подписки будет такой:
<style>
#sidebar-subscribe-box{width:350px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(http://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(http://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="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/#######"><img src="http://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="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/########"><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a>
<p>Подписка на обновления блога</p>
<div class="sidebar-subscribe-box-form"><form action="http://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. Вот, товарищи, по моему ничего не забыл. А теперь позвольте с вами попрощаться, совсем не на долго. Удачи всем без исключения. Живите дружно и до новых встреч. Пока, пока и чмоки, чмоки.
Спасибо, Сергей! 🙂 попробую все виджеты, отпишусь потом о результатах)
Хорошо. 🙂
Очень полезная подборка. Спасибо большое Сергей! Как раз искал решение по красивому оформлению виджета подписки.
Не как не получаеться… все в ответ тот же
The feed does not have subscriptions by email enabled
Укажите правильно свой feed блога. 🙂
не как не могу найти мой правильный feed, что вставляю дает ошибку…
Есть такие коды, из которых я не могу выбрать правильный код…
Enter your email address:Delivered by FeedBurner
Subscribe to ԵՐԲ ԽՈՍՈՒՄ Է ՍԻՐՏԸ by Email
который из них??? Подскажите пожалуйста… И во втором месте я должен ввести вес код или часть кода??? 🙂
Подписка по почте, вам вместо решеток ### в предложенном коде нужно вставить только blogspot/gor в двух местах. 🙂
Аааа… спосибо большое счас и это попробую… 🙂
Огромное Вам спосибо Сергей, все получилось… 🙂 Если у вас будет еремя посмотрите мой блог и вискажыте свое мнение… 🙂
Сергей, приветствую! кстати, чё-то подписки по е-майлу нифига не работают… всё настроено вроде правильно, но уведомления о новых статьях в моём блоге — не приходят на почту. Я даже сам пробовал на тестовый свой е-майл оформил подписку на блог, подтвердил подписку в пришедшем письме, но больше писем нету о новых статьях в блоге. Это глюк гугла опять какой то? У вас нормально работает?
Привет! У меня работает нормально, мне пришло сообщение о моей новой статье Яндекс.Карточки на сайт. Специально подписался с другой почтой от яндекса для проверки работы подписки по почте. Всё окей. Приходит день в день после публикации.
Привет Сергей, у меня одна большая просьба, сможете ли вы помочь мне в этом??? Я очень хочу что бы у меня в блоге был архив в виде календаря, но что я пробую все дает ошибку… даже случается что и кода не дает что бы вставит в шаблон… пожалуйста помогите чем можете… Просто я сколько искал, у вас такого проекта не ношел…
Создайте новый тестовый блог и потренируйтесь на нём. Для копирования кода — есть панелька управления, нажимаете на последнею стрелку и код откроется в новом окне.
Если не получится установить, тогда прошу обращаться к моим услугам. В меню есть — Услуги для вас. 🙂
У меня вот такие иероглифы выскакивают Սեղմեք ստորև գտնվող հղման վրա որպեսզի հաստատեք Ձեր գրանցումը., хотя подписка работает
Так это армянский. Вы какой виджет установили?
И еще при отправке письма для подтверждении подписки название блога также в иероглифах. Что исправить подсобите?