Простые статусы в комментариях блога на Blogger(Blogspot)

Белые медведи на привале  Продолжая углубляться в дебри CSS и применять полученные знания на практике, я решил наваять пост о том, как добавить подписи в комментариях блога.
  У меня уже есть статья про то, как можно обозначить автора, а теперь я поделюсь фишкой как можно выделить и остальных участников дискуссии.
  Итак, дамы и господа, мальчики и девочки, сейчас мы с вами будем делать простые статусы для комментаторов в комментариях Blogger-блога, с помощью CSS.
  Для того чтобы без скриптов сменить аватарки по умолчанию в блоге, я использовал разделение селекторов по значению атрибутов. В данном случаи все примерно также, но немного круче.
  Для понимания дальнейших действий, рассмотрим HTML-код опубликованного комментария, а точнее ту часть, которая касается его автора:
<div id="*****" class="comment-header" kind="m">
 <cite class="user">
  <a rel="nofollow" href="http://www.blogger.com/profile/..много циферов...">
   Имя/Ник комментатора
  </a>
 </cite>
<span class="icon user"/>
<span class="datetime secondary-text">
</div>
  Для реализации задуманного у нас есть блок <cite> с классом .user и тег <a> с атрибутом href, в котором значится ссылка, в данном случаи на профиль Blogger. Чтобы задать CSS для ссылки именно с таким значением атрибута href, селектор нужно записать так:
.comments .comments-content .user[class="user"] a[href*="www.blogger.com"] { ...
  Таким образом можно выделить в комментариях соратников по любимой платформе :) .
В комментариях автора блога, к тегу <cite>, кроме основного класса - .user, добавлен дополнительный - .blog-author и выглядит это так:
<cite class="user blog-author">
 <a rel="nofollow" href="http://www.blogger.com/profile/....">
  Имя/Ник автора блога
 </a>
</cite>
Это позволяет фильтровать комментарии автора блога по дополнительному классу. Выглядит это так:
.comments .comments-content .user[class*="blog-author"] a
  Если оставленный комментарий сделан с помощью аккаунта в WordPress(бесплатный домен wordpress.com), LiveJornal или другого, то и ссылка будет с доменом этих ресурсов. Это дает возможность задавать стили раздельно, используя для этого различия в значениях атрибута href. Комментарии, оставленные с помощью комбинации "Имя/URL", можно фильтровать просто по наличию или отсутствию ссылки - если записано только имя, то ссылки внутри тега <cite> не будет, а это тоже отличие.
  И конечно главный вопрос, который волнует многих - Анонимный, что делать с этими скромняжками? Выход есть, но без скрипта тут не справится. Я лично решил эту проблему с помощью jQuery, подключить этот фреймворк не составит труда, после чего, чтобы решить вопрос с анонимами потребуется добавить скрипт длинной всего в одну строчку:
$(function(){
 $(".user:contains('Анонимный')").addClass('anonymous').text('Секретный Агент');
});
  Он найдет в теге с классом .user надпись "Анонимный" и заменит её, в данном случаи, на "Секретный Агент", а также добавит дополнительный класс - anonymous, для возможности отсортировать и добавить CSS свойства именно к комментариям оставленным анонимами.
  Создавать строчку со статусом, будем с помощью псевдоэлемента :before для блока с классом .user.
  Кое-что я отметил комментариями в коде CSS, но для большей наглядности забомбил такую схему:
  - восклицательный знак "!" - свойство обязательно;
  - знак вопроса "?" - можно указать свое значение;
  Ну и конечно готовый CSS-шаблон, для древовидных комментариев:
.comments .comment-block {
  position: relative; /*точно указываем относительное позиционирование для всего блока комментария*/
}
/*стили для блока со статусом*/
.comments .comments-content .user[class*="blog-author"] a:before,
.comments .comments-content .user[class="user"] a[href*="www.blogger.com"]:before,
.comments .comments-content .user[class="user"] a[href*="livejournal.com"]:before,
.comments .comments-content .user[class="user"] a[href*="wordpress.com"]:before,
.comments .comments-content .user[class="user"] a:before,
.comments .comments-content .user[class="user"]:before,
.comments .comments-content .user[class*="anonymous"]:before {
  position: absolute; /*абсолютное позиционирование обязательно*/
  right: 10px;
  bottom: 10px;
  border-width: 15px; /*ширина рамки, в данном случаи выполняет роль высоты всего блока; значение х 2 (15px x 2 = 30px)*/
  border-style: solid;
  border-color: #fff; /*цвет рамки, в данном случаи - цвет блока*/
  -webkit-box-shadow: 0 0 5px 1px #666;
  box-shadow: 0 0 5px 1px #666;
  color: #000; /*цвет текста*/
  font: normal normal 16px/1px Tahoma, Arial, sans-serif; /*1px в этой строку указан для вертикального выравнивания, это значение может быть любое, но должно быть обязательно*/
  text-align: right; /*выравнивание текста по краю*/
  letter-spacing: 0px; /*межбуквенный интервал, отрицательное значение - уменьшает*/
  height: 0;
  width: 50%;
}
.comments .comments-content .user[class*="blog-author"] a:before {
  content: 'Администратор';
}
.comments .comments-content .user[class="user"] a[href*="www.blogger.com"]:before {
  content: 'Соратник';
}
.comments .comments-content .user[class="user"] a[href*="livejournal.com"]:before {
  content: 'Журналист';
}
.comments .comments-content .user[class="user"] a[href*="wordpress.com"]:before {
  content: 'Конкурент';
}
.comments .comments-content .user[class="user"] a:before {
  content: 'Гость';
}
.comments .comments-content .user[class="user"]:before {
  content: 'Прохожий';
}
.comments .comments-content .user[class*="anonymous"]:before {
  content: 'Скромник';
}
.comments .comments-content .comment-content {
  margin: 0 5px 30px 0; /*внешний отступ блока с текстом комментария, 30px - отступ снизу, чтобы блок с подписью не налазил на текст*/
}
Свойство border-color указывает цвет блока с подписью, оно обязательно. Если нужно чтобы была видна только подпись, без блока, то цвет для этого свойства нужно указать такой же как и у блока комментария.
  Например, если цвет блока всего комментария зеленый, то и в значении для border-color нужно указать зеленый.
  Прозрачный указывать нельзя.

  На этом пока все, теперь вам остаётся только придумать прикольные статусы в соответствии с тематикой блога.
 P.S. Я нашел комментарии только с ссылками для WP и LJ, других не нашел, если знаете, скиньте, дополню пост.
©http://magentawave.com

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

  1. Ура! Дождалась выхода этой статьи! Будем разбираться, спасибо! Мне очень понравилось ваше оформление статусов комментаторов :)

    ОтветитьУдалить
    Ответы
    1. Наконец-то дописал, ели осилил :) В статье показана суть, оформление это тема для другой статьи, но по-этому поводу, впрочем, уже полно материала, называется CSS ленты, и уж не знаю смогу ли внести еще что-то полезное... :)

      Удалить
    2. Ох уж это CSS :) Сделала, что смогла... Решила оставить только выделение автора блога. Пошла изучать ваши кнопки "вверх-вниз".

      Удалить
    3. Так в статье есть уже готовый стиль, просто оформление самое простое - чисто для примера.

      Удалить
    4. За это и спасибо! :) Я же не возмущаюсь, а наоборот, выражаю благодарность!

      Удалить
  2. Дмитрий24.06.2013, 01:39

    Спасибо! Отличная статья. Давно хотел сделать выделение комментов и тут так подфартило.

    ОтветитьУдалить
  3. Анонимный24.06.2013, 01:46

    Кстати, а "Скромный" это кто? Что нужно сделать, чтоб такая подпись была?

    ОтветитьУдалить
    Ответы
    1. "Скромник" - в примере это Аноним, вы можете вписать любое слово(статус) какой подходит, на свой вкус или по теме блога.
      В примере стиля выделены строки где указаны статусы, прочтите статью и просмотрите примеры кода. У вас все получится :)

      Удалить
  4. добавил anonymous, но он не работает, все анонимные комменты идут в "Прохожий". В чем разница между "Прохожим" и "Безликим"? Сразу скажу, что скрипт добавил и подключил: правильно.
    http://perevirkablogu.blogspot.com/2013/09/blog-post_5303.htm

    ОтветитьУдалить
    Ответы
    1. Страница пустая.

      Удалить
    2. Прошу прощения, Александр.
      Полный адрес страницы: http://perevirkablogu.blogspot.com/2013/09/blog-post_5303.html

      Удалить
    3. Скрипт не выполняется, потому что допущены ошибки записи. Вам сюда
      http://www.magentawave.com/2013/03/how-connect-scripts.html#fore
      И кстати, вместо "Секретный агент" можно писать все что угодно, это просто для примера :)

      Удалить
    4. Спасибо за статью !!! Скрипт работает, потому что я исправил "Анонімний" на "Анонім"(сайт украинский). Не сочтите меня навязчивым, Александр, но у меня к Вам вопрос. Вы правильно посоветовали мне в последнем комментарии об ошибках записи. Но у меня не могут все скрипты находиться в одном блоке, тогда ни один не работает. Приходится каждый заключать в
      //

      , а это скорее всего большая нагрузка.
      Подскажите, пожалуйста как установить в один блок, и чтобы работали все скрипты.
      http://perevirkablogu.blogspot.com/2013/09/blog-post_5303.html

      Удалить
    5. Никто не говорит что все, но те что вы добавляете самостоятельно объединить можно, но jquery отдельно, а нативный (обычный) JS отдельно. Каждый скрипт не нужно в секцию CDATA заключать, это можно сделать один раз.

      Более подробно писал тут:
      http://www.magentawave.com/2012/11/how-i-sped-up-my-blog.html

      Удалить
  5. Здравствуйте, автор! а подскажите пожалуйста, как изменить в шаблоне "анонимный" на что-то другое? ну к примеру на тот же "секретный агент". Остальные правки не нужны, вот просто хочется анонимных изменить)

    ОтветитьУдалить
    Ответы
    1. Просто добавьте скрипт, который приведен в статье.
      Как добавить скрипт - http://www.magentawave.com/2013/03/how-connect-scripts.html

      Удалить
  6. Здравствуйте,Александр! Хотелось бы вместо рамочки для админа и гостей записать backgraund-image как у вас. Заранее благодарю!

    ОтветитьУдалить
    Ответы
    1. У меня нет картинок в коде, это оформление CSS-лентами, подробнее с примерами писал здесь:
      http://www.magentawave.com/2015/11/3d-css-ribbons.html

      Удалить
    2. Спасибо, пойду посмотрю!

      Удалить
    3. Не смогла убрать поле в коде дизайна комментариев.И к какому классу привязать код ленты?

      Удалить
    4. Все стили для блока со статусом, находятся в коде после строки:
      /*стили для блока со статусом*/

      Но чтобы вы долго не мучились, попробуйте так:

      .comments .comments-content .user:before {
      position: absolute;
      right: 0;
      bottom: 0;
      border-width: 15px;
      border-style: solid;
      border-color: #684FA3 #684FA3 #684FA3 transparent;
      font: normal normal 16px/1px Tahoma, Arial, sans-serif;
      color: #fff;
      text-indent: 15px;
      text-shadow: 1px 1px 1px #000;
      height: 0;
      min-width: 60px;
      max-width: 140px;
      }
      .comments .comments-content .user:after {
      position: absolute;
      content:'';
      right: 0;
      bottom: -10px;
      border-width: 5px;
      border-style: solid;
      border-color: #3A2C5A transparent transparent #3A2C5A;
      height: 0;
      }
      .comments .comments-content .user[class*="blog-author"]:before {
      content:'Администратор';
      }
      .comments .comments-content .user:before {
      content:'Гость';
      }

      Удалить
  7. Спасибо,Саша! Из двух статей и рекомендуемого кода ленты получилось! Смотрите http://prntscr.com/cliaov

    ОтветитьУдалить
  8. Саша,я поставила картинку для тех, у кого нет аватарок, теперь аватарки с прозрачным фоном накладываются на картинку. Как этого избежать?

    ОтветитьУдалить
    Ответы
    1. Смотрите здесь:
      http://www.magentawave.com/2013/03/change-standart-avatars-on-blogger.html

      Удалить
  9. Оттуда я как раз взяла код
    .avatar-image-container {
    ....
    background: url(.../your-image.gif) 0 0 no-repeat;
    }
    чтобы закрыть картинкой пустые контейнеры. И все чудесно функционирует. Если есть у автора аватарка, она выводится поверх этой картинки.Только у некоторых это png с прозрачным фоном и видно подложку. Наверное по-другому не получится. То,что картинка должна уезжать и скрываться я не поняла.Можно конечно свою картинку убрать, чтобы не портить аватарки посетителей, но тогда у меня анонимусы будут пустыми. И почему-то Блоггеры и Google+ вместо Соратник пишет Гость.
    В остальном все замечательно

    ОтветитьУдалить
    Ответы
    1. В той статье написано же что это (тот способ, который вы использовали) "старый дедовский", т.е. не совсем подходящий для корректной замены аватарок. Используйте тот что описан в статье выше.

      P.S. Если не получается с кодом из конкретной статьи, то пожалуйста, задавайте вопросы под той статьей с кодом из которой возникли трудности.

      Удалить

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

BestProject