Дизайн обычных (линейных) комментариев Blogger(Blogspot)

Логотип Blogger и деревянная линейкаНе смотря на возможность использовать древовидную структуру в комментариях блога, дизайн которой уже был рассмотрен, многие блоггеры по-прежнему отдают предпочтение и выбирают обычную.
  Данная заметка посвящена оформлению именно простых(не древовидных) комментариев, с описанием структуры, основных идентификаторов и селекторов, примерами того, как с помощью CSS, выделить автора блога, установить собственные аватары по умолчанию и добавить нумерацию для линейных комментариев в стандартном шаблоне Blogger.
Комментарии линейного типа, в отличии от древовидного, строятся на основе списка определений. Также различаются и селекторы внутренних блоков, поэтому один и тот же CSS код не может быть применен для обеих типов.
  Для оформления можно использовать такие идентификаторы и селекторы:
- #comments и .comments - идентификатор и селектор всего блока;
- #comments-block и .avatar-comment-indent - блок с комментариями(идентификатор и селектор соответственно);
- .comment-author - блок заголовка, в нем содержится ссылка на профиль и контейнер с аватаркой. У комментариев автора блога, к нему добавляется дополнительный селектор - .blog-author;
- .comment-body - блок с текстом;
- .comment-footer - подвал комментария, внутри содержится блок с датой отправки отзыва и кнопка "Удалить комментарий";
- .avatar-image-container - контейнер с аватаркой посетителя, причем если пользователь оставляет отзыв используя свой Blogger-аакаунт или Googgle+ то картинка будет взята оттуда и блок будет иметь добавочный селектор .vcard, в других случаях добавочный селектор будет - .avatar-stock;
- .comment-timestamp - блок с датой;
- .comment-form - форма отправки.
  Чтобы было легче вникнуть в структуру и дальнейший код, я сделал такую простенькую визуальную схему:
HTML-структура линейных комментариев
  Чтобы не тянуть котэ за хвост, сразу выкладываю код CSS готового дизайна для линейных комментариев Blogger, основные и важные моменты закомментированы, если что не понятно буду дополнять по ходу появления вопросов.
Для всех селекторов в коде прописан полный путь, начиная с идентификатора родителя, это сделано для того чтобы точно указать на изменяемый элемент и избежать конфликта со стандартными стилями блоков по умолчанию
/*стиль всего блока*/
.comments {
 background: #eee;
 border: 1px solid #8A8A8A;
 border-radius: 3px;
 padding: 10px;
 margin: 10px 0;
}
/*стиль блока комментариев - общий контейнер списка*/
#comments-block.avatar-comment-indent {
 margin-left: 55px; /*отступ слева, величина выставлена немного больше чем желаемый размер аватарки*/
 counter-reset: comNam; /*устанавливаем идентификатор счетчика комментариев*/
}
/*общий стиль для основных блоков комментария*/
#comments .avatar-comment-indent .comment-author,
#comments .avatar-comment-indent .comment-body,
#comments .avatar-comment-indent .comment-footer {
 position: relative; /*позиционирование указываем обязательно*/
 background: #ffffff;
 border-style: solid; /*стиль рамки, если нужна*/
 border-color: #cbc8e6; /*цвет рамки*/
 box-shadow: 2px 10px 10px 1px #999; /*тень, указана для каждого блока, но между ними её видно не будет, т.к. между ними убраны промежутки и подобраны соответствующие параметры*/
 color: #000; /*цвет текста*/
 padding: 7px; /*внутренние отступы*/
 margin: 0; /*обнуляет все внешние отступы, выравнивая все блоки*/
}
/*отдельный стили заголовка*/
#comments .avatar-comment-indent .comment-author {
 border-radius: 5px 5px 0 0; /*скругление углов - верхние левый и правый, нижние без скругления*/
 border-width: 1px 1px 0 1px; /*толщина рамки - [лево][верх][низ][право], 0(ноль) означает что рамки не будет*/
 font: normal normal 14px Arial, sans-serif; /*стиль текста - начертание, жирность, размер, шрифт*/
 min-height: 34px; /*минимальная высота, вмести с отступами равна высоте иконки автора блога - 48px*/
}
#comments .avatar-comment-indent .comment-author:after {
 counter-increment: comNam; /*устанавливаем счетчик для блока*/
 content: counter(comNam); /*устанавливаем нумерацию*/
 position: absolute; /*позиционируем абсолютно*/
 right: 50px; /*расстояние(отступ) справа, чуть больше ширины иконки автора блога*/
}
/*стили блока текста комментария*/
#comments .avatar-comment-indent .comment-body {
/*
!скругление углов не устанавливаем
*/

 border-width: 0 1px 0 1px;
 font: normal normal 15px Tahoma, sans-serif;
 padding: 5px 7px; /*внутренние отступы*/
}
/*уголок для реализации "словесного пузыря"*/
#comments .avatar-comment-indent .comment-body:after,
#comments .avatar-comment-indent .comment-body:before {
 right: 100%;
 border-style: solid;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
}
#comments .avatar-comment-indent .comment-body:after {
 border-color: rgba(255, 255, 255, 0);
 border-right-color: #ffffff;
 border-width: 10px;
 top: 2px;
 margin-top: -10px;
}
#comments .avatar-comment-indent .comment-body:before {
 border-color: rgba(203, 200, 230, 0);
 border-right-color: #cbc8e6;
 border-width: 11px;
 top: 2px;
 margin-top: -11px;
}
/*стиль подвала комментария*/
#comments .avatar-comment-indent .comment-footer {
 border-radius: 0 0 5px 5px;
 border-width: 0 1px 1px 1px;
 margin: 0 0 1.5em 0; /*задает внешний отступ снизу, от следующего комментария*/
 min-height: 20px;
}
/*стиль ссылки с датой написания отзыва*/
#comments .avatar-comment-indent .comment-footer .comment-timestamp > a {
 float: right; /*располагает справа*/
 background: #F0F0F0;
 color: #000;
 border: 1px solid #A1A1A1;
 border-radius: 5px;
 font: normal normal 14px Tahoma, sans serif;
 text-decoration: none;
 padding: 3px;
}
/*стиль для контейнера с иконкой*/
#comments-block .avatar-image-container {
 position: absolute;
 left: -55px; /*смещение влево - !равное внешнему отступу всего блока*/
 max-height: 50px; /*максимальная высота блока = высота картинка + толщина рамки*/
 max-width: 50px; /*максимальная ширина блока = ширина картинки + толщина рамки*/
 height: 50px; /*высота, равна максимальной*/
 width: 50px; /*ширина, равна максимальной*/
}
/*стили для тега*/
#comments .avatar-image-container img {
 border: 1px solid #eeeeee; /*рамка*/
 border-radius: 5px; /*скругление*/
/*
!параметры такие же как и для контейнера иконки
*/

 max-height: 50px;
 max-width: 50px;
 width: 50px;
 height: 50px;
}
/*общий стиль для тега с определенными атрибутами*/
#comments-block .avatar-image-container.avatar-stock img[src$="openid16-rounded.gif"],
#comments-block .avatar-image-container.avatar-stock img[src$="b16-rounded.gif"],
#comments-block .avatar-image-container.avatar-stock img[src$="anon16-rounded.gif"],
#comments-block .avatar-image-container.avatar-stock img[src$="blank.gif"] {
 border: 50px solid transparent; /*рамка, ширина равна размерам контейнера, цвет прозрачный*/
 background-position: 50px -50px; /*смещение фона в соответствии с размерами блока иконки и шириной рамки*/
 background-repeat: no-repeat;
 height: 0;
 width: 50px; /*!ширина равная ширине контейнера*/
}
/*аватарка для пользователе OpenID*/
#comments-block .avatar-image-container.avatar-stock img[src$="openid16-rounded.gif"] {
 background-image: url(.../open-id-icon.png); /*фоновое изображение и будет иконкой, загружайте картинки соответствующего размера, в данном случаи 48pxX48px*/
}
/*аватарка для блоггеров без иконки, селекторы равнозначны*/
#comments-block .avatar-image-container.avatar-stock a[href*="www.blogger.com"] img,
#comments-block .avatar-image-container.avatar-stock img[src$="b16-rounded.gif"] {
 background-image: url(.../blogger-icon.png);
}
/*аватар для анонимных посетителей */
#comments-block .avatar-image-container.avatar-stock img[title='Анонимный'],
#comments-block .avatar-image-container.avatar-stock img[src$="anon16-rounded.gif"] {
 background-image: url(.../hideman-icon.png);
}
/*стиль аватарки для всех остальных пользователей*/
#comments-block .avatar-image-container.avatar-stock img {
 background: url(.../someone-icon.png) 50px -50px no-repeat;
}
/*стиль для иконки обозначающей автора блога*/
#comments .avatar-comment-indent .blog-author:before {
 content: '';
 position: absolute;
 z-index: 1;
 right: 0;
 top: 0;
 background: url(.../admin-icon.png) no-repeat;
 border: 0;
 padding: 0;
 margin: 0;
 height: 48px;
 width: 48px;
}
/*отдельный стиль для выделения блока с именем и ссылкой автора блога*/
#comments .avatar-comment-indent .blog-author > a[href*='http'] {
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAp0lEQVR4XmMgCdRK1EfXx9XI45CuS2n43vAfCH/XV2KTNm/4C5SEwjo/DAX1s4ASCLgJQ0HDJhQFpzEU1LcgK6ifi+kDyYbXcAVf6jWwOVO74XDDP6Duc3UWmLLcDN0MsQzMlQKVQgyMDP5AHi+yNCfDcYb/QPiUYSPDOob7YPZpBi6EgnagJCbsgUnzMnzGquAbgwBEgR9QAjsMhSjQY8jDAQ0ZCAMA7Ct83ZRitFEAAAAASUVORK5CYII=) 5px 50% #eee no-repeat;
 border-radius: 3px;
 font: normal normal 14px Arial;
 padding: 3px 5px 3px 25px;
 margin-right: 5px;
}
/*форма ввода комментария*/
.comment-form {
 max-width: 100%; /*на всю ширину блока*/
}
  Перед тем как добавить CSS в шаблон, не забудьте прописать ссылки на иконки. Также, возможно, потребуется убрать комментарии к свойствам.
  В итоге должно получится следующие:
Дизайн линейных комментариев
  Используемые для данного оформления иконки (не забывайте заливать к себе на хост):
Иконка АдминИконка Blogger сераяИконка АнонимныйИконка планета ЗемляИконка Человек

  На этом все, если что упустил буду дополнять походу.
©http://magentawave.com
P.S. В дальнейшем, при наплыве вдохновения, буду добавлять сюда другие варианты оформления.

13 комментариев:

  1. На этом блоге хорошо отображение кода смотрится. Вы каждый раз через HTML-режим вручную div class="kod1" вставляеете или как-то автоматизировали этот процесс?

    ОтветитьУдалить
    Ответы
    1. Каждый раз в ручную. Все что есть в свободном доступе мне не понравилось, а самому ваять пока лень :)

      Удалить
  2. Мда, много работы было проделано на этом блоге, я всё еще надеюсь, что есть HTML Editor, где я смогу конвертировать на автомате желанный код для Blogger....

    ОтветитьУдалить
    Ответы
    1. "Вот тут я вас не совсем понял... В смысле чтобы вставляемый код автоматом подсвечивался? Так их полно в сети, выбирайте любой и прикручивайте к блогу, проблемы в этом нет хоть на Blogger, хоть где, просто мне не особо понравились, но задумка есть накатать свой, говорю же, просто лень пока :) А на счет Blogger или не Blogger, так на мой взгляд сейчас это вообще не имеет значения. А чтобы HTML символы в строчные выражения конвертировать использую CoderHTML - http://sdrv.ms/12nts3v "

      Удалить
    2. нет, я имел ввиду не подсветку HTML, а конвертирование текста в HTML.
      Пример: В Word написать текст, отформатировать его как нужно: цвет шрифта, размер шрифта и тп. задатькликами мыши , нажать на кнопку Convert in HTML и готовый код на выходе получить, где div class=kod и тп в нужные места сам добавится. думаю такое в сети есть, например Easy Text To HTML Converter - очень простой конвертер, но это только в качестве примера, он не умеет конвертировать пробелы и могие другие теги.

      Удалить
    3. Не знаю , я еще с таким не сталкивался, может просто не было в этом нужды, но вообще конечно звучит не плохо посмотрю что это за конвертор такой, спасибо за инфо

      Удалить
    4. А Вы не сталкивались с программой с помощью которой можно выкладывать посты на Блогспот?
      Я как-то для ЖЖ такой прогой пользовался, очень удобно.

      Удалить
    5. WindowsLive Редактор Блогов - там можно и на Блогспот постить

      Удалить
    6. спасибо, попробуем, я вспомнил, программа для ЖЖ называется Semagic. На странице разработчика пишут она и для Блоггер подходит. Еще BloGTK нашёл, её можно только на Линукс установить, еще пока ни одну прогу для Блоггер не пробовал, буду пробовать...

      Удалить
    7. Интересно... Потестим, что за проги такие :)

      Удалить
    8. WindowsLive попробовал - очень доволен, к тому же можно плагины прикручивать (http://plugins.live.com/writer/browse?orderby=featured&page=1), на этом поиски клиента для Блоггер закончены :)

      Удалить
  3. Очень интересно. Спасибо вам за урок! =)

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, заходите еще ;)

      Удалить

Следующее Предыдущее

BestProject