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

форма подписки
Привет, друзья. Сегодня опять  для вас оригинальные кнопки социальных сетей с формой подписки. У меня уже целая серия статей на эту тему. Ссылки на некоторые вы увидите в этом посте. Выбирайте понравившееся вам.
Эти же кнопочки, с простым не раздражающим фоном и лёгким 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="http://2.bp.blogspot.com/-g7FaIJ1OjgQ/Ttd3DAAytbI/AAAAAAAAEGI/ifepI3TXqhg/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="http://4.bp.blogspot.com/-82yXf2C2f7Y/Ttd3DvVP5-I/AAAAAAAAEGQ/9YRURg-wrPY/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="http://3.bp.blogspot.com/-bnswEL1l4bI/Ttd3CJ0oSNI/AAAAAAAAEGA/MNN2fh77H4Q/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


2 комментария:

  1. Да, Виктория, у тебя много статей по установке кнопок. Спасибо, еще раз внимательно прочитаю! Твоя книга "BLOGGER для каждого" стала моей настольной книгой. И не только моей, но и некоторых друзей, например, Светлана Баянова (блог "Бибилиоволшебница" постоянно ее изучает.

    ОтветитьУдалить
  2. Спасибо, Ирина. Мне приятно, что кому -то это пригодилось. Если честно я даже не ожидала что столько скачиваний будет и просмотров. Кстати, проголосовала за тебя через ВК.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo