Виджет подписка по E-mail

Просмотров: 543

Подписка E-mail Доброго времени суток, дамы и господа! Сегодня, друзья, я хочу предложить вам, ещё один набор виджетов для вашего блога - подписка по E-mail. У пользователей Blogger есть возможность установить родной и простой, без всяких излишеств виджет: Рассылка обновлений по электронной почте, чтобы позволить вашим посетителям блога подписаться на получение ваших новых записей по электронной почте (E-mail).

Стандартный виджет Blogger подписка по почте

Для этого, достаточно зайти в дизайн блога. Нажать "Добавить гаджет" и из списка выбрать нужный виджет "Рассылка обновлений по электронной почте":

подписка по E-mail
Виджет Blogger - подписка по E-mail

А на следующем шаге, вам останется только дать название виджету в настройках (фид для вашего блога будет создан автоматически с помощью FeedBurner) и кликнуть кнопку "Сохранить":

Виджет подписка по почте
Настройка виджета Blogger - подписка по электронной почте

И в результате у нас получится простая форма подписки по почте для ваших посетителей:

форма подписки по почте
Простая форма подписки по почте

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

Следующие формы подписки подходят и для blogger и для WordPress.

Подписка по E-mail - виджет Blogger

Выглядеть он будет так, симпатично:

Виджет для Blogger
Виджет для 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 == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" 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">&nbsp;Сообщать о новых статьях бесплатно&nbsp;</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 с кнопками соцсетей

Вот скриншот на всякий случай, если вдруг у себя поменяю на другой и вы не увидите:

Подписка по E-mai (почте)
Подписка по 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. Вот, товарищи, по моему ничего не забыл. А теперь позвольте с вами попрощаться, совсем не на долго. Удачи всем без исключения. Живите дружно и до новых встреч. Пока, пока и чмоки, чмоки.


16 комментариев к “Виджет подписка по E-mail”

  1. Очень полезная подборка. Спасибо большое Сергей! Как раз искал решение по красивому оформлению виджета подписки.

    Ответить
      • не как не могу найти мой правильный feed, что вставляю дает ошибку…
        Есть такие коды, из которых я не могу выбрать правильный код…

        Enter your email address:Delivered by FeedBurner

        Subscribe to ԵՐԲ ԽՈՍՈՒՄ Է ՍԻՐՏԸ by Email

        который из них??? Подскажите пожалуйста… И во втором месте я должен ввести вес код или часть кода??? 🙂

        Ответить
        • Подписка по почте, вам вместо решеток ### в предложенном коде нужно вставить только blogspot/gor в двух местах. 🙂

          Ответить
          • Аааа… спосибо большое счас и это попробую… 🙂

  2. Огромное Вам спосибо Сергей, все получилось… 🙂 Если у вас будет еремя посмотрите мой блог и вискажыте свое мнение… 🙂

    Ответить
  3. Сергей, приветствую! кстати, чё-то подписки по е-майлу нифига не работают… всё настроено вроде правильно, но уведомления о новых статьях в моём блоге — не приходят на почту. Я даже сам пробовал на тестовый свой е-майл оформил подписку на блог, подтвердил подписку в пришедшем письме, но больше писем нету о новых статьях в блоге. Это глюк гугла опять какой то? У вас нормально работает?

    Ответить
    • Привет! У меня работает нормально, мне пришло сообщение о моей новой статье Яндекс.Карточки на сайт. Специально подписался с другой почтой от яндекса для проверки работы подписки по почте. Всё окей. Приходит день в день после публикации.

      Ответить
  4. Привет Сергей, у меня одна большая просьба, сможете ли вы помочь мне в этом??? Я очень хочу что бы у меня в блоге был архив в виде календаря, но что я пробую все дает ошибку… даже случается что и кода не дает что бы вставит в шаблон… пожалуйста помогите чем можете… Просто я сколько искал, у вас такого проекта не ношел…

    Ответить
    • Создайте новый тестовый блог и потренируйтесь на нём. Для копирования кода — есть панелька управления, нажимаете на последнею стрелку и код откроется в новом окне.

      Если не получится установить, тогда прошу обращаться к моим услугам. В меню есть — Услуги для вас. 🙂

      Ответить
  5. У меня вот такие иероглифы выскакивают Սեղմեք ստորև գտնվող հղման վրա որպեսզի հաստատեք Ձեր գրանցումը., хотя подписка работает

    Ответить
  6. И еще при отправке письма для подтверждении подписки название блога также в иероглифах. Что исправить подсобите?

    Ответить

Оставьте комментарий