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

Привет, друзья. Сегодня у меня для вас очень оригинальный стиль комментариев в блоге. В предоставленном ниже коде вы сможете сделать изменения дизайна всего блока комментариев используя стили 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