(Последнее обновление: 02.09.2017)

И снова здравствуйте, дорогие друзья! Все знают популярную социальную сеть Marka Zuckerberga Facebook и у каждого из вас есть  (я просто уверен) аккаунт в ней. Поэтому вы знакомы с системой комментариев в Facebook. Сегодня я покажу вам, как сделать в любимом всеми нами Blogger комментарии в стиле Facebook.

Blogger и Facebook

Комментарии Blogger - стиль Facebook

Для этого, нам понадобится всего лишь один шаг, добавить стиль CSS и будет все окей. Можете посмотреть, как будут выглядеть комментарии по новому:

kommentarii_Facebook

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

Кому нравится такой стиль комментариев прошу вперед.

Как добавить в Blogger комментарии в стиле Facebook

Для этого, заходим в панель инструментов Blogger - Шаблон - Изменить HTML. Находим строчку ]]></b:skin> и чуть выше добавляем код CSS (подобно, как найти данную строку читаем здесь):

/* CSS Komentar Blogspot - Tema Facebook
&nbsp;*/
.comments {
&nbsp; 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 {
&nbsp; font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
&nbsp; font-size:16px;}
.comments .comments-content .comment {
&nbsp; margin:0 0 0;
&nbsp; padding:10px 0px 10px 0px;
&nbsp; border-top:1px solid #e9e9e9;
&nbsp; 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 {
&nbsp; width:50px;
&nbsp; height:50px;
&nbsp; max-width:none;
&nbsp; max-height:none;
&nbsp; border:none;
&nbsp; padding:0;
&nbsp; margin:0;
&nbsp; 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 {
&nbsp; background-color:#EDEFF4;
&nbsp; padding:5px 5px 0;
&nbsp; margin:1px 0 0;
&nbsp; border:none;
&nbsp; 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 {
&nbsp;margin:0 0 0 40px !important;}

.comments .comment .comment-content {text-align:left;}

.comments .comments-content .icon.blog-author {
&nbsp; width:16px;
&nbsp; height:16px;
&nbsp; display:inline-block;
&nbsp; vertical-align:top;
&nbsp; background:transparent url('/favicon.ico') no-repeat 50% 50%;}

.comments .comment .comment-thread.inline-thread .comment:last-child {
&nbsp;border-left:2px solid #A8B2CE !important;
}

Сохраните шаблон. Вот и готово.

P.S. Чтобы мне не писать крохотный пост, я покажу вам как подключить комментарии Google plus в нестандартном шаблоне Blogger

Сначала подключите комментарии Google плюс в блоге. Далее, заходим в панель инструментов Blogger - Шаблон - Изменить HTML. Находим такой код:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='comments'/>
&nbsp; &nbsp; &nbsp; &nbsp; <b:else/>
&nbsp; &nbsp; &nbsp; &nbsp; <b:include data='post' name='comments'/>
&nbsp; &nbsp; </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&nbsp; &nbsp; <b:if cond='data:post.showThreadedComments'>
&nbsp; &nbsp; &nbsp; &nbsp; <b:include data='post' name='comments'/>
&nbsp; &nbsp; &nbsp; &nbsp; <b:else/>
&nbsp; &nbsp; &nbsp; &nbsp; <b:include data='post' name='comments'/>
&nbsp; &nbsp; </b:if>
</b:if>

Заменяем его на другой, вот на этот:

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
&nbsp; &nbsp; <b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&nbsp; &nbsp; <b:include data='post' name='comment_picker'/>
</b:if>

Готово. Всем пока. До новых встреч.

Подсмотрено у Kang Ismet

С уважением, Сергей