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

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

 

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

 

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

 

Настройка древовидных комментариев blogger
Настройка древовидных комментариев blogger

 

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

 

Настройка древовидных комментариев Blogger (Blogspot)

 

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

 

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

 

Разрешить комментарии читателей

 

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

 

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

 

Дизайн окна комментариев на Blogger (Blogspot)

 

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

 

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

 

Форма комментариев blogger

 

<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 в стиле Facebook

 

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

 

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

 

 

Будь вместе с Я блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Комментарии 2

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика