Анимированная форма подписки для блога

Всем привет. Рада видеть вас на своём блоге. Сегодня предложу ещё один вариант формы подписки для блога с эффектом анимации. Очень легко подстраивается под любой дизайн. Совершенно простой в установке. Его можно установить или в сайдбаре блога, или прямо в конце статьи.

Для начала скопируйте следующий код в блокнот или черновик. И разберёмся с некоторыми настройками.

<style>
.social-connect-widget{background:#D7D7D7;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;
-webkit-transition:all .6s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFFEF9;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>


<div class="social-connect-widget" style="margin-bottom: 10px; margin-top: 0px;">
<img alt="RSS Feed" src="http://s017.radikal.ru/i403/1505/c9/499418cfb549.png " /><a href="http://feeds.feedburner.com/shpargalochkiru ">Подписка на RSS</a>
</div>
<div class="social-connect-widget" style="margin-bottom: 10px;">
<img alt=" Twitter!" src="http://s42.radikal.ru/i097/1505/99/98169f217f7d.png " title="Follow Us on Twitter!" /><a href="https://twitter.com/VikserV ">присоединяйтесь в  Twitter!</a>
</div>
<div class="social-connect-widget" style="margin-bottom: 10px;">
<img alt="Facebook " src="http://s020.radikal.ru/i703/1505/41/46f45d456847.png " /><a href="https://www.facebook.com/viktoria.barad">присоединяйтесь в Facebook!</a></div>

Зелёным я выделила цвет фона в спокойном состоянии. Жёлтым, цвет при наведении курсора. Всё то, что выделено красным цветом, это ваши адреса в социальных сетях и адрес фида. Посмотрите, что именно нам нужно.

В строке синего цвета адреса иконок. Вы можете подобрать свои. На сайте iconfinder.com достаточно большой выбор.

Если нужно добавить дополнительный блок для других сетей, копируйте и установите вот такой участок кода. Соответственно, поменяв адреса.

<div class="social-connect-widget" style="margin-bottom: 10px;">

<img alt="Facebook " src="http://s020.radikal.ru/i703/1505/41/46f45d456847.png " /><a href="https://www.facebook.com/viktoria.barad">присоединяйтесь в Facebook!</a></div>

Или же удалить ненужный. Можно совсем убрать соц.сети и оставить только форму подписки.

В итоге у нас должно получиться примерно такое.

Подписка на RSS

присоединяйтесь в Twitter!

присоединяйтесь в Facebook!

И как я уже говорила выше, готовый код устанавливаем в гаджет HTML/JavaScript и перемещаем его в нужное место на блоге. Или в конце сообщения, перейдя из режима создать в режим HTML.

Ещё оригинально смотрится всплывающая форма подписки, которая заметно экономит место на блоге.

Я в этом посте не установила специально свою стандартную подписку. Буду премного благодарна, если вы воспользуетесь(и сразу же протестируете) эту новую форму.

Спасибо, что читаете мои шпаргалки. До новых встреч. Приятных летних денёчков. Увидимся. Пока,пока.