Нов дизайн на коментарите в Blogger (Blogspot)

Здравейте, приятели. Един от най-важните елементи на всеки блог или сайт са коментарите. Чрез тях посетителите изразяват своето мнение и обменят важна, а понякога не толкова важна информация. При създаването на собствен и уникален дизайн на блога си не бива да оставим стария им външен вид.

Blogger не прави изключение и позволява това. Познавайки основните селектори на блоковите елементи можете да добавите свои CSS свойства към тях и лесно да промените дизайна на коментарите в блога на Blogger.
В тази публикация ще намерите готов шаблон за стила на коментарите, за да можете лесно и бързо да направите необходимите промени в дизайна им. Тук са описани селекторите, както и пример за стил и дизайн на дървовидни коментари.
Ако искате да промените стила на обикновените коментари, а не дървовидните, прегледайте тези две публикации.

Блокът за коментарите съдържа няколко елемента, в оформлението на които можете да участвате с CSS. А именно:

 .comments - е общият селектор на целия блок;

 .comment-block - е селекторът на публикуваното съобщение;

 .comment-content - е селекторът на блока с текст за коментари;

 .datetime - е селекторът на датата на изпращане на отзивите. Тук е по-добре да използвате свойствата на стила за .datetime a;

 .thread-switch - е селекторът на бутона "Отговори" (разгъване / свиване). Освен това, за дизайна можете да използвате и хипервръзка  в този елемент: .thread-toggle a;

. continue - е селекторът на хипервръзките "Отговор" и "Добавяне на коментар";

Тук е правилно да се използва CSS стил за хипервръзката в този елемент - .continue a, а не за елемента .continue.

И по-нататък:

.blogger-comment-from-post – е селекторът за формата на изпращане на коментара. Можете да я разтегнете на цялата ширина на блока, като добавите съответното му значение. Можете и да я премахнете, използвайки свойствата на фона.
h4 - е заглавка от 4-ти порядък. В стандартните теми на Blogger определя надписа "Изпрати коментар" и техния брой.

Познавайки действието на тези селектори можете практически без проблем да добавите CSS и да промените дизайна на всички елементи в блока на коментарите.

Ето и готов CSS пример за изменение на коментарите в Blogger, с елементарно оформление на елементите, така че лесно да промените дизайна според вашите предпочитания.

.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: #eee;
 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;
 border: 2px solid #737373;
 border-radius: 5px;
 font: normal bold 100% sans-serif;
 height: 15px;
 padding: 5px;
 width: auto;
 margin: 0px;
}
.thread-toggle a {
 color: #000;
}
.comments .continue a {
 display: block;
 background: #666666;
 background: -moz-linear-gradient(top, #666666 0%, #131313 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#131313));
 background: -webkit-linear-gradient(top, #666666 0%,#131313 100%);
 background: -o-linear-gradient(top, #666666 0%,#131313 100%);
 background: -ms-linear-gradient(top, #666666 0%,#131313 100%);
 background: linear-gradient(to bottom, #666666 0%,#131313 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',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%, #6d6d6d 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%,#6d6d6d));
 background: -webkit-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
 background: -o-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
 background: -ms-linear-gradient(top, #cecece 0%,#6d6d6d 100%);
 background: linear-gradient(to bottom, #cecece 0%,#6d6d6d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#6d6d6d',GradientType=0 );
 border: 1px solid #6d6d6d ;
 color: #000;
}
.comments .continue {
border: 0;
width: 100px;
}
.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%, #5c5c5c 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e8e8e), color-stop(100%,#5c5c5c));
 background: -webkit-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
 background: -o-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
 background: -ms-linear-gradient(top, #8e8e8e 0%,#5c5c5c 100%);
 background: linear-gradient(to bottom, #8e8e8e 0%,#5c5c5c 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#5c5c5c',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%, #969696 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#969696));
 background: -webkit-linear-gradient(top, #e0e0e0 0%,#969696 100%);
 background: -o-linear-gradient(top, #e0e0e0 0%,#969696 100%);
 background: -ms-linear-gradient(top, #e0e0e0 0%,#969696 100%);
 background: linear-gradient(to bottom, #e0e0e0 0%,#969696 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#969696',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;
}

В посочения пример са променени:

- датата на коментара;

- хипервръзките "Отговор" и "Изтриване" са оформени като  бутони;

- за фон е използван градиент на CSS;

- добавен е ъгъл в блока на отговор, направен под формата на "словесен балон" и сянка;

- иконата за коментарите на автора на блога е заменена;

- размерите на аватарите са увеличени;

В този стил са използвани само бял и нюанси на черен цвят, като всеки от вас може самостоятелно да избере подходящите за себе си.

Това е всичко. Мнения и предложения, както винаги, можете да дадете, като използвате формата по-долу.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:




Продължаваме