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

Как оказалось, преобразить внешний вид блога - это еще полбеды половина дела, куда труднее привести его к желаемому виду. Dr.AKULAvich

🕛 09.10.2008, 09:42

Особенно, если знания html/CSS начинаются и заканчиваются в окрестностях «Скопировать блок A. Вставить A между тегами B». А ведь так хочется сделать лучше, и чтобы получилось не как всегда.

С момента публикации «Перекройка шаблона Blogger или N шагов к настоящему» произошли как несущественные (форма подписки по e-mail была заменена на лаконичный конверт справа от иконки RSS, footer сообщений напоминает о подписке на обновления, размеры шрифтов элементов), так и значимые изменения. О последнем подробнее: мне не нравился вид комментариев к посту, потому что они не имели четкой границы и портили вид пиктограммами сервиса. Согласитесь, удобство чтения комментариев не последний фактор usability. Сразу после статьи порой можно прочитать еще несколько, созданных читателями :-) Далее идет описание последнего марш-броска с напильником.

1. С инструментом наперевес отправляемся по лестнице «Макет - изменить HTML». Сохраняем текущий шаблон во избежание неприятных казусов. 2. В секцию Comments вносим css-верстку. У меня так:

 /* Comments - */ #comments h4 {
 }
 .comment-author { background-image: none; background-color: #f3f3f3; margin-bottom: 0px; padding: 6px 0 6px 10px; border: 1px solid #ccc; border-bottom: 1px solid #FFF7CF; }
 .comment-body { font-size: 14px; background-color: #eaeaea; margin-top: 0px; margin-bottom: 10px; padding: 10px; border: 1px solid#ccc; border-top: 1px solid #CBC4AC; }
 .comment-timestamp { float: right; margin: 0 10px 0 0; }

3. Чтобы избавиться от иконок рядом с ником комментатора, активируйте checkbox «Расширить шаблоны виджета» и замените
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
на
<dt class='comment-author' expr:id='data:comment.anchorName'>
4. Если вы переместите конструкцию

 <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span>

сразу после строки из 3-его шага, то ссылка с датой комментария расположится напротив имени комментатора.

Если понадобится выделить ответы автора, присмотритесь к данному трюку.
На этом алгоритм завершается. До новых встреч! :)