Google+ Цветные комментарии на блогах, созданных в Blogger : Бизнес-центр Татьяны Ошариной

 

▼ Создание блога на Blogger

Практический тренинг


 

      ▼ Создай страницу подписки!         

Практический

тренинг


 

▼ Школа-студия «Вдохновение»  

Регистрация


 

▼ Как создать сайт на WordPress?

Практический

тренинг


 

1.20.2016

Цветные комментарии на блогах, созданных в Blogger

Поставь цветные комментарии на блог!
Цветные комментарии – комментарии, поставленные на цветных страничках – очень популярны на блогах, созданных в Blogger.

Чтобы установить цветные комментарии на блоге, нужно отредактировать код, указанный ниже, вставив нужные вам коды цветов, в стиле которых вы хотите видеть свои комментарии.


В цветных комментариях 3 цвета. 

Желательно, чтобы цвета подставок под комментарии гармонировали с цветовым дизайном вашего блога.


Цветные комментарии на блогах, созданных в Blogger


Коды, выделенные красным цветом нужно заменить на подходящие вашему блогу цвета, выбрав их коды в Таблице HTML-кодов цветов.

Поставь цветные комментарии на блог!


К примеру, я выбрала 3 кого цветов голубых оттенков:

#1E90FF
#E0FFFF
#87CEFA

Теперь в HTML-коде их нужно установить на место кодов, выделенных красным цветом.

<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: #1E90FF; }
.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background: #E0FFFF; }
.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>

 Отредактированный HTML-код нужно вставить в разделе "Дизайн" административной панели блога, как гаджет «HTML/JavaScript» в нижнюю часть блога – футер без заголовка.

Поставь  на блог!


Посмотрите, что получилось!

Поставь цветные комментарии на блог!

Поставьте цветные комментарии на блог, созданный в Blogger!

Подписывайтесь на обновления! Введите свой E-mail



4 комментария :

  1. Здравствуйте, Татьяна. Красивые у вас комментарии получились. Буду у себя экспериментировать.

    ОтветитьУдалить
    Ответы
    1. Попробуйте на своём блоге эту деталь оформления блога, Светлана. Уверена, Вам понравится!

      Удалить
  2. Спасибо Татьяна за такие красивые комментарии,установила,все работает!

    ОтветитьУдалить
    Ответы
    1. Уверена, что проблем с установкой цветных комментариев не возникло.

      Удалить