Как Вам выделить комментарии автора блога в Blogger?

Дорогие друзья, с недавних пор разработчики сервиса для ведения блогов Blogger несколько обновили систему комментирования, и хоть самого нужного в ней не появилось, по крайней мере, одна фишка привлекла мое внимание.

Собственно меня уже не первый раз спрашивают о том, как выделить комментарий автора блога в Blogger, но только теперь я решил разобраться с этим вопросом и написать полноценную статью. Хотя, назвать её инструкцией для новичков не получится, т.к. здесь нам может понадобиться вносить изменения в сам шаблон. Ничего сложного в том нет, но ошибка может привести к самым нежелательным последствиям.

Как проверить поддерживает ли мой шаблон выделение комментариев авторов блога?

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

1. Авторизуйтесь на Blogger.
2. В списке блогов выберите ваш блог.
3. Перейдите в раздел «Шаблон».
4. На открывшейся странице нажмите кнопку оранжевую «Настроить».

5. Откроется дизайнер шаблона Blogger. Здесь, на серой верхней части, найдите и кликните ссылку «Дополнительно».
6. Прокрутите появившийся список в конец и кликните ссылку «Добавить CSS»

7. В конец содержания появившегося текстового поля «Добавить персонализированную таблицу CSS» добавьте строку:

   .blog-author { background-color:red }

8. Нажмите оранжевую кнопку «Применить к блогу» в верхнем правом углу.

1. Откройте свой блог в отдельно окне или вкладке браузера.
2. Откройте один из своих постов в блоге, где есть ваш комментарий и посмотрите, изменился ли он. Должно получиться что-то вроде следующего:

Если изменения имеют место быть, то вы можете выделить комментарии автора блога в Blogger так как вам того хочется через дизайнер шаблонов. Следует отметить, что CSS-класс .blog-author применим только к строке с именем автора. К сожалению, возможность работы с родительскими элементами в рамках CSS2 и даже CSS3 не предусмотрена. Такая фишка вроде бы есть в CSS4, но она не поддерживается ни одним из существующих на данных момент браузеров, а значит, и говорить об этом пока нет смысла. Как вариант, вы можете интегрировать нужный класс соответствующему элементу шаблона, о чем я расскажу в следующем разделе статьи.

Интегрирование класса blog-author в шаблон блога на Blogger.

Сразу скажу, что если вы не имеете навыков работы с шаблонами на Blogger, ниже приведенная инструкция будет вам сложна к пониманию. Я просто не могу объяснить проще чем оно есть. Тем не менее, я постарался сделать инструкцию максимально доступной и безопасной в использовании.

1. Авторизуйтесь на Blogger.
2. В списке блогов выберите ваш блог.
3. Перейдите в раздел «Шаблон».

4. Перед тем как приступать к редактированию шаблона, сделайте его резервную копию. Для этого, на открывшейся странице, нажмите кнопку «Резервное копирование и восстановление», которая находится в правом верхнем углу. В открывшемся окне нажмите кнопку «Загрузить шаблон полностью» и сохраните скаченный файл на свой компьютер.

   

   В дальнейшем, в случае возникновения проблемы с шаблоном, вы сможете восстановить шаблон из резервной копии в этом же окне. Для этого вам надо будет нажать кнопку «Выберите файл», выбрать его на своем компьютер и нажать кнопку «Загрузить».

5. Вернемся к разделу «Шаблон». Для того чтобы приступить к редактированию шаблона нажмите кнопку «Изменить HTML».

   

6. На открывшейся странице редактора шаблона перейдите к виджету «Blog1», выбрав его из списка виджетов. Таким образом вы сразу перейдете к нужной части вашего шаблона.

   

7. Виджет Blog1 содержит ряд фрагментов (includable), среди которых нас интересует тот, что с id='comment'. Для его раскрытия, кликните по стрелочке на серой полоске в соответствующей строке.

   

8. Теперь нам нужно найти соответствующий HTML-элемент в который мы интегрируем шаблонную переменную data:comment.authorClass, отвечающую за вставку CSS-класса .blog-author. По идее он будет располагаться в приделах цикла вывода комментариев:

   <b:loop values='data:post.comments' var='comment'>
   …
   </b:loop>

   Чтобы не усложнять вам задачу, предлагаю создать контейнер-обвертку для комментария, которая будет выглядеть следующим образом:

   <b:loop values='data:post.comments' var='comment'>
   <div expr:class='data:comment.authorClass'>
   …
   </div>
   </b:loop>

   Обращаю ваше внимание на то, что троеточия (…) подразумевается весь содержащийся в цикле loop код.

9. Жмем оранжевую кнопку «Сохранить шаблон». Если все правильно, то с учетом выше описанной проверки вы получите что-то вроде следующего:

   

Таким образом, вам осталось лишь оформить вид комментария с помощью CSS.

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

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

Для начала давайте уточним, что у нас получилось два элемента с CSS-классом .blog-author. Первый это DIV обвертка для всего комментария, а второй DT строка с именем автора комментария. Этим мы и воспользуемся.

Сразу перейдите в дизайнер шаблона, к текстовому полю «Добавить персонализированную таблицу CSS», так как я рассказал выше. Найдите нашу строку:

.blog-author { background-color:red }

и замените её на следующий код:

dt.blog-author a { color:#588526 }
div.blog-author { background-color: #E1E1E1 }

Не забудьте нажать кнопку «Применить к блогу»! Фон комментария станет серым, а ссылка с именем его автором – зеленой.

В общем, вариантов тут много, но теперь вы знаете что и как делать. Надеюсь моя статья была вам полезна. Буду благодарен, если поделитесь её с друзьями, поставите плюсы, лайки и т.д. На этом у меня всё. Спасибо за внимание. Удачи!