Разноцветный фон комментариев 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 цвета для данного примера. Можно подобрать оттенки определённого цвета под индивидуальный дизайн. Сделать ярче или приглушённее цветовую гамму. В помощь вам эта таблица цветов HTML. Кто разбирается в стилях CSS тут целое поле для творчества - шрифты, радиусы, границы, тени и прочее.
Готовый код устанавливаем в разделе дизайн- гаджет HTML/JavaScript. Перетащить его куда - нибудь в самый подвал (футер) блога. Название писать не нужно. И постарайтесь запомнить где он у вас, а вдруг захочется поменять или убрать совсем.

 Конечно же, можно было и в самом шаблоне, во вкладке тема перед строкой ]]></b:skin> , но уже без тегов <style> и </style> , но для начинающих немного трудновато, а бывалым - лень. Пусть уж так и будет.

Вот как просто можно разукрасить фон ленты комментариев.

Всем добра и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email