Данная заметка посвящена оформлению именно простых(не древовидных) комментариев, с описанием структуры, основных идентификаторов и селекторов, примерами того, как с помощью 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 - форма отправки.
Чтобы было легче вникнуть в структуру и дальнейший код, я сделал такую простенькую визуальную схему:
Чтобы не тянуть котэ за хвост, сразу выкладываю код 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 в шаблон, не забудьте прописать ссылки на иконки. Также, возможно, потребуется убрать комментарии к свойствам..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$="
#comments-block .avatar-image-container.avatar-stock img[src$="
#comments-block .avatar-image-container.avatar-stock img[src$="
#comments-block .avatar-image-container.avatar-stock img[src$="
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$="
background-image: url(.../open-id-icon.png); /*фоновое изображение и будет иконкой, загружайте картинки соответствующего размера, в данном случаи 48pxX48px*/
}
/*аватарка для блоггеров без иконки, селекторы равнозначны*/
#comments-block .avatar-image-container.avatar-stock a[href*="
#comments-block .avatar-image-container.avatar-stock img[src$="
background-image: url(.../blogger-icon.png);
}
/*аватар для анонимных посетителей */
#comments-block .avatar-image-container.avatar-stock img[title='
#comments-block .avatar-image-container.avatar-stock img[src$="
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*='
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%; /*на всю ширину блока*/
}
В итоге должно получится следующие:
Используемые для данного оформления иконки (не забывайте заливать к себе на хост):
На этом все, если что упустил буду дополнять походу.
©http://magentawave.com
P.S. В дальнейшем, при наплыве вдохновения, буду добавлять сюда другие варианты оформления.
На этом блоге хорошо отображение кода смотрится. Вы каждый раз через HTML-режим вручную div class="kod1" вставляеете или как-то автоматизировали этот процесс?
ОтветитьУдалитьКаждый раз в ручную. Все что есть в свободном доступе мне не понравилось, а самому ваять пока лень :)
УдалитьМда, много работы было проделано на этом блоге, я всё еще надеюсь, что есть HTML Editor, где я смогу конвертировать на автомате желанный код для Blogger....
ОтветитьУдалить"Вот тут я вас не совсем понял... В смысле чтобы вставляемый код автоматом подсвечивался? Так их полно в сети, выбирайте любой и прикручивайте к блогу, проблемы в этом нет хоть на Blogger, хоть где, просто мне не особо понравились, но задумка есть накатать свой, говорю же, просто лень пока :) А на счет Blogger или не Blogger, так на мой взгляд сейчас это вообще не имеет значения. А чтобы HTML символы в строчные выражения конвертировать использую CoderHTML - http://sdrv.ms/12nts3v "
Удалитьнет, я имел ввиду не подсветку HTML, а конвертирование текста в HTML.
УдалитьПример: В Word написать текст, отформатировать его как нужно: цвет шрифта, размер шрифта и тп. задатькликами мыши , нажать на кнопку Convert in HTML и готовый код на выходе получить, где div class=kod и тп в нужные места сам добавится. думаю такое в сети есть, например Easy Text To HTML Converter - очень простой конвертер, но это только в качестве примера, он не умеет конвертировать пробелы и могие другие теги.
Не знаю , я еще с таким не сталкивался, может просто не было в этом нужды, но вообще конечно звучит не плохо посмотрю что это за конвертор такой, спасибо за инфо
УдалитьА Вы не сталкивались с программой с помощью которой можно выкладывать посты на Блогспот?
УдалитьЯ как-то для ЖЖ такой прогой пользовался, очень удобно.
WindowsLive Редактор Блогов - там можно и на Блогспот постить
Удалитьспасибо, попробуем, я вспомнил, программа для ЖЖ называется Semagic. На странице разработчика пишут она и для Блоггер подходит. Еще BloGTK нашёл, её можно только на Линукс установить, еще пока ни одну прогу для Блоггер не пробовал, буду пробовать...
УдалитьИнтересно... Потестим, что за проги такие :)
УдалитьWindowsLive попробовал - очень доволен, к тому же можно плагины прикручивать (http://plugins.live.com/writer/browse?orderby=featured&page=1), на этом поиски клиента для Блоггер закончены :)
УдалитьОчень интересно. Спасибо вам за урок! =)
ОтветитьУдалитьПожалуйста, заходите еще ;)
УдалитьЗдравствуйте! Возможно ли в Blogger на персональном домене настроить нумерацию и ссылки на каждый комментарий?
ОтветитьУдалитьЗдравствуйте! Да, нумерацию возможно, а на счет ссылок уточните, что именно вы хотите настроить.
Удалить