Изменение дизайна комментариев в Blogger(Blogspot)

Логотип Blogger и желтый стикер  Пожалуй одним из самых важных элементов любого сайта являются комментарии. В них посетители высказывают свое мнение и обмениваются важной, а иногда и не очень, информацией. По-этому делая собственный уникальный дизайн для блога нельзя оставить без внимание их внешний вид.
  Blogger в данном случае не исключение. Зная основные селекторы элементов блока, к ним можно самостоятельно добавить CSS свойства и легко изменить дизайн комментариев в Blogger-блоге.
  В этой статье также добавлен готовый шаблон стиля, чтобы просто и быстро сделать необходимые изменения в оформлении.
Данный материал описывает селекторы и пример стиля для древовидных комментариев.
  Если вы хотите поменять стиль обычных, не древовидных комментариев, обратитесь к материалам этой статьи.
  Блок с комментариями включает в себя несколько элементов, в оформлении которых можно поучаствовать при помощи CSS. А именно:
- .comments - общий селектор всего блока;
- .comment-block - селектор блока опубликованного высказывания;
- .comment-content - блок с текста комментария;
- .datetime - дата отправки отзыва. В этом случаи лучше применять стилевые свойства для .datetime a;
- .thread-toggle - кнопка "Ответы" (развернуть/свернуть). Дополнительно, для дизайна можно использовать ссылку внутри этого элемента: .thread-toggle a;
- .continue - селектор ссылок "Ответить" и "Добавить комментарий";
Тут правильнее использовать стиль не для элемента с селектором .continue, а для ссылки, размещенной в этом элементе - .continue a
- .blogger-comment-from-post - форма отправки, ее можно растянуть на всю ширину блока, добавив соответствующие значение. Также можно выделить ее с помощью свойств фона.
- h4 - заголовки 4-го порядка, в стандартных шаблонах Blogger это надпись "Отправить коммент." и их количество.
  Теперь, можно без проблем добавить CSS и изменить внешний вид практически всех элементов блока комментариев.
  Ниже представлен готовый CSS шаблон для изменения комментариев в Blogger, с простым оформлением элементов, чтобы без труда можно было подогнать дизайн по своему вкусу.
  Изменения:
- дата комментария;
- ссылки "Ответить" и "Удалить" оформлены в виде кнопочек;
- для фона, используется CSS градиент;
- добавлен уголок блоку реплики - сделана в виде "словесного пузыря", и тень;
- заменена иконка обозначающая комментарии автора блога;
- увеличены размеры аватарок;
  В данном стиле, для примера, используются только белый и градации черного цвета, каждый самостоятельно может выбрать подходящие.
.comments .comments-content .icon,
.comments .comments-content .icon.blog-author {
 display:none;
 width:0px;
}
.comments .comments-content .user.blog-author a {
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAp0lEQVR4XmMgCdRK1EfXx9XI45CuS2n43vAfCH/XV2KTNm/4C5SEwjo/DAX1s4ASCLgJQ0HDJhQFpzEU1LcgK6ifi+kDyYbXcAVf6jWwOVO74XDDP6Duc3UWmLLcDN0MsQzMlQKVQgyMDP5AHi+yNCfDcYb/QPiUYSPDOob7YPZpBi6EgnagJCbsgUnzMnzGquAbgwBEgR9QAjsMhSjQY8jDAQ0ZCAMA7Ct83ZRitFEAAAAASUVORK5CYII=) 0 0 no-repeat;
 color: #000;
 padding: 0 0 0 20px;
}
.comments {
 background: #eee;
 border: 1px solid #8A8A8A;
 border-radius: 3px;
 padding: 10px;
 margin: 10px 0;
}
.comment-block{
 position: relative;
 background: #ffffff;
 border-radius: 5px;
 border: 1px solid #cbc8e6;
 box-shadow: 2px 2px 10px 1px #666;
 color: #000;
 padding: 7px;
 height: 100%;
}
.comment-block:after, .comment-block:before {
 right: 100%;
 border-style: solid;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
}
.comment-block:after {
 border-color: rgba(255, 255, 255, 0);
 border-right-color: #ffffff;
 border-width: 10px;
 top: 26px;
 margin-top: -10px;
}
.comment-block:before {
 border-color: rgba(203, 200, 230, 0);
 border-right-color: #cbc8e6;
 border-width: 11px;
 top: 26px;
 margin-top: -11px;
}
.comment-content {
 font: normal normal 15px Tahoma, sans-serif;
 padding: 5px 7px;
}
.comments .datetime a {
 background: #F0F0F0;
 color: #000;
 border: 1px solid #A1A1A1;
 border-radius: 5px;
 font: normal normal 90% Tahoma, sans serif;
 padding: 3px;
}
.thread-toggle {
 background: #CFCFCF;
 border: 2px solid #737373;
 border-radius: 5px;
 font: normal bold 100% sans-serif;
 height: 15px;
 padding: 5px;
 width: auto;
 margin: 0px;
}
.thread-toggle a {
 color: #000;
}
.comments .continue a {
 display: block;
 background: #666666;
 background: -moz-linear-gradient(top, #666666 0%, #131313 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#131313));
 background: -webkit-linear-gradient(top, #666666 0%,#131313 100%);
 background: -o-linear-gradient(top, #666666 0%,#131313 100%);
 background: -ms-linear-gradient(top, #666666 0%,#131313 100%);
 background: linear-gradient(to bottom, #666666 0%,#131313 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',GradientType=0 );
 color: #FFFFF0;
 text-align: center;
 border: 1px solid #666666;
 border-radius: 5px;
 font-size: 12px;
 padding: 10px 5px;
 margin: 5px;
 height: 100%
}
.comments .continue a:hover {
 background: #cecece;
 background: -moz-linear-gradient(top, #cecece 0%, #6d6d6d 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%,#6d6d6d));
 background: -webkit-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
 background: -o-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
 background: -ms-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
 background: linear-gradient(to bottom, #cecece 0%,#6d6d6d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#6d6d6d',GradientType=0 );
 border: 1px solid #6d6d6d ;
 color: #000;
}
.comments .continue {
border: 0;
width: 100px;
}
.comments .datetime a:hover,
.thread-toggle a:hover,
.continue a:hover {
 text-decoration: none;
}
.blogger-comment-from-post {
 height: 260px;
}
.comments .avatar-image-container {
 border: 1px solid #ccc;
 border-radius: 5px;
 margin: 0 0 0 -5px;
 max-height: 48px !important;
 width: 48px !important;
}
.comments .avatar-image-container img {
 height: 48px !important;
 min-width: 48px !important;
}
.comment-actions a {
 background: #8e8e8e;
 background: -moz-linear-gradient(top, #8e8e8e 0%, #5c5c5c 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e8e8e), color-stop(100%,#5c5c5c));
 background: -webkit-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
 background: -o-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
 background: -ms-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
 background: linear-gradient(to bottom, #8e8e8e 0%,#5c5c5c 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#5c5c5c',GradientType=0 );
 border: 1px solid #8A8A8A;
 border-radius: 5px;
 color: #F8F8F8;
 text-align: center;
 tex-shadow: 1px 1px 1px #000;
 font: normal bold 100% Tahoma, sans-serif;
 padding: 5px;
 margin: 5px;
}
.comment-actions a:hover {
 background: #e0e0e0;
 background: -moz-linear-gradient(top, #e0e0e0 0%, #969696 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#969696));
 background: -webkit-linear-gradient(top, #e0e0e0 0%,#969696 100%);
 background: -o-linear-gradient(top, #e0e0e0 0%,#969696 100%);
 background: -ms-linear-gradient(top, #e0e0e0 0%,#969696 100%);
 background: linear-gradient(to bottom, #e0e0e0 0%,#969696 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#969696',GradientType=0 );
 border: 1px solid #7F7F7F;
 color: #000;
 text-decoration: none !important;
 text-shadow: 1px 1px 1px #fff;
}
.comments .comment-thread.inline-thread {
background-color: transparent;
}
  Не этом все, отзывы и пожелания, как всегда вы можете внести в форму ниже.

Дальше по теме

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

  1. Спасибо. То, что нужно!

    ОтветитьУдалить
  2. Спасибо, красиво у Вас получилось, попробую в своем блоге. Я искала литературу о том как настроить форму для комментариев на блоге, так как многие жалуются, что оставлять комментарии очень сложно, из за того, что нет возможности ответить анонимно или введя Имя и свой URL и это отпугивает многих посетителей.

    ОтветитьУдалить
    Ответы
    1. Это все выставляется в настройках для вашего блога самого Blogger. Скорее всего это либо совсем ранние посты вы читали, либо люди туда еще не добрались. Раньше часто писали что нет древовидных комментариев и прикручивали Disqus или еще какую муру, но сайчас уже все в порядке и мне, почему-то, нынешнее решение самого Blogger нравится гораздо больше, чем того же Disqus.
      P.S. Кстати, этот CSS, что в посте, не совсем полный, через денек обновлю на дополненный, с кнопочками и датой.

      Удалить
  3. Маленькая поправка у кого не стает через CSS
    Удаляем все после
    /* Comments
    ..........
    .........
    и до
    /* Widgets

    И туда вставляем код со статьи!

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

      Удалить
  4. Ааааааа! Получилось!!!!!!!!! Спасибо огромное!

    ОтветитьУдалить
    Ответы
    1. А куда же оно денется :) Всегда пожалуйста, заходите еще.

      Удалить
  5. А можно сделать, чтобы не только пользователи google комментировали?

    ОтветитьУдалить
    Ответы
    1. А тут разве только пользователи Гугл комментируют? И анонимы, и просто пишут: Имя/URL и все остальные - под каким аккаунтом захотите войти - под таким и комментируйте. Из списка выбирайте и вперед.
      Это все в вашей панели управления Blogger настраивается индивидуально.

      Удалить
  6. Добрый день, Александр!
    У меня возникла такая проблема: после опубликования первого комментария ссылка "Отправить комментарий" стала почти не видна из-за этого самого комментария. То есть блок с комментом "наполз" на эту ссылку и она видна наполовину. Можно ли это как-то исправить? Спасибо.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Елена, проблема такая бывает, но решается довольно просто. В стандартных шаблонах Blogger блок с этой ссылкой имеет идентификатор continue и для него можно задать определенный стиль, в котором добавить дополнительный отступ сверху. Например: .continue {
      margin-top: 30px;
      }
      А чтобы прописать стиль для самой ссылки, например сделать в виде кнопки, то CSS добавляется для селектора
      .continue a {..тут стили..}

      Удалить
    2. Спасибо, Александр! Дело в том, что у меня не стандартный шаблон. И в коде такого идентификатора я не нашла, может он прописан как-то по-другому. А могу ли я его сама прописать? Например, как Вы советуете:.continue {
      margin-top: 30px;
      }

      Удалить
    3. Если шаблон не стандартный, то для начала нужно определиться под каким идентификатором эта ссылка расположена в шаблоне, а затем уже добавить свойства. Узнать ИД можно в браузере наведя курсор на элемент и кликнуть правой кнопкой, в контекстном меню выбрать - "Проинспектировать элемент"(Опера) или "Просмотреть код элемента" (Хром)
      Если речь идет о вашем блоге по имени ArtDesign, то там ИД этого блока такой - comment-footer для него попробуйте записать стиль.
      .comment-footer {
      margin-top: 30px;
      }

      Удалить
    4. Александр, Вы - гений! Я просидела с этой проблемой целый день! Она мне покоя не давала. Спасибо Вам огромное!!! Все получилось за 5 сек. Еще раз - спасибо за помощь!

      Удалить
    5. Всегда пожалуйста рад что помог :)

      Удалить
  7. Подскажите пожалуйста, дело в том, что когда я отвечаю на комментарии, около моего ответа белые полоски, а фон должен быть серым (#f5f5f5). Я уже что только не пробовала сделать, чтобы "закрасить" их в серый цвет, но ничего не помогает. Подскажите пожалуйста.
    Вот ссылка http://nataliamotorina.blogspot.ru/2012/12/volunteering.html#comment-form
    В комментариях, где я отвечаю видна эта проблема.
    Заранее огромнейшее спасибо!

    ОтветитьУдалить
    Ответы
    1. .comment-thread.inline-thread {
      background-color: transparent;
      }
      Или как вам надо:

      .comment-thread.inline-thread {
      background-color: #f5f5f5;
      }

      Удалить
    2. Добрый день!
      Я вставляю, но у меня ничего не меняется(((

      Удалить
    3. Укажите так:
      .comments .comment-thread.inline-thread {
      background-color: #f5f5f5;
      }

      Удалить
    4. Получилось!
      Спасибо вам огромнейшее ;)))))

      Удалить
  8. Добрый день, Александр. Во всех отношениях приятен Ваш сайт: и дизайн, и тематика, и стиль изложения.
    Несколько дней потратила на решение вопроса изменения формы комментариев. Случайно попала на Ваш сайт и вопрос был решен.
    Теперь листаю его странички каждый день - вопросов-то много, ищу ответы. Еще раз спасибо за то, что делитесь Знаниями.

    ОтветитьУдалить
  9. Спасибо, то что искал.

    ОтветитьУдалить
  10. Спасибо за интересный материал. Код из Вашей статьи помог изменить вид комментариев. Но не могу решить одну проблему: очень мелкий шрифт текста комментариев. И не получается увеличить размер шрифта. Экспериментировал с разными секциями CSS. Цвет шрифта - получалось изменить, а размер и тип - нет. Шаблон нестандартный. Адрес блога http://igor-su.ru. Следы моих экспериментов с комментариями там сохранились. Поэтому за дизайн окна сообщений не ругайте. Подскажите, что можно еще попробовать.

    ОтветитьУдалить
    Ответы
    1. Вы правы, тут мое упущение, забыл добавить один полезный селектор - .comment-content, попробуйте прописать свойство шрифта для него. Например:
      .comment-content {
      font: normal normal 16px Arial, sans-serif;
      }

      Удалить
    2. Спасибо! Все получилось!

      Удалить
  11. Здравствуйте! Спасибо за ваш блог! Особенно приятно то, что на фоне многих, уже "заброшенных" - там все советы за прошлый и позапрошлый год, а Блоггер не стоит не месте и меняется, - здесь у вас можно найти не только нужную, но и "свежую" информацию.
    Сделала в своём блоге - http://www.blogredfox.ru - ваш прекрасный авторский дизайн коментов. Спасибо огромное за идею и помощь! Только у меня почему то надпись на кнопке "Добавить комментарий" не вместилась - буква Й убежала на другую строку. Подскажите, пожлста, как это исправить?

    И ещё вопрос - в гаджете "последние комментарии" никак не могу поменять цвет текста - он серый, а мне хотелось бы чтобы он был чёрным. Не могу найти там строчку, где указан цвет. Может быть Вы знаете, что делать? Может в шаблоне где-то есть? Я пока только учусь - буду рада любой помощи.

    ОтветитьУдалить
    Ответы
    1. И вам спасибо за приятный отзыв. Что касается кнопки, добавьте к .comments .continue a свойство width: 150px; (значение на усмотрение.) Я чего-то его сразу не добавил, забыл наверное....

      Гаджет "последние комментарии" - ищите в его стилях такой селектор .w2b_recent_comments li span и у него поменяйте значение свойства color на черный (#000). Если такого нет, добавьте.

      Кстати, там у вас смотрю уголок белый так и остался, на всякий случай:
      .comment-block:after {
      ....
      border-right-color: #ffffff; /*цвет уголка*/
      .....
      }
      .comment-block:before {
      ....
      border-right-color: #cbc8e6; /*цвет контура уголка*/
      ....
      }

      Удалить
    2. Я очень благодарна Вам за такие ценные и полезные, а главное понятные советы! Исправила сейчас цвет шрифта на чёрный - стало гармоничнее смотреться. Уголок решила оставить белым - на фоне окна для написания комента нормально. А циферки в шаблоне, что Вы мне предложили, у меня те же написаны, кстати...

      Очень хотела попросить вас написать пост на тему установки в блог гаджета "Постоянные читатели". Я уже в течении месяца вижу, как у меня в блоге постоянно возникает надпись "настроен неправильно...обратитесь к веб-мастерам". Причём добавляю я этот гаджет через Дизайн-Добавить... и т.д. Значит его нам предлагают (там есть всего два варианта - опробовала оба) заведомо неправильно сделанный. Видимо это проблема Блоггера. Я пересмотрела очень много информации по этому вопросу. Советов, как всегда много. Но, повторюсь, сайты с такими советами старые, инфа там тоже старая, и часто не подходит потому что Блоггер уже обновился. Так и не могу настроить. Кстати, как то написала пост про моих постоянных читателях, но вовсе не на тему как добавить. А по статистике увидела - как много люде заходило просто по ключевому "ПЧ" Думаю, не меня одну волнует эта проблема. Спасибо!

      Удалить
    3. На счет гаджета ПЧ не сталкивался, у меня он установлен и пока что все норм, поэтому не знаю что с ним за проблемы. Заходил к вам, вроде, все в порядке - читатели отображаются, присоединиться можно. Но тут вопрос в другом, вы часом не объединили профиль Blogger и Google+?

      По-ходу дела его из Blogger вообще хотят убрать, как пережиток прошлого, а вместо него использовать G+ страницы и профиль, по-этому и убрали из основных в дополнительные гаджеты.

      Удалить
  12. Добрый день, Александр! Помогите разобраться, в блоге на всех страницах видны формы для отправки комментов, например http://vera-ostraya.blogspot.com/p/blog-page_6.html
    Везде - кроме Главной,http://vera-ostraya.blogspot.com/2013/03/blog-post_12.html Такое ощущение, что форма не загружается. Почему? В шаблон опасаюсь вносить изменения, т.к. он не стандартый. Что делать?

    ОтветитьУдалить
    Ответы
    1. Посмотрел код, понять не могу, там вообще нет формы, просто блок с картинкой, типа загрузки. Это надо смотреть сам шаблон. Думаю с этой проблемой лучше обратится к написавшему его.

      Удалить
  13. Анонимный13.08.13, 9:35

    не подскажите, как между телом сообщения и ярлыками вставить свою навигационную карту, которая отображалась бы после каждого поста?

    ОтветитьУдалить
    Ответы
    1. Это можно сделать вручную через код шаблона, разместив нужный вам код в этом самом месте. Или проще, через раздел "Дизайн" - создав гаджет HTML/JavaScript, поместив код в него и уже сам гаджет перетянуть на место в низ поста (под блок "Сообщения блога") и закрепить, сохранив расположение.

      Удалить
  14. Здравствуйте, подскажите пожалуйста нерадивому пользователю, можно ли сделать возможным комментирование в blogger старых постов? Я просто относительно добавила в блог возможность комментирования, и форма для комментов появилась только под новыми постами, а под старыми - нет:( Можно ли что-то сделать? Буду очень благодарна за помощь...

    ОтветитьУдалить
    Ответы
    1. Честно говоря впервые сталкиваюсь с такой проблемой и даже не знаю чем помочь. Посмотрите в настройках самих сообщений, где комментирование не доступно, разрешены ли там комментарии.

      Удалить
    2. Господи! Да вы просто гений! Спасибо вам огромное, вы меня просто спасли!!! :)))

      Удалить
  15. Добрый день, Александр ! У меня возникла проблема: текст "Ответы" выпал из рамки и находится под ней. Как это исправить.
    И еще два вопроса: флажки "Админ", "Гость" входят в эти изменения или нет, и что такое .comments . continue a? Cудя по цветам в коде-он у меня не работает.
    Заранее благодарен.
    http://perevirkablogu.blogspot.com/2013/09/blog-post_5303.html

    ОтветитьУдалить
    Ответы
    1. Измените в стилях для .thread-toggle значение width с 80px на auto. В статье поправил.
      Относительно флажков -
      http://www.magentawave.com/2013/03/status-in-comments-on-blogger.html
      .comments . continue a - это кнопка "Ответить" к диалогу и кнопа "Добавить комментарий", у вас они прекрасно работают.

      Удалить
    2. Огромное Вам спасибо !!! Вы гений !!! Дякую !!!

      Удалить
  16. Добрый день . Воспользовался вашим предложением по изменению формы комментирования , спасибо , все нравится . Есть один вопрос , немного не по теме , а именно : может подскажете . Нужно сделать так , что бы комментарии можно было оставить в блоге , только лишь тогда , когда введешь определенное количество знаков , например 300 . Что бы была строка подсчета введенных символов , ну и сам скрипт , который все это бы делал . Перерыл кучу информации , ничего не нашел .

    ОтветитьУдалить
    Ответы
    1. Форма комментирования в Blogger находится во фрейме и повесить на нее какой-либо обработчик невозможно.

      Удалить
  17. Здравствуйте! Спасибо за интересную и полезную статью!

    Я бы хотел спросить у вас кое-что: можно ли сделать так, чтобы при нажатии на ссылку (кнопку) открывалась форма комментариев.

    Просто я добавил виджет "Последние комментарии" и выглядит он так: http://s019.radikal.ru/i624/1410/90/abff52bba0ab.png

    Там, где кнопка "Задать вопрос" хотелось бы сделать, чтобы при нажатии на неё открылась форма комментариев. Я думаю, что такая возможность вряд ли существует, но всё-таки может вы, как опытный специалист в этой сфере, подскажите, что можно сделать? Заранее спасибо.

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

    ОтветитьУдалить
  19. Мой вопрос не совсем связан с дизайном комментариев, но от части связан с ним.
    Как убрать отображение количества комментариев с главной страницы блога? Вот пример в моём блоге: http://mepic.ru/up/pic_b/fe03391a13439e63d0399ac0d320b29c.png
    Если делать: Дизайн - Сообщения блога - Изменить и убрать галочку у оторажения, то комменты с главной убираются, но также они пропадают под всеми сообщениями и в разделе Настройки - Сообщения и комментарии - Расположение комментария автоматически ставится значение Скрыть.

    ОтветитьУдалить
    Ответы
    1. Оратите внимание на вот такие вещи
      http://www.magentawave.com/2012/10/hide-elements-from-some-pages.html

      Удалить
  20. Подскажите, а можно из одного стиля шаблона поместить комментарий?!
    У темы Динамический шаблон очень удобный выдвижной комментарий, и я хочу его код вытащить и вставить его в другую тему шаблона. Например водяной знак и тд..

    ОтветитьУдалить

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

BestProject