Коментари с разноцветен фон в Blogger

Здравейте, всички. Дълго време не съм писала за дизайна на коментарите. Обикновената скучна лента с коментари може да бъде оформена така, че да отговаря на различните вкусове. В зависимост от това, което искате да видите в блога си.

Можете да промените дизайна на коментарите в блога в напълно оригинален вариант. Или да променете дизайна на прозореца за въвеждането им. Можете да добавите и номерация към всеки коментар, но за това малко по-късно.
Днес ще "разкрасим" с различни цветове фона на отделните блокове на коментарите. Точно както виждате на този скрийншот.

Специално направих контрастиращи цветове, за да ви стане по-ясно как ще изглеждат.
Настройката и реализацията на този ефект е изключително лесно. Дори начинаещият блогър лесно може да се справи.
Това е кодът, който ще копирате.

<style>
.comments .comment .comment-actions a, .comments .continue a {box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;
   border: 1px solid #DDD;
   margin: 0 2px;   text-decoration: none;   border-radius: 4px;   text-shadow: 0 1px 1px white;
   font: bold 11px Sans-Serif;   padding: 2px 10px;   white-space: nowrap;   vertical-align: middle;   color: #666;   background: -webkit-linear-gradient(top, #fbfaf8, gainsboro);   background:    -moz-linear-gradient(top, #fbfaf8, gainsboro);   background:     -ms-linear-gradient(top, #fbfaf8, gainsboro);   background:      -o-linear-gradient(top, #fbfaf8, gainsboro);   text-transform: lowercase;}
.comments .comment .comment-actions a:hover, .comments .continue a:hover {   box-shadow:         inset 0 1px 2px #c4c4c4;   border: 1px solid #AAA;   border-top-color: #999;   text-decoration: none;}
.thread-toggle {   border-radius: 4px 4px 0 0;   border-top: 2px solid $(link.hover.color);   text-shadow: 0 1px 1px white;   font: bold 11px Sans-Serif;   padding: 2px 10px;   white-space: nowrap;   vertical-align: middle;   color: #666;   text-transform: lowercase;}
.thread-toggle a{text-decoration: none;}
.comments .continue a {   float: right;      border-radius: 0 0 4px 4px;}.comments .comments-content .avatar-image-container{border: 4px solid #fcfbf5;border-radius: 5px;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;}  .comments .comments-content .comment-thread ol li, .comments .comments-content .comment-thread ol li ol li{   border: 1px groove #acacac;   padding: 10px;   border-radius: 5px;  box-shadow: -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);}
.comments .comments-content .comment-thread ol li:last-child { padding-bottom: 5px; }
.comments .comments-content .comment-thread ol li:nth-of-type(even) { background: #FFDAB9; }
.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background: #D2B48C; }
.comments .comments-content .comment-thread ol li ol li:nth-of-type(odd), .comments .comments-content .comment-thread ol li ol li:nth-of-type(even){ background: #87CEFA; }</style>

➤В червено маркирах 3 фонови цвята за този пример. Можете да изберете нюанси на определен цвят, подхождащи на вашия индивидуален дизайн. Изберете по-ярка или по-приглушена цветова гама. Ще ви помогне тази таблица с цветове.

➤Тези от вас, които са но "ти" със стиловете на CSS, имат цяло поле за творчество - шрифтове, радиуси, граници, сенки и прочие.

➤Инсталирайте готовия код в раздел Оформление ➔ Притурки ➔HTML / JavaScript.

➤Преместете притурката някъде в блога си. Където и да е.

➤Името не трябва да вписвате. И се опитайте да запомните къде е, ако поискате да я промените или премахнете напълно.

➤Разбира се, възможно е да вмъкнете кода и в самата тема, в раздела Тема ➔ Редактиране на HTML кода ➔ пред линията ]]> </ b: skin>, но без <style> и </ style> таговете.

➤За начинаещите  ще е малко трудно, но за опитните няма да е. Защото е лесно да оцветите фона на лентата с коментари.


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



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