Красивое оформление комментариев в Blogger (Blogspot) | Примеры

Здравствуйте, дорогие посетители блога «Я блоггер». Красиво оформленные комментарии на сайте радуют взгляд посетителя. Давайте изменим форму стандартных блоггеровских комментариев на красивые древовидные комментарии.

Для начала нужно настроить комментарии в настройках блога. Древовидные комментарии это комментарии у которых есть кнопка "Ответить". Blogger дает такую возможность.

Для этого нужно зайти в административную панель > Настройки > Сообщения, комментарии и настройки доступа. В графе "Расположения комментариев" отмечаем "Встроенный".

Настройки > Другое > Разрешить фид блога > Дополнительно Каналы комментариев к каждому сообщению. Выбираем из списка "Короткие" или "Полный", исключаем вариант "Нет".

Если у вас установлены Google + комментарии, отключаем их.

Отсутствуют комментарии в сообщениях или на странице: заходим в редактор сообщений и страниц, в настройках открываем вкладку Параметры и отмечаем Разрешить комментарии читателей, нажимаем Готово.

Следующий этап, копируем код. Заходим в админке на вкладку Дизайн > Добавить гаджет > HTML/JavaScript, вставляем код и любуемся полученным результатом. Прелесть установки формы комментариев в том что не нужно делать изменения в шаблоне. Все коды проверены в тестовом блоге.

Красивое окно комментариев для Blogger

<style>
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://1.bp.blogspot.com/-EJmwh15Urmc/T89WMFenyGI/AAAAAAAAGlg/Lt8N7DprwFU/s320/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:100%!important}
.comment-form{width:100%;max-width:100%}</style>

Строгий, классический стиль оформления формы комментариев

<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: #9bffff; }
.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background: #a3ffa3; }
.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: #fcfc89; }</style>

Еще один вариант красивого оформления комментариев

<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;}
.comments .comments-content .comment-thread {
margin: 8px 0px;}
.comments .comments-content .comment-thread:empty {
display: none;}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE;}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;}
.comments .comments-content .comment:first-child {
padding-top:16px;}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;}
.comments .comments-content .comment-body {
position:relative;}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;}
.comments .comments-content,
.comments .comments-content .comment-content {
margin:0 0 8px;}
.comment-header {background-color: #F4F4F4;
border: thin solid #E6E6E6;
margin-bottom: 5px;
padding: 5px;}
.comments .comments-content .comment-content {
text-align:none;}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;}
.comments .comment-replybox-thread {
margin-top: 5px;}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;}
.comments .continue {
cursor: pointer;}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;}
.comments .thread-chrome.thread-collapsed {
display: none;}
.comments .thread-toggle {
display: inline-block;}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
width: 36px;}
.comments .comment-block {
margin-left: 48px;
position: relative;}
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;}
</style>

Комментарии для Blogger в стиле Facebook

В этом варианте код придется добавить непосредственно в шаблон, не забывайте делать резервное копирование при каждом изменении в шаблоне.

Заходим в Административную панель Blogger > Шаблон > Изменить HTML. Находим строчку ]]></b:skin> и чуть выше добавляем код CSS

/* CSS Komentar Blogspot - Tema Facebook */ .comments { font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51); } .comments .comments-content a {color:#3B5998 !important;} .comments h2, .comments h3, .comments h4 { font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important; font-size:16px;} .comments .comments-content .comment { margin:0 0 0; padding:10px 0px 10px 0px; border-top:1px solid #e9e9e9; border-left:none; } .comments .comment .comment-header, .comments .comment .comment-actions, .comments .comment .comment-actions a, .comments .comment .comment-thread.inline-thread, .comments .comment .continue {margin:0 0 0; padding:0 0 0; border:none; background:transparent;} .comments .comment .comment-header {margin-bottom:4px;} .comments .comment .comment-header .datetime a {color:#808080 !important;} .comments .comment .comment-actions a {padding-right:5px;} .comments .thread-toggle .thread-arrow {width:7px; height:7px; padding-right:4px} .comments .comment .avatar-image-container, .comments .comment .avatar-image-container img { width:50px; height:50px; max-width:none; max-height:none; border:none; padding:0; margin:0; outline:none; } .comments .comment .comment-block {margin:0 0 0 60px !important;} .comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px;} .comments .comment .comment-thread.inline-thread ol {margin:7px 0 10px !important;} .comments .comment .comment-thread.inline-thread .comment { background-color:#EDEFF4; padding:5px 5px 0; margin:1px 0 0; border:none; border-bottom:1px solid #D2D9E7; } .comments .comment .comment-thread.inline-thread .comment .avatar-image-container, .comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {width:32px;height:32px;} .comments .comment .comment-thread.inline-thread .comment .comment-block { margin:0 0 0 40px !important;} .comments .comment .comment-content {text-align:left;} .comments .comments-content .icon.blog-author { width:16px; height:16px; display:inline-block; vertical-align:top; background:transparent url('/favicon.ico') no-repeat 50% 50%;} .comments .comment .comment-thread.inline-thread .comment:last-child { border-left:2px solid #A8B2CE !important; } 6))))))))))))) Вложенные комментарии перед беаскин .comments .comment-блок { фон: # F9F9F9 ; цвет: # 555 ; коробчатого тень: 0 4px 10px #eeeeee ; положение: относительная; Верхнее поле: 10px; рентабельность левом: 60px; обивка: 10px; границы: 4px твердый #eeeeee важно;! граница радиуса: 10px; шрифта: 1.190em /1.2 Cambria, Грузия, без засечек; } .comment-нить Li .comment-блок: до { позицию: абсолютная; дисплей: блок; слева - 26px; цвет: #eeeeee ; содержание: " 25C4"; размер шрифта: 30px; } .comments .avatar-изображения-контейнера { ширина: 60px ; высота: 60px ; MAX-высота: 60px ; запас: 0px 0px 0 - 28px; обивка: 0px; границы: 7px твердое #eeeeee ; граница радиуса: 60px ; } .comments .avatar-изображения-контейнера IMG { переполнение: скрытый; ширина: 60px ; высота: 60px ; Max-ширина: 60px ; границы: ! 0 важно; граница радиуса: 60px ; } не .comments .comment-thread.inline-нить { фона: нет; } .comments .continue { границы верхнего: 0px твердых прозрачных; } .comments .comments-контент .datetime { плавать: слева; размер шрифта: 11px; } .comments .comments-контент .user в { размер шрифта: 15px; цвет: # 498EC9; } .comments .comments содержанием .datetime найти: наведите { цвет: # 777; текст-отделка: нет; } .comments .comments-контент .Comment: первый ребенок { обивка-топ: 0px; } .comments .comments-контент .Comment { краю дна: 0px; обивка-дно: 0px; } . комментарии .continue в { обивка: 0px; } .comments .comments-контент .icon.blog-автор { фоновое изображение: нет; }