Как выделить автора блога в комментариях Blogger (Blogspot)

Лев лежит на камне  Иногда, читая комментарии в блогах, не разобрать где пишет автор ресурса, а где посетитель. Чтобы избежать такой путаницы, многие блоггеры используют разнообразные хитрости, не всегда удобные и часто ненужные.
  Платформа Blogger позволяет без труда изменить стиль всего блока комментариев и отдельно оформить только комментарии автора блога, применяя только CSS свойства к уже имеющимся в стандартном шаблоне элементам. В этой заметке подробно показано как это сделать, с примерами CSS кода.
Стандартная иконка автора в комментариях Blogger Конечно, некоторое отличие, по умолчанию, уже предусмотрено в Blogger, это стандартный значок - кружочек с карандашиком после имени, от которого все благополучно избавились или хотят избавиться, потому как выглядит он весьма уныло. Однако, с помощью стилевых свойств, этот элемент можно изменить как угодно, задав ему желаемый вид и расположение. Необходимо лишь добавить CSS к уже имеющемуся в стандартном шаблоне Blogger селектору, который записан так:
- .comments .comments-content .icon.blog-author - селектор элемента с иконкой. В данном случаи, .blog-author - добавочный класс, в комментариях администратора блога.
  Записанные по умолчанию свойства можно удалить, а вместо них добавить собственные.
  Чтобы скрыть этот значок, достаточно найти указанный выше селектор в шаблоне и просто заменить существующий стиль на такой:
.comments .comments-content .icon.blog-author {
 display:none;
 width:0;
}
  Но вы можете скачать или сделать самостоятельно подходящую иконку и расположить её как угодно в блоке комментария:
Скриншот блока комментариев Blogger
  CSS в этом случаи будет таким:
.comments .comments-content .icon.blog-author {
 position: absolute;
 right: 0;
 top: 0;
 background: url(...image/admin-icon.png) no-repeat;
 border: 0;
 padding: 0;
 margin: 0;
 height: 48px;
 width: 48px;
}
  На этом, в общем-то можно и остановиться, а можно пойти еще дальше. Дополнительно оформить и блок с именем/ником автора блога, используя все тот же отдельный класс .blog-author. Например так:
  Чтобы реализовать такое, нужно применить стиль для селектора:
- .comments .comments-content .user.blog-author.
  Например:
.comments .comments-content .user.blog-author {
 background: url(...image/man.png) 5px 50% #eee no-repeat; /*картинка-иконка, положение, цвет фона, без повторения*/
 border: 1px solid #ccc;
 border-radius: 3px;
 font: normal normal 14px Arial;
 padding: 3px 5px 3px 25px; /*внутренние отступы [верх][право][низ][лево] - указываем с учетом размеров изображения иконки*/
 margin-right: 5px;
}
- .user - селектор элемента с информацией о комментаторе - имя, ссылка и т.д. Пользуясь информацией из этого элемента, можно при помощи CSS сделать простые статусы в комментариях блога, для всех посетителей.
  ©http://magentawave.comВот и все, теперь комментарии админа блога оригинальны и их не спутаешь с другими. Если кому приглянулись картинки, вот те что использовались в примерах:
  Только не забудьте перезалить к себе на хостинг или в черновик.
  Пишите отзывы делитесь впечатлением.

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

  1. А ведь я и не задумывалась зачем этот значок. Сама не использую, вот у других и не смотрела.

    -moz-border-radius: 3px 3px 3px 3px; - так не надо
    border-radius: 3px; - это свойство понимается без префиксов.

    ОтветитьУдалить
    Ответы
    1. Кстати, мне нравится оформление комментов в отдельные блоки. У себя пробовала - не понравилось. А здесь аккуратно получилось, поскольку ширина не большая

      Удалить
    2. "-moz-border-radius: 3px 3px 3px 3px; - так не надо" - покуда есть люди которые до сих пор сидят на FF 3.6 и даже ниже (разных мод-ций), то пожалуй надо, хуже от этого не будет. Хаки если пишутся, то пишутся ко всему, либо не пишутся вовсе - это мое мнение, хотя бывает пренебрегаю :)
      На любой ширине все делается, на том блоге (с которого скрин в посте) я вообще стараюсь, где можно, все размеры только в % делать, так что он у меня "резиновый", на всех мониторах будет как положено - почти одинаковый :)

      Удалить
  2. а получилось, побывала на тестовом блоге, я там все эксперименты провожу. Немного не угадала размером иконки админа, надо поменьше, ну с этим поплясать можно будет позже и с цветом уже на основном. Спасибо.
    Как для меня любителя всяких примочек очень даже нужная вещь)

    ОтветитьУдалить
  3. Анонимный29.12.2012, 12:27

    как заменить капчу

    ОтветитьУдалить
    Ответы
    1. 1. Зачем она вообще нужна?
      2. Вопрос к админам Blogger

      Удалить
  4. Как у вас здорово получилось со вставочками "администратор, безликий, читатель, и т.д."! Я попыталась найти информацию о том как это реализовать у себя, но не нашла... подскажите пожалуйста. Очень хочется подобную красоту себе!

    ОтветитьУдалить
    Ответы
    1. Это ноу-хау, моё :) Проходят последние тесты и статья на днях будет в блоге. Следите за обновлениями.

      Удалить
    2. Классная идея!!! Я в восторге :) Жду с нетерпением, надеюсь будет не так сложно :)
      А за обновлениями я всегда слежу! ;)

      Удалить
  5. Анонимный14.04.2013, 00:18

    Доброй ночи MagentaWAVE!
    Скажите пожалуйста, а можно так сделать для линейных комментариев???
    В древовидных все получилось, но не нравится, что расположение "лесенкой" да еще и не ровной.
    Вот и возник вопрос как это сделать. Может нужно добавить класс какой-то дополнительно?
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. Можно , но там все немного по-другому пост как раз на подходе на эту тему

      Удалить
  6. Анонимный14.04.2013, 22:05

    Спасибо за ответ. Суть я поняла. Теперь сама сделаю.

    ОтветитьУдалить
  7. Николай01.07.2013, 01:13

    Отличная статья! Все получилось. Вот только раздражает ссылка на профиль автора в комментах. Не подскажите как ее убрать? А то мне тут говорили, что ее в древовидных комментах вообще теперь нельзя убрать. И еще как избавиться от ссылки на даты отправки комментов? Нигде не могу найти. Раньше помню в линейных комментах это было просто сделать, а сейчас не знаю как.

    ОтветитьУдалить
    Ответы
    1. Я лично советую вообще не парится по этому поводу. Но если это критично, то все также - с помощью скриптов, напрямую - никак, так что не парьтесь; особой нужды в этом нет; спам отсеивайте с помощью фильтра и все будет тип-топ, не ведитесь на"паранойю", поверьте, это не так уж важно...

      Удалить

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

BestProject