Оригинальный стиль комментариев в Блоггере.

стиль комментариев
Привет, друзья. Давно ничего не писала на тему как изменить стиль комментариев в блоге. Хочу поделиться с вами ещё одним интересным вариантом. Такой стиль очень напоминает ленту комментариев в Фейсбуке.

Посмотрите сами, как он выглядит в работе на этом блоге.
Подглядела  решение на сайте http://www.dte. Для начинающих блогеров не составит труда добавить, всего - то, некоторые стили в шаблон блога. Конечно, если есть желание.

Просто скопируйте код, приведённый ниже. Далее идём во вкладку шаблон, находим строку ]]></b:skin> и сразу над ней его устанавливаем. Кто пока не знает, как легко найти строку в шаблоне, прочитайте здесь, пожалуйста.

Код.

.comments {
  font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51);
}
.comments .comments-content a {color:#3B5998 !important;}
.comments h2, .comments h3, .comments h4 {
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  font-size:16px;}
.comments .comments-content .comment {
  margin:0 0 0;
  padding:10px 0px 10px 0px;
  border-top:1px solid #e9e9e9;
  border-left:none;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {margin:0 0 0; padding:0 0 0; border:none; background:transparent;}

.comments .comment .comment-header {margin-bottom:4px;}

.comments .comment .comment-header .datetime a {color:#808080 !important;}

.comments .comment .comment-actions a {padding-right:5px;}

.comments .thread-toggle .thread-arrow {width:7px; height:7px; padding-right:4px}
.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}
.comments .comment .comment-block {margin:0 0 0 60px !important;}

.comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px;}

.comments .comment .comment-thread.inline-thread ol {margin:7px 0 10px !important;}

.comments .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}

.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {width:32px;height:32px;}

.comments .comment .comment-thread.inline-thread .comment .comment-block {
 margin:0 0 0 40px !important;}

.comments .comment .comment-content {text-align:left;}

.comments .comments-content .icon.blog-author {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  background:transparent url('/favicon.ico') no-repeat 50% 50%;}

.comments .comment .comment-thread.inline-thread .comment:last-child {
 border-left:2px solid #A8B2CE !important;
}


Обратите внимание на участок, отмеченный синим цветом. Здесь можно вставить вашу фавиконку или смайлик, или другое изображение. Размер указан - 16 Х 16 px.

Теперь просто сохраните шаблон и полюбуйтесь оригинальным стилем последние комментарии на своём блоге.

Спасибо всем, кто заглядывает в мои шпаргалки. Удачи и до новых встреч.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Привет, мне понравилось, что пояснения к форме комментов сверху, а не снизу. Какие строчки в коде за это отвечают? Спасибо!

    ОтветитьУдалить
  2. Олеся, весь код расписывать не буду. Думала ты уже знаешь, что background-color цвет фона, border размеры и цвет рамки, color цвет шрифта. Но смотри, у тебя ведь уже стили установлены другие. Опять напортачишь. Потренируйся на тестовом. Удачи.

    ОтветитьУдалить
  3. Здорово смотрятся комментарии

    ОтветитьУдалить
  4. Наташа, да, согласна. Хочется сказать просто элегантно.

    ОтветитьУдалить
  5. Виктория, у меня перестал работать виджет "Последние комментарии". Нет, это был не оригинальный стиль, а тот, который ты делала раньше с фото комментаторами.

    ОтветитьУдалить
  6. И у меня перестал. Испробовала все варианты, которые были в запасе. Ни один не прижился. И раньше с ними такое было, но в данный момент скорее всего из за Гугл диск. Где хранились эти скрипты почти у всех. Об этом сообщалось примерно следующее
    31 августа 2016 г., прекращается обслуживание контента через googledrive.com/host/[id] .

    Я так понимаю, что ссылки на скрипты используемых в виджетах Blogger и т. д. перестанут работать. Первым был Dropbox, теперь вот и Google Drive.

    Многие предлагаемые нами виджеты для пользователей Blogger будут бесполезны и тем более, кто уже установил их в свой блог не будут работать. Как один из вариантов можно использовать бесплатно сайты Google в качестве бесплатного хостинга. Или Firebase Hosting.

    ОтветитьУдалить
  7. Да, Виктория, как раз 31 августа и прекратил работать. Тогда я уберу этот виджет. У тебя появился виджет "Активные комментаторы". Я, наверное, просмотрела этот пост. Напомни мне, пожалуйста!

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

    ОтветитьУдалить
  9. Да с активными я ещё экспериментирую. Тот что у Олеси стоит не знаю, у меня вроде такой тоже был. Сейчас надо смотреть , чтобы в коде не было ссылок вида googlecode.com.
    Сейчас пока поставлю гаджет от фида. Хоть что-то. Посмотри на делах домашних.

    ОтветитьУдалить
  10. Виктория, спасибо! У тебя появился виджет "Последние комментарии" сегодня. Мне без него плохо. Я вижу, кто написал комментарий и когда И всегда успеваю отвечать.

    ОтветитьУдалить
  11. Новый виджет тоже замечательный! Виктория, я тоже такой хочу!

    ОтветитьУдалить
  12. Ирина, сейчас кофе допью и опубликую пост. Доброе утро.

    ОтветитьУдалить
  13. Виктория, доброе утро! Спасибо! Жду!

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

Пользовательский поиск