Разноцветный фон комментариев 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


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

  1. Здорово, Виктория! Мне нравится! Спасибо!

    ОтветитьУдалить
  2. Ирина, да красиво правда. Поэкспериментировать с цветом, вообще здорово будет.

    ОтветитьУдалить
  3. Привет, Вика. Так просто, прямо в гаджет? Спасибочки!

    ОтветитьУдалить
    Ответы
    1. Люба, лучше конечно в шаблон, чтоб в гаджетах не запутаться. Ну и так работает.

      Удалить
  4. Действительно, красиво! Спасибо, Вика!

    ОтветитьУдалить
    Ответы
    1. Людмила Фёдоровна, попробуйте, собственно сложного - то и нет ничего. Тут я забыла уточнить, если ничего не меняли раньше св комментариях. Но у Вас на блоге, вроде нет.

      Удалить
  5. Спасибо. Очень необычно. Прям как карточки комментарии.

    ОтветитьУдалить
  6. Саша, точно. Всё думала на что похоже. Как картотека какая - то. Чего удумал уйти с ВК?

    ОтветитьУдалить
  7. Попробовала на тестовом блоге! Очень красиво получилось! Если убрать, то все вернётся назад? Комментарии не пропадут? У меня в Блоге Кота Васьки комментарии сами по себе выделяются цветом (голубой цвет в ответах на комментарии). Я бы этот код взяла для "Волшебного фонарика".

    ОтветитьУдалить
    Ответы
    1. Виктория! Вставила код в "Волшебный фонарик"! Как красиво! Комментарии и ответы выделяются! Все сохранилась! Код вставила в футор 2-2. Подальше!

      Виктория! Приглашаю тебя написать мне комментарий в сегодняшний пост! Как раз посмотришь, что у меня получилось! Как красиво!

      Удалить
  8. Интересно получилось, попробую на каком нибудь блоге.

    ОтветитьУдалить
    Ответы
    1. Наталья, пробуйте, авось и приживётся. Убрать всегда можно.

      Удалить
  9. Вика, спасибо тебе большое за интересные штучки для блогов. Вот, все жду настроя, чтобы ими воспользоваться ))

    ОтветитьУдалить
    Ответы
    1. Вика, а тут и делать нечего, копируешь готовый код и в гаджет. Всё.

      Удалить
  10. Ирина, видишь как ярко и весёленько получилось.

    ОтветитьУдалить
  11. Красиво. Но, честно говоря, хоть, видимо, это и просто, как дважды-два, но у меня уже давно это уравнение в результате дает то три, то пять!

    ОтветитьУдалить
  12. Семён. Попробуйте скопируйте весь код. Затем в админпанели зайдите во вкладку дизайн и выбирайте гаджет гаджет HTML/JavaScript из предложенного списка. В появившемся окне вставьте скопированный код. Сохраните и всё.

    ОтветитьУдалить
  13. Здравствуйте, Виктория! Спасибо Вам большое за подсказку! Я попробовала для разнообразия, всё получилось)

    ОтветитьУдалить
  14. Агния, И для разнообразия хорошо и устанавливается просто. Пользуйтесь.

    ОтветитьУдалить

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

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