Элегантная форма подписки в блоге.

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

За основу этого варианта взят код стандартной формы от FeedBurner. Добавим к нему код CSS (я отметила его серым цветом), где с помощью стилей изменим внешний вид. Для начала скопируйте его себе в блокнот, если хотите подогнать под дизайн вашего блога. Для начинающих блогеров чуть ниже,тоже будут некоторые пояснения. А саму форму можно увидеть в конце сообщения. И сразу подписаться на блог шпаргалки блогерши.
Код.

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <style>.mtc-newsletter-box {width:500px; height:222px; background:#f5f5f5; border:5px solid #ABABAB;padding:5px;} .mtc-newsletter-box h1{font-size:20px; font-weight:bold; color:#444; text-align:center;} .mtc-newsletter-box p{font-size:16px; font-family:georgia; text-align:center;line-height:25px;} .mtc-newsletter-box input{background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat right;font-family: Georgia, Times, &quot;Times New Roman&quot;, serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px; border: 1px solid #111 !important;font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important; box-shadow:2px #ABABAB;} .mtc-newsletter-box .submit{background:#ABABAB;} .mtc-newsletter-box .submit:hover{background-color: #444;border: 1px solid #444;color: white;text-decoration: none;} </style> <div class='mtc-newsletter-box'> <h1>Здесь можно оформить подписку!</h1> <p>Получайте самые новые статьи блога прямо на электронную почту</p> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Feed Burner ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><div align="center"> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Введите ваш  Email Address...'/><input name='uri' type='hidden' value='Feed Burner ID'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Подписаться!'/></div> </form></div> </b:if>

То, что отмечено красным цветом, поменяйте на свой текст.
Значения  width и height - ширина и высота определённого блока.  background - цвет общего фона, color- цвет шрифта, font-size размер шрифта, font-family - стиль текста,
border:10px solid #ABABAB - ширина и цвет рамки, webkit-border-radius - тень блока.

 Установка.

Если вы пока пугаетесь работать с шаблоном блога, самый простой вариант -  каждый раз после написания сообщения перейти в режим HTML и установить готовый код. Здесь только нужна убрать первый фрагмент кода  <b:if cond='data:blog.pageType == &quot;item&quot;'> и последний </b:if>.

Чтобы форма подписки автоматически отображалась после публикации поста. Идём во вкладку шаблон - изменить HTML. С помощью горячих клавиш (подробная статья) ищем в шаблоне вот такую строку -

<div class='post-footer>

Обычно их в шаблоне несколько и нам нужна последняя. Сразу под ней устанавливаем код. Нажмите просмотр. Если форма не отображается(шаблоны у всех разные) пробуйте его вставить после

<div class='post-footer-line post-footer-line-1'> или <div class='post-footer-line post-footer-line-2'> или <div class='post-footer-line post-footer-line-3'>

Не забудьте потом сохранить изменения.

Ещё варианты форм подписки в блоге.

Простаая форма подписки 
Всплывающая форма подписки.

Вот и всё. Если возникнут вопросы, пишите в комментариях. Разберёмся. На этом заканчиваю. Спасибо вам за визит. До встречи.

Здесь можно оформить подписку!

Получайте самые новые статьи блога прямо на электронную почту