Виджет подписки по E-mail с кнопками соцсетей

Выглядеть форма будет так, с кнопкой RSS:

Форма подписки по почте

Устанавливать данную форму нужно на боковую панель блога, с помощью гаджета "HTML/JavaScript " (в Blogger). В ВордПресс - виджет "Текст". Код CSS совмещён с HTML кодом формы, так что, вам облегчает задачу. Вставили код в поле гаджета/виджета и всё. Кодик для формочки такой:

<style> #sidebar-subscribe-box{width:350px;border:1px solid #aaa;border-radius:3px;padding:3px 0} .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjmq0iEzvVSVVvvmkoBiQak4hNmcoQvgTMlD0QXoIUHHhgC0C-cRIE0bN7aAUlOwXWWU5Mj2pZzGK3c0DuWdSL5apg5Tn5s0GTk4FZmXk_p_qTAfk1AYyN56-RtM7v-Csi8rQ8zS8-IAs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtt7eW_AgU71UXnsK3Zf34saAQ12wbtgYpPgqWwmLkXQ7ZC9ILAy0fkwJ6t_gPukRkPvxhMCLwoHLpvQmytXwfhYtv1RvXWy0DvEcgZwK4gQfQFv8LczqvYqVZkXrKlms9W5IrvnCNYIQ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn7TqVtNf_8j3_ImN8Ql6FG14LokTZvYMgVF00beECGGv0aPR-t5xGaMBS6JiV_KQETz7ixQnJU6gg_nyI7yat5gFSStJk3KzMIIaz02OmeidgLXOUEVV6GE0AtqAsvLkmSD32WhTAW0p-/s1600/Bloggertrix-facebook.png" /></a> <a class="social-icons" href="https://twitter.com/#######"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbZLmmmemzck72sl-k05-qhQqC-jJiaOzDV30O6eLm8ROB8W0lLRx_S81Ow55g8tTIEH_DdmuVutpVlGj_-7ra_ibc2kyruD1tK7SUazUxTc70GslP_0e4j6Oz1UNdekb8OxCCNEbyT8Xb/s1600/bloggertrix-twitter.png" /></a> <a class="social-icons" href="https://plus.google.com/########"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimHKIF56G2S_jpVduhHLqwfTsUoMdzd6TSPK5oF8o08Z1MLoYgNnQ-GBzjfrSeEHw6xjzso054uErdJU53zaOC3uyTZG_uWAElzAsgjID9kcmG62cb9vS9jgmpNh5s0Lha-uXnWzowdfd5/s1600/Bloggertrix-Googleplus.png" /></a> <a class="social-icons" href="http://feeds.feedburner.com/########"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyIa4UTLNnScHyg9GB8FFX4cQGy-Afpgpw8rufsTvkVKB3LExufPUXbA7Vjrdc_IaKD5z8uljBty9IzyveSzH1nN8msCbX00GKYLKvsj9UAcJPTMBn-jvBFhotWSBKhofPh_5a5vGjK3Ta/s1600/Bloggertrix-Rss.png" /></a> <p> Подписка на обновления блога</p> <div class="sidebar-subscribe-box-form"> <form action="https://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. Вот, товарищи, по моему ничего не забыл. Да, к стати, у меня есть ещё красивые формы для подписки по почте, так что, ждите, скоро выложу. Вам они обязательно понравятся.

источник

Простая форма подписки для блога

Форма подписки по электронной почте - необходимый элемент любого блога.

Количество подписчиков на обновления - важный показатель поискового продвижения, демонстрирующий востребованность и качество материалов блога, его популярности среди читателей.

Именно по этому опытные вебмастера уделяют форме подписки повышенное внимание, располагая её в самых заметных местах.

Простая и лаконичная форма подписки, которую я предлагаю вашему вниманию, обладает ещё одним неоспоримым достоинством - любой, даже начинающий блоггер, затратит на её установку не более 3-х минут.

Вот, как она выглядит:

Посмотреть работающий образец можно перейдя по ссылке на тестовый блог.

Код для этой формы создан усилиями автора блога MyBloggerTricks, с чьими надёжными и красивыми разработками я вас уже знакомил.

Установить форму подписки в Blogger

1. Заходим в Панель управления -- Дизайн -- Элементы страницы -- Добавить гаджет

2. Выбираем из списка "HTML/JavaScript" 

3. В предложенную форму вставляем код:

<style> .mbt-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrklpFYP_FaZmRb1TTMF_V3bdmr9xwzAfqZmE6_W3Ti3l6948JCVGh6U9WYnggfHD6WvfJAUPpvODIjszXz7ud3ZgF76NK40dAJJRyblgTQwdZbEboMsfgOJ1HHZXztAymUqSz9tRFj-Uz/s1600/email.png) no-repeat 0px 12px ; width:300px; padding:10px 0 0 55px; float:left; font-size:1.4em; font-weight:bold; margin:0 0 10px 0; color:#686B6C; } .mbt-emailsubmit{ background:#9B9895; cursor:pointer; color:#fff; border:none; padding:3px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; font:12px sans-serif; } .mbt-emailsubmit:hover{ background:#E98313; } .textarea{ padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; width:170px; color:#666;} </style> <div class="mbt-email"> Подпишитесь по Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feeds.feedburner.com/blogspot/FEeU', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Введите свой email";}" onfocus="if (this.value == "Введите свой email") {this.value = "";}" value="Введите свой email" type="text" /> <input type="hidden" value="FEeU" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input class="mbt-emailsubmit" value="Подписка" type="submit" /> </form> </div>

4. В этом коде заменяем отрывок, выделенный красным, на URL своего Feed-канала (в моём случае это http://feeds.feedburner.com/blogspot/FEeU) Часть кода, подсвеченную жёлтым (FEeU) заменяем именем своего канала Feed, которое всегда находится в конце адреса канала 5. Сохраняем, перетягиваем виджет в нужное место (обычно форму располагают в верхней части сайдбара) и опять сохраняем. Теперь у вашего блога появилась отличная форма подписки, простая и заметная одновременно. 

 источник