Гаджет "Зворотній зв'язок" для Blogger
гаджет форма для зв'язку
Не так давно серед гаджетів від розробників Blogger з'явився новий - форма для зв'язку. Гаджет дуже корисний тим, що дозволяє організувати зворотний зв'язок з читачами і відвідувачами блогу. І відповідати на питання не тільки в коментарях.
Додати форму зворотного зв'язку нескладно:
1. Зайти в пункт Дизайн Вашого блогу, натиснути Додати гаджет.
2. Вибрати Додаткові гаджети> Форма для зв'язку
І зберегти його:
Додати гаджет зворотного зв'язку можна в будь-який сайдбар або в нижню частину блогу.
Але якщо Ви захочете розмістити форму "Зворотній зв'язок" на окремій сторінці, то для цього потрібно проводити зміни в коді шаблону. Ідею я взяла тут.
1. Для початку створіть нову "порожню" сторінку. Назвіть її, наприклад, "Контакти".
2. Далі в режимі редагування сторінки HTML вставте ось цей код:
гаджет форма для зв'язку
Не так давно серед гаджетів від розробників Blogger з'явився новий - форма для зв'язку. Гаджет дуже корисний тим, що дозволяє організувати зворотний зв'язок з читачами і відвідувачами блогу. І відповідати на питання не тільки в коментарях.
Додати форму зворотного зв'язку нескладно:
1. Зайти в пункт Дизайн Вашого блогу, натиснути Додати гаджет.
2. Вибрати Додаткові гаджети> Форма для зв'язку
І зберегти його:
Додати гаджет зворотного зв'язку можна в будь-який сайдбар або в нижню частину блогу.
Але якщо Ви захочете розмістити форму "Зворотній зв'язок" на окремій сторінці, то для цього потрібно проводити зміни в коді шаблону. Ідею я взяла тут.
1. Для початку створіть нову "порожню" сторінку. Назвіть її, наприклад, "Контакти".
2. Далі в режимі редагування сторінки HTML вставте ось цей код:
<
form
name
=
"contact-form"
>
<
p
>
</
p
>
Имя
<
input
id
=
"ContactForm1_contact-form-name"
name
=
"name"
size
=
"30"
type
=
"text"
value
=
""
/>
<
p
>
</
p
>
Адрес Email <
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
=
"Отправить"
/>
<
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
>
Справа в налаштуваннях пункту Параметри виберіть пункт Використовувати клавішу Enter для переносу рядків:
Натисніть кнопку Готово і потім Опублікувати сторінку.
3. Перейдіть в пункт Шаблон >> Створення резервних копій та відновлення. Завантажте резервну копію шаблону на свій комп'ютер.
5. Вставка наступного коду визначить стилі CSS форми зворотного зв'язку (оформлення, кольору) і прибере цей гаджет з бічній панелі блогу (відображається тільки на статичній сторінці).
Пропоную Вам три варіанти стилів - для блогів різного кольору оформлення. Вибираєте потрібний код и вставляєте перед]]> </ b: skin>.
1) Якщо Ваш блог на сірому фоні, то Вам підійде код для форми зворотного зв'язку в сірих тонах, який я взяла з блогу з інструкцією по закріпленню гаджета до окремої сторінки (див. Вище)
/* 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;
}
Комментариев нет:
Отправить комментарий