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

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

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