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

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

стиль комментариев
Посмотрите сами, как он выглядит в работе на этом блоге.
Подглядела  решение на сайте 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


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

  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. Виктория, доброе утро! Спасибо! Жду!

    ОтветитьУдалить
  14. Здравствуйте, Вика! Очень мне понравились такие комментарии, очень хочу себе такие, но, не знаю как удалить старые. Пробовала сама удалять, получается такое как было изначально, но эти не становятся, просто, наверное, не все удалила. Вот по этому уроку делала - https://wordpressmania.ru/rezbovaya-forma-kommentariev-kak-v-wordpress/#comment-7539
    Может сможете что-нибудь посоветовать или к кому обратиться. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Комментарии , которые брали у Сергей по - моему сейчас не работают. Смайлики это точно. А эти очень просто устанавливаются. В живую можно посмотреть на этом блоге http://www.dela-domashnie.ru/

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

    ОтветитьУдалить
    Ответы
    1. поняла. Тут бы всё в обратном порядке сделать. Много менять нужно и как бы вы вообще чего лишнего не сделали. А этот код конечно не будет работать. он просто поменяет внешний вид родных блогеровских. А вы в корне их изменили.

      Удалить
  16. Вот и я о том же... Если бы просто код вставлялся, удалила бы и всё, а там очень много всего менялось, в обратном порядке трудно сделать. Как-нибудь еще раз попробую в тестовом... Спасибо!

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

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