◊ Цветные комментарии на блоге

Комментарии – один из способов продвижения блога.

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

Продвижение блога комментариями – умение оставлять правильные комментарии.

Читайте подробнее о продвижении блога посетителями 

Цветные комментарии на блоге

Предлагаю установить на блоге цветные комментарии, вернее, комментарии, поставленные на цветных подложках.

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

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

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

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

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

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

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

#FFE4C4

#FFEBCD

#FDF5E6

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

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: #33CCFF; }

.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background:

#CCFFFF; }

.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:

#99FFFF; }</style>

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

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

Подписаться на Школу-студию "Вдохновение" по E-mail