Как красиво оформить комментарии в блоге

Доброго времени суток, всем кто читает шпаргалки блогерши. Вновь возвращаемся к теме красивости. Хочу предложить сегодня некоторое  дополнение к оформлению комментариев блога. Яркая  надпись о количестве комментариев и предложении прокомментировать, наверняка привлечёт внимание ваших посетителей. Или просто добавит ещё один красивый элемент в дизайне страницы.

Так выглядит блок в стандартном виде

Так после изменений

Для этого нам необходимо зайти во вкладку шаблон и сделать резервную копию. Позволю себе сделать небольшое отступление. Пожалуйста, прочитайте статью стили CSS в шаблоне блога. Вам станет гораздо проще понять как легко можно найти тот или иной участок кода. И строку ]]></b:skin>. Наверное, вы обратили внимание, что очень часто при внесении дополнений в дизайне предлагают CSS коды, блоки которых всегда вставляются перед этой строкой.

Сегодня нам придётся опять найти такую строчку. Сначала с помощью клавиш Ctrl+F попробуйте найти #comments h4 {. Если он у вас есть, его просто нужно весь удалить и вставить код, который приведён ниже. В некоторых шаблонах  #comments h4 вообще нет. В этом случае просто вставляйте код перед ]]></b:skin>

#comments h4 {
padding : 10px;
line-height : 15px;
margin-left:20px;
}
#comments h4, .comments .comment-header, .comments .comment-thread.inline-thread .comment {
position : relative;
}
#comments h4, .comments .continue1 a {
position:relative;
padding:5px 10px;
color:#fff;
border-radius:10px;
width:180px;
font-family: Georgia;
text-align: center;
border:solid #444 3px;
}
#comments h4, .comments .user a, .comments .continue1 a {
font-size : 18px;
}
#comments h4, .comments .continue1 a {
font-weight : bold;
color : #EBEBEB;
font-family: Verdana;
text-shadow: 3px 1px 2px #000;
background-color: #0099FF;
font-size: 18px;
font-style: italic;
}
#comments h4:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:80px;
width:0;
height:0;
border-width:0;
border-right-width:10px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #444;
}
#comments h4:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #0099FF;

Не забудьте просмотреть и сохранить шаблон. Можно немного изменить, в
зависимости от дизайна, цвет самого блока.

Ну и другие настройки -размер текста, цвет, тень и прочие. В этом не составит труда разобраться. Посмотрите на то, что у меня получилось на этом блоге. И ещё один небольшой совет. Сделайте для себя ещё один блог на шаблоне, аналогичном вашему и пробуйте сначала на нём все изменения.

На сегодня прощаюсь с вами. Хороших всем выходных.

Удачи всем нам

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

введите пожалуйста свой email :