Доброго времени суток, дамы и господа! Сегодня, друзья, я хочу предложить вам, ещё один набор виджетов для вашего блога - подписка по 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 в двух местах. 🙂
Аааа… спосибо большое счас и это попробую… 🙂
Огромное Вам спосибо Сергей, все получилось… 🙂 Если у вас будет еремя посмотрите мой блог и вискажыте свое мнение… 🙂
Сергей, приветствую! кстати, чё-то подписки по е-майлу нифига не работают… всё настроено вроде правильно, но уведомления о новых статьях в моём блоге — не приходят на почту. Я даже сам пробовал на тестовый свой е-майл оформил подписку на блог, подтвердил подписку в пришедшем письме, но больше писем нету о новых статьях в блоге. Это глюк гугла опять какой то? У вас нормально работает?
Привет! У меня работает нормально, мне пришло сообщение о моей новой статье Яндекс.Карточки на сайт. Специально подписался с другой почтой от яндекса для проверки работы подписки по почте. Всё окей. Приходит день в день после публикации.
Привет Сергей, у меня одна большая просьба, сможете ли вы помочь мне в этом??? Я очень хочу что бы у меня в блоге был архив в виде календаря, но что я пробую все дает ошибку… даже случается что и кода не дает что бы вставит в шаблон… пожалуйста помогите чем можете… Просто я сколько искал, у вас такого проекта не ношел…
Создайте новый тестовый блог и потренируйтесь на нём. Для копирования кода — есть панелька управления, нажимаете на последнею стрелку и код откроется в новом окне.
Если не получится установить, тогда прошу обращаться к моим услугам. В меню есть — Услуги для вас. 🙂
У меня вот такие иероглифы выскакивают Սեղմեք ստորև գտնվող հղման վրա որպեսզի հաստատեք Ձեր գրանցումը., хотя подписка работает
Так это армянский. Вы какой виджет установили?
И еще при отправке письма для подтверждении подписки название блога также в иероглифах. Что исправить подсобите?