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

форма связиЗдравствуйте, друзья, читатели и гости блога. Предлагаю вам сегодня элегантный стиль формы подписки в блоге. У меня уже много опубликованных статей о различных вариантах оформления блока подписки. Ссылками на них я поделюсь в конце поста.
За основу этого варианта взят код стандартной формы от 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'>

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

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

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

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


8 комментариев:

  1. Виктория, я на твой блог подписала. Получаю новые статьи прямо в эл. почте. Не думаю, что кто-нибудь захочет на мои блоги подписаться. Мои постоянные читатели видят мои новые посты у себя на странице Блоггер.

    ОтветитьУдалить
  2. Ирина, почему ты так считаешь. Может кто и захочет подписаться.

    ОтветитьУдалить
  3. А зачем? Лучше стать постоянным читателем блога. Я каждый день вижу на своей платформе Blogger новые посты своих друзей-блогеров! Виктория, можно по секрету узнать твою профессию. Ты меня поздравляешь с Днем учителя, с Днем библиотекаря. А я не знаю, вдруг ты тоже библиотекарь, а я тебя не поздравила. Или ты компьютарщик? Учитель информатики? Не угадала? Я готовлю новые посты для дистанционного семинара в ноябре, хочу про тебя рассказать нашим библиотекарям. Они тоже неправильно ведут блог, например, не пишут названия сообщений. Я буду давать ссылки (неактивные) на твой блог. И про "Дела домашние" тоже хочу написать. У тебя ещё есть блоги?

    ОтветитьУдалить
  4. Ирина, по секрету всему свету. С моей профессией ты даже близко не угадала. Я геолого-разведчик. Сейчас в отставке. Закончила Свердловский горный и потом как говорится я земной шар чуть не весь обошёл. .Вот как-то так. Полный дилетант в блоггере. Просто всегда желание учиться.
    Насчёт блогов. Есть ещё но это личные и редко уже туда пишу.http://poluhka.blogspot.ru/ А так тестовые . ведь где-то я пишу и проверяю коды и всякие фишки. и это занимает достаточно времени.

    ОтветитьУдалить
  5. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
  6. Этот комментарий был удален автором.

    ОтветитьУдалить
  7. Ирина, вот создала страницу меню http://www.shpargalochki.ru/p/blog-page_84.html

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

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