Главная                  Об авторе                 Ищут дом                 Доставка и оплата                  МК и выкройки

2 авг. 2013 г.

Новый гаджет blogger "Обратная связь"!



 У меня отличные новости! Теперь со мной можно будет связаться всего в несколько кликов с помощью формы обратной связи! Это новый гаджет blogger "Обратная связь"! О том, как его установить не на боковую панель, а  на отдельной странице, написано у Елены Гришиной, за что ей большое спасибо! Я же хочу рассказать, как настроить этот гаджет под стиль своего блога!

Предложенный Леной первоначальный код выглядит стандартным и подходит не для всех дизайнов, недаром она изменила его для себя (ее код там так же есть). Но что делать нам, если предложение подправить код вызывают нервную дрожь и сухость во рту, а "обратную связь" хотелось бы иметь красивую и подходящую именно нам?!!

Тогда давайте разбираться! Все очень просто, а потому прекращаем бояться страшных слов "изменить код" и смело принимаемся творить!:)



 Дополнение к шагу 2: Меняем заголовки!


Выполнив шаг 1 и шаг 2 из описания Лены, мы получаем подобную форму. На этом этапе мы можем сменить все названия, включая кнопку подтверждения отправки! Для этого выделенные фрагменты меняем на подходящий именно нам текст и сохраняем.

<form name="contact-form">
<p></p>
Имя
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Адрес e-mail <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Сообщение<span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>


Дополнение к шагу 3: Настраиваем цветовую гамму и размеры!

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

Давайте посмотрим подробнее!


/* CSS Contact Form */
#ContactForm1{

display:none;

}

Эта часть кода отвечает за поле ввода имени и мэила
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{

width: 300px;
- ширина поля
height:auto;
- высота поля (в данном случае лучше не менять)
margin: 5px auto;
- регулирует расстояние между полями
padding: 10px;
- расстояние между границей поля и курсором текста(в данном случае лучше не менять)
background: #f2f2f2;
- цвет фона поля
border: 1px solid #ccc;
- ширина и цвет рамки поля
color:#777;
- цвет курсора в зоне активного поля (когда в него щелкнули)
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{

background: #fffff7;
- цвет фона при активном поле (когда в него щелкают, чтобы писать)
}

 
Эта часть кода отвечает за поле ввода сообщения
 #ContactForm1_contact-form-email-message{
width: 450px;
- ширина поля
height: 175px;
- высота поля
margin: 5px auto;
- регулирует расстояние между текстом названия поля и началом поля
padding: 10px; - расстояние между границей поля и курсором текста.
background: #f2f2f2; - цвет фона
border: 1px solid #ccc;
- ширина и цвет бордюра
color:#777;
- цвет мигающего курсора в зоне поля
font-family:Arial, sans-serif;
- шрифт
}

 
Эта часть кода отвечает за кнопку подтверждения отправки 
#ContactForm1_contact-form-submit {
width: 101px;
- ширина кнопки
height: 35px;
- высота кнопки
float: left;
- расположение кнопки
color: #FFF;
- цвет текста внутри кнопки
padding: 0;
 
margin: 10px 0 3px 0 0;
cursor: pointer;
- форма, которую курсор принимает при наведении на кнопку. Лучше не менять:)
background: #5E768D;
- цвет кнопки
border: 1px solid #556f8c;
- ширина и цвет бордюра (может совпадать или нет с общим цветом кнопки)
border-radius:3px;
- скругление углов, чем больше число, тем больше округляется окошко! Эту строчку можно скопировать и добавить к блокам сообщения и строчкам имени и мэила, тогда получится, как у меня)
}

#ContactForm1_contact-form-submit:hover {

background:#435c74;
- цвет кнопки при наведении на нее курсора
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width: 450px;

margin-top:35px;

}

 
Все, что не выделено, лучше не трогать. Надеюсь, теперь понятнее, что ничего сложного и страшного нет:) Откройте в одном окне код шаблона, а в другой страничку с обратной связью, внесли правку, сохранили код, перезагрузили страничку и проверили устраивают ли нас правки.

Размеры проще всего подгонять методом научного тыка, шрифт можно поставить тот, что в блоге (уточняем наш через Шаблон -> Настроить -> Дополнительно) или по желанию, но лучше, на мой взгляд, использовать тот, что в блоге.  

Цвета можно узнать двумя способами. Первый - воспользоваться подобной картой цветов HTML. В интернете таких много. Если же нам нужны конкретные оттенки нашего дизайна, в помощь нам photoshop. Здесь есть чудесный инструмент пипетка.



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



Щелкаем по верхнему. Открывается окошко. Из выделенного на картинке окошка копируем номер цвета. Вот этот набор букв и чисел нам и нужен, его вставляем в код. Не забываем, что перед кодом цвета всегда должен стоять значок решетки "#".




У меня в итоге получился вот такой код, если кому-то понадобиться для понимания и осмысления:)



/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #fcfdff;
border: 2px solid #367a8d;
border-radius:15px;
color:#367a8d;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #ebf9fe;
}
#ContactForm1_contact-form-email-message{
width: 550px;
height: 175px;
margin: 5px auto;
padding: 30px;
background: #fcfdff;
border: 2px solid #367a8d;
border-radius:30px;
color:#367a8d;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding:0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #367a8d;
border: 1px solid #367a8d;
border-radius:30px;
}
#ContactForm1_contact-form-submit:hover {
background:#367a8d;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}


Вот собственно и все! Теперь каждый может создать для себя совершенно индивидуальную форму обратной связи!:) 

Творческих успехов!
Ваша Теремошка

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

  1. Аня, спасибо огромное!!!

    ОтветитьУдалить
  2. Аня, спасибо большое)) очень полезная информация))

    ОтветитьУдалить
    Ответы
    1. Лара, большое пожалуйста!:) Очень рада, что оказалось полезным!:)

      P.S. Очень симпатичный новый дизайн у твоего блога!:)

      Удалить
    2. спасибо))) очень приятно))) твоя статья очень помогла)))

      Удалить
  3. Вот это действительно очень нужная инфа!!! Спасибо большое!

    ОтветитьУдалить
  4. Спасибо, что поделилась! Очень ценная информация!!!

    ОтветитьУдалить
    Ответы
    1. Настя, пожалуйста! Удачного творчества:)

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

    ОтветитьУдалить
  6. Здравствуйте Аня! Подскажите пжл! Сделала все как написано у Лены в блоге, но форма-гаджет(которую первую создавали, у меня она в подвале) не скрылась! И стиль css почему то к моей форме на странице КОНТАКТЫ не применяется(хотела поменять шрифт и т д)В чем ошибка? Спасибо!

    ОтветитьУдалить
    Ответы
    1. PS мой блог http://berezhnayastudio.blogspot.ru/p/blog-page_47.html

      Удалить
    2. Аня, здравствуйте! Честно говоря, я уже так давно с этим разбиралась, что вот так и не вспомню. Думаю, надо код смотреть. Или Вы где-то галочку какую-то не сняли, вот и вышло у Вас их две штуки, то ли где в коде дублировали...

      Удалить

ShareThis