Виджет подписки по 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. Вот, товарищи, по моему ничего не забыл. Да, к стати, у меня есть ещё красивые формы для подписки по почте, так что, ждите, скоро выложу. Вам они обязательно понравятся.

источник