Как изменить стиль комментариев в Блоггере

Привет, друзья. Сегодня у меня для вас очень оригинальный стиль комментариев в блоге. В предоставленном ниже коде вы сможете сделать изменения дизайна всего блока комментариев используя стили CSS. Сразу оговорюсь, что этот вариант подходит для древовидных комментариев Блоггер.


Вот что у нас измениться и добавится в результате.

Ссылки Ответить и Удалить оформлены в виде кнопок.
Оформлена дата отправки комментария.
Красиво оформлен блок самого комментария.
Иконка автора блога.

Ну и прошу вас перейти сюда, чтобы увидеть всё что я тут расписываю.

Ещё статьи по теме.

Дизайн окна формы создания комментариев.
Изменить дизайн комментариев в блоге.
Оригинальный стиль комментариев в блоге.

 В коде я отметила селекторы всех блоков пояснительным текстом. Здесь вы можете поменять практически все стили, чтобы сделать уникальный дизайн ваших комментариев.

Код.

.comments .comments-content .icon,
.comments .comments-content .icon.blog-author {
 display:none;
 width:0px;
}
.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:#F5F5DC ;
 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;
color:#FFFFF0
 border: 1px solid #666666 ;
 border-radius: 5px;
 font: normal bold 100% sans-serif;
 height: 15px;
 padding: 5px;
 width: auto;
 margin: 0px;
}
.thread-toggle a {
 color: #FFF ;
}

/*кнопки ссылок "Ответить" и "Добавить комментарий";*/


.comments .continue a {
 display: block;
 background:width: 150px; ;
 background: -moz-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D3D3D3 ), color-stop(100%,#BEBEBE));
 background: -webkit-linear-gradient(top, #D3D3D3 0%,#BEBEBE 100%);
 background: -o-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
 background: -ms-linear-gradient(top, #D3D3D3 0%, #BEBEBE 100%);
 background: linear-gradient(to bottom, #D3D3D3 0%, #BEBEBE100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D3D3D3 ', endColorstr='#BEBEBE ',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%, #BEBEBE100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%, #BEBEBE));
 background: -webkit-linear-gradient(top, #cecece 0%, #BEBEBE100%);
 background: -o-linear-gradient(top, #cecece 0%, #BEBEBE100%);
 background: -ms-linear-gradient(top, #cecece 0%, #BEBEBE100%);
 background: linear-gradient(to bottom, #cecece 0%, #BEBEBE100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#BEBEBE ',GradientType=0 );
 border: 1px solid #6d6d6d ;
 color: #000;
}
.comments .continue {
border: 0;
width: 100px;
width: 200px;
}
.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%,  #BEBEBE100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e8e8e), color-stop(100%,#BEBEBE));
 background: -webkit-linear-gradient(top, #8e8e8e 0%, #BEBEBE100%);
 background: -o-linear-gradient(top, #8e8e8e 0%, #BEBEBE100%);
 background: -ms-linear-gradient(top, #8e8e8e 0%,#BEBEBE 100%);
 background: linear-gradient(to bottom, #8e8e8e 0%,#BEBEBE 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#BEBEBE ',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%, #BEBEBE 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%, #BEBEBE));
 background: -webkit-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
 background: -o-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
 background: -ms-linear-gradient(top, #e0e0e0 0%, #BEBEBE 100%);
 background: linear-gradient(to bottom, #e0e0e0 0%,#BEBEBE 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#BEBEBE ',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;
}


Меняйте на свои значения все стили background:( фоновый цвет), color:(цвет текста, border: (ширина и цвет рамки кнопок и блока реплик), меняйте свойства  CSS градиент, border-radius:( закругление углов) - если уберёте из кода совсем эти строки, то кнопки и блоки будут с прямыми углами.

Здесь вообще просто, как говорится, лишь бы фантазии хватило. Форму отправки комментария можно растянуть на всю ширину, изменив значение

.blogger-comment-from-post {
 height: 260px;

Идём в админ. панель - настройки - шаблон - HTML. Находим строку ]]></b:skin> и над ней устанавливаем готовый код. Сохраняем.


Комментарии являются очень важным элементом любого блога и вы можете порадовать своих читателей таким оригинальным стилем всего блока комментариев.
Если возникнут вопросы по теме - пишите.

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

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

Введите Ваш email


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

  1. Виктория, спасибо, что подписались на мои блоги "Волшебный фонарик" и Блог Кота Васьки! Стиль комментариев здорово! Вы настоящая волшебница! Но все, что вы придумываете невозможно поставить на блог!

    ОтветитьУдалить
  2. Мы вроде были уже на "ты"!!! Сейчас прочитала комментарий свой и заметила ошибку!!!

    ОтветитьУдалить
  3. Ирина, привет. Конечно всё не впихнуть, да и не надо. Многие, сколько ведут блоги
    столько и меняют дизайн. Может кому-то и пригодится. на "ты" да. вчера не лёгкий день был, запарилась.

    ОтветитьУдалить
  4. Наташа, тут ещё и сложного ничего нет. И оригинально и скрипт лёгкий.

    ОтветитьУдалить
  5. После изменений комментарии смотрятся намного приятней. Хорошая подсказка.

    ОтветитьУдалить
    Ответы
    1. Да, Александр. Со стилями комментариев Блоггер можно играться до неузнаваемости.

      Удалить

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

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