Стильная форма подписки с кнопками социальных сетей

Привет, друзья. Сегодня опять  для вас оригинальные кнопки социальных сетей с формой подписки. У меня уже целая серия статей на эту тему. Ссылки на некоторые вы увидите в этом посте. Выбирайте понравившееся вам.
Эти же кнопочки, с простым не раздражающим фоном и лёгким hover эффектом, подойдут под любой дизайн.
Как они выгледят посмотрите на картинке выше. В роботе я их проверила.

Установка в Блоггере совершенно простая - гаджет HTML/JavaScript. Единственное что вам нужно сделать, это указать свои ID в соц.сетях и RSS потока. Как их просто узнать читаем в этом сообщении.



Код.

<style>.hu-subscribe-box a{-moz-border-radius:2px;-moz-transition:border .218s;-o-transition:border-color .218s;-webkit-border-radius:2px;-webkit-transition:border-color .218s;background: #f3f3f3;background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));border:solid 1px #dcdcdc;border-radius:2px;color:#6e6e6e;display:inline-block;font:bold 12px Helvetica, Arial, sans-serif;padding:7px 12px;position:relative;text-decoration:none;text-shadow:0 1px 0 #fff;transition:border-color .218s}.hu-subscribe-box a:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,0.15);color:#333}.hu-subscribe-box a:active{border-color:#444;color:#000}.hu-subscribe-boxbar{float:left;margin-left:3px;margin-top:5px;padding:0;width:280px}.hu-subscribe-boxbar .emailsub{border-bottom:0 solid #e6e6e6;float:left;font-family:Helvetica, Arial;padding:0 0 15px;width:100%}.hu-subscribe-boxbar .emailsub .emailupdatesform{float:right;padding:0;width:100%}.hu-subscribe-boxbar .emailsub .emailupdatesform input.emailupdatesinput{-moz-border-radius:2px;-webkit-border-radius:2px;background:#F3F3F3;border:1px solid #dcdcdc;border-radius:2px;color:#989898;float:left;font-size:12px;height:18px;padding:5px 10px;width:130px}.hu-subscribe-boxbar .emailsub .emailupdatesform input.emailupdatesinput:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,0.15)}.hu-subscribe-boxbar .emailsub .emailupdatesform input.joinemailupdates:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#666;box-shadow:0 1px 2px rgba(0,0,0,0.15);cursor:pointer}.hu-subscribe-boxbar .emailsub .emailupdatesform input.joinemailupdates{-moz-border-radius:2px;-webkit-border-radius:2px;background:#F3F3F3;border:solid 1px #dcdcdc;border-radius:2px;color:#989898;font-family:Helvetica, Arial;font-size:14px;font-weight:700;height:30px;margin:0 0 0 5px;padding:0 5px;text-transform:none}</style>

<div class="hu-subscribe-box" style="padding: 0pt 0pt 0pt 5px;"><table><tbody><tr><td><a href="http://feeds.feedburner.com/shpargalochkiru" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKF3VRWv-EvHGJdE40zdmJBIfaw5ahXxdXQTFtr-QLUa-RioxsLK4GTX_Vhj2870-wnyvPEuPBmIYmGcDZZJSEr7lxyvjSAqew5nmodYJHWtA85THJ26flFdTJOWQ0pLtlevwIS9PyBsU/s1600/rss.png" border="0"/></a></td><td><a style="margin-left:5px;"href="http://www.twitter.com/VikserV" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVE-3lpKAu3jFbGWvRaPsfHxkfbVxNOxoG1cVeN0UFD9BQYx_1De90_Xus_JIl5ZScP0IlhnJEeBNSvviBKG931NA5oSI3zb9lXRLqYx3XIH9TBBStvw3-8QU_-ewXFMoCuHuqxd6atIg/s1600/twitter.png" border="0"/></a></td><td><a style="margin-left:5px;"href="http://www.facebook.com/viktoria.barad" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJx-vaCe3ZklBOjIe32C6n5RSenC83DBMp5UJ07yZpv2ib4wD9MQ5QkE6DrG16Vn_rbwB1Oc8i88CScsAqpyoB4NadGDKGLQgYoMZopdCz8VD0FSGuQcO7UIGbRPofVE4K4FycOyzCFR4/s1600/facebook.png" border="0"/></a></td></tr></tbody></table><div class="hu-subscribe-boxbar"><div class="emailsub"><div class="emailupdatesform"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Введите Ваш email..." onblur="if (this.value==''){this.value='Submit email...';}" onfocus="if (this.value=='Submit email...'){this.value='';}" type="text"/><input value="shpargalochkiru" name="uri" type="hidden"/><input value="Подписатся" class="joinemailupdates" type="submit"/></form></div></div></div></div>

В строке красного цвета введите адрес RSS. Посмотрите на снимке ниже, где его взять - панель администратора - настройки - другое. Скопируйте всю строчку. У меня он такой http://feeds.feedburner.com/shpargalochkiru"

В двух местах кода, где отмечено shpargalochkiru вставьте только то, что идёт у вас в адресе после слеша (/) . И, соответственно ваши адреса в социалных сетях twitter и facebook.

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

Спасибо всем за визит и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email