Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Дизайн окна формы создания комментариев в Блоггере.

Всем доброго времени суток. Сегодня предлагаю вам шпаргалку, как изменить дизайн окна (формы) создания комментариев. Многие блогеры пользуются ей. У меня на этом блоге она не установлена, может быть пока дожидается своего часа. Кто не совсем понимает о чём идёт речь, загляните в админ. панель блога-настройки-сообщения и комментарии.
дизайн окна формы комментариев

И в самом низу страницы есть такая опция.

Она не очень приглядная и, скорее всего, многие вообще не обращают на неё внимание. Вот, как-то так она выглядит. Текст сочиняете сами.


С помощью небольших изменений в шаблоне, попробуем ей придать привлекательности. Сразу в глаза бросается.

дизайн формы создания комментариев

Поменять стили на свои не составит особого труда и тогда окно формы создания комментариев прекрасно впишется под любой дизайн.

Заходим во вкладку шаблон и обязательно делаем резервную копию. С помощью клавиш Ctrk+F находим вот такую строчку.

<p><data:blogCommentMessage/></p>

Обратите внимание, что таких строчек две и расположены они недалеко друг от друга.


Каждую из них аккуратно удаляем и на их место вставляем вот такую строку.

<div id='pra-comment'><data:blogCommentMessage/></div>

Теперь там же в шаблоне находим уже знакомую всем строку ]]></b:skin> и над ней устанавливаем следующий код.

#pra-comment{
position: relative;
background:#F3C5C5;
width:100%;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #AD3000;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #AD3000;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #F3C5C5; /* цвет такой же, как цвет общего фона.  */
border-width: 9px;
left: 10%;
margin-left: -30px
}


Цветовые решения - на ваше усмотрение. Можно форму сделать вообще без фона в одной рамочке. Поменяйте значение background:#F3C5C5; на background:none;

После всех изменений в шаблоне нажмите на кнопку просмотр и если нет никаких предупреждений сохраняйте изменения.

Вот так, без особых хлопот поменяли и приукрасили дизайн блога. Ваши посетители обязательно теперь обратят внимание на такое окно.

А здесь весёлые смайлики для комментариев.

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


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


2 комментария:

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML