К основному контенту

Настраиваем форму комментариев-придаем свой стиль

Сегодня расскажу об очередном методе как же придать своему шаблону на блоггер индивидуальный дизайн, при помощи изменения поля комментариев. На мой взгляд это один из важнейших элементов для выражения стилистики Вашего блога. Посмотрите на примеры:
Brick Style Comment Form

Wooden Style Comment Form
Baby Comment Form with message for spammers
comment-form2[1]
Так же есть возможность добавлять анимированные элементы.
Я думаю многим придутся по душе такие нововведения, так что давайте научимся как это делать:
1. Форма комментариев с выделением  и ребенком (Please do not spam)
а) Заходим в настройки шаблона и находим следующий тэг (используйте комбинацию ctrl+f):
<div class='comment-form'>
б) Затем замените данный тэг предоставленным ниже:
<div id='mbt-form'>
в) Найдите следующий тэг:
]]></b:skin>
и перед ним вставьте приведенный ниже CSS код
#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYIwDP5bof7d7tUtk6r8ICtsycDc4Pxj1DfjJMEsI-Y6EQfuBtGVoy3430act5HY7T-zK09BQY-cuOAyS1a82gIjFAcZHfZeDmHdKbKeSgVwaJHEzBzKrU8Zw-1Xak774M1bp3mCfVfdK/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
}
#mbt-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVuZh1cEobaXJZWkBwGfBWImTnqBID8w0CYcszztPmHq2QIuCeAUbzI3RojEWDRK4weCmw-EAxAkRAr6fOGnoSAJVMAtYm-5nDra52zX4oP8v6yBdqnGHut4TJOMvb0ekbWgtCcy-IcPG/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}
Сохраните шаблон и посмотрите форму комментариев =)
2. Теперь давайте обсудим элементы CSS кода которые помогут Вам настроить форму комментариев под себя. Вот три важных элемента:
#mbt-form iframe
#mbt-form iframe:hover
#mbt-form a
3. Объяснения по каждому элементу:
а) Настройка фона:
#mbt-form iframe
background : этот элемент отвечает за цвет фона, картинку фона и ее расположение:
  • #ffffff : Это цвет фона, его можно изменить при помощи- Color Chart
  • url : Это ссылка на картинку для фона, в начальном случае это ребенок , Вы можете вставить картинку какую пожелаете.
  • bottom right: Это позиция картинки (Справа внизу). Вы можете расположить картинку как захотите справа вверху , слева внизу , слева вверху для этого используйте команды: bottom right или bottom left или top right или top left
border: Границы
  • border size  7px, размер границ
  • border style  solid. Стиль границ Вы можете выбирать жирные, курсив, точки. Используйте для этого команды :solid, dotted, dashed. Посмотрите данный ресурс border styles
  • border color   #C7C7C7. Используйте CSS Color Chart для подбора цветов.
padding: Это элемент отвечает за расположение комментариев от текста, Вы можете изменять данный элемент на любой удобный.
font: Отвечает за стиль шрифтов. Установлены следующий параметры:
  • boldness : normal,
  • size : 12pt
  • Шрифт "ms sans serif". Если браузер не имеет формата шрифта "ms sans serif" то установлен дополнительный Arial.
color: Цвет
Используйте подбор цветов чтобы выбрать нужный цвет текста
width: Ширина формы комментариве
б) Выделение при наведении мыши:
#mbt-form iframe:hover
Когда пользователь наведет на поле комментариев мышью, то его цвет будет меняться.
Сдесь Вы найдете элементы объясненные ранее, только данные установки входят в силу при наведении на поле комментариев мыши.
в) Изменение цвета ссылок:
#mbt-form a
Этот элемент изменяет цвет двух ссылок : Выйти и и подписать по E-mail.
color: Измените цвет на подходящий.
Вот так не сложно Вы можете придать своему блогу уникальный вид.

Комментарии

  1. сделал все по инструкции от и до, но форма отзывов так и не поменялась...так и осталась форма установленная по умолчанию

    ОтветитьУдалить
  2. может не ту строчку изменили.

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

Отправить комментарий

Популярные сообщения из этого блога

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж

Добавляем красивый гаджет Поделиться

Если Вы регулярно совершенствуете свой блог, то Вам пригодится данная не сложная публикация, о том как добавить красивую кнопку "Поделиться". Ее особенность в том, что при наведение курсора она раскрывается и предлагает несколько сервисов в которых можно разместить ссылку на Ваш блог. Демо можно посмотреть тут!

Открыть несколько ссылок одним кликом мыши

Многие из Вас наверняка встречали сайты, на которых нажав на одну ссылку открывается сразу несколько сайтов. Так делают те кто хочет прорекламировать независимый интернет ресурс, в таком случае открывается ссылка по которой вы должны перейти и еще одна, так-же это делают для увеличения просмотров определенных страниц на сайте, либо если действительно необходимо открыть сразу две ссылки. Для обычного блоггера это может быть полезным так как заинтересовав человека одной ссылкой Вы как бы повышаете популярность Вашего ресурса, так как он посетит вместо одной страницы в Вашем блоге сразу несколько. Чтобы вставить такую ссылку необходимо к тексту добавить следующий код: <a href="http://www.ссылка1.com/" target="_blank" onmouseover="window.open(&quot;&quot;http://www.ссылка2.com&quot;&quot;);window.open(&quot;&quot;http://www.ссылка3.com&quot;&quot;);">Click Here Link Bucket</a>   Вставьте свои ссылки, увеличьт