И снова здравствуйте, дорогие друзья! Все знают популярную социальную сеть Marka Zuckerberga Facebook и у каждого из вас есть (я просто уверен) аккаунт в ней. Поэтому вы знакомы с системой комментариев в Facebook. Сегодня я покажу вам, как сделать в любимом всеми нами Blogger комментарии в стиле Facebook.
Для этого, нам понадобится всего лишь один шаг, добавить стиль CSS и будет все окей. Можете посмотреть, как будут выглядеть комментарии по новому:
Кому нравится такой стиль комментариев прошу вперед.
Как добавить в 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; }
Сохраните шаблон. Вот и готово.
P.S. Чтобы мне не писать крохотный пост, я покажу вам как подключить комментарии Google plus в нестандартном шаблоне Blogger
Сначала подключите комментарии Google плюс в блоге. Далее, заходим в панель инструментов Blogger - Шаблон - Изменить HTML. Находим такой код:
<b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if>
Заменяем его на другой, вот на этот:
<b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "static_page"'> <b:include data='post' name='comment_picker'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:include data='post' name='comment_picker'/> </b:if>
Готово. Всем пока. До новых встреч.
Подсмотрено у Kang Ismet
С уважением, Сергей
Сергей, спасибо огромное! Добавил такое оформление себе на блог, все просто супер! Осталось придумать как закрыть ссылку «Удалить» от индексации 🙂
Привет,Григорий!А зачем?
!!!!!
Как сделать форму добавления комментариев на Blogger как у вас? только имя и email
На блоге здесь?
Здравствуйте, Сергей! Скажите пожалуйста, как можно сделать такую форму ввода комментариев и их вид как на этой странице? Облазил весь интернет — не могу найти ничего подобного, а форма понравилась..
Привет,Николай!Вы имеете ввиду форму как в этом блоге?
Да, именно её 🙂
Николай,форма комментариев здесь вордпрессовская, она стояла в шаблоне. Ведь блог у меня на движке WordPress. Пока для блоггера такую я не встречал.
Понял, благодарю за пояснение!=)
Пожалуйста,Николай.
Сейчас попробуем
Попробуйте Максим, вам понравится. 🙂
Подскажите, пжл, в этом варианте комментариев, тем кто комментирует будет приходить на почту оповещение о том, что я им ответила?
Конечно, если поставят галочку Оповещать 🙂
Сергей, если я установлю форму комментариев как в фейсбуке, старые комментарии к статьям пропадут?
Нет, не пропадут. 🙂
Сергей, спасибо. Все получилось.
Выглядит симпатично, но необходимой функциональности я так и не добилась, поэтому пришлось все вернуть обратно.
А мучаюсь я с уведомлениями о моем ответе комментаторам блога. Я решила протестировать комментарии и вышла из своего аккаунта Гугл и выбрала «имя/URL». Тут же пропала возможность поставить галку в окошке «оповещать». Дальше хуже, при подтверждении комментария система начала меня проверять не робот ли я и предложила на картинках указать бурито. Это уже перебор)). Бедные мои читатели, я бы точно не стала комментировать такой блог.
Как думаете, можно попробовать прикрутить Livefyre без потери старых комментариев? Это очень важно. Я не хочу потерять комментарии.
Оксана, а вы попробуйте проделать эту же операцию в стандартных комментариях Blogger. Тоже самое будет. У Blogger система комментирования не удобная. Здесь же при помощи кода меняется стиль блоггеровских комментариев, а не сама форма комментов.
Установите систему дискус, вам она точно подойдёт и старые комментарии можно импортировать. Или другие — SV KAMENT, HyperComments.
Здравствуйте! Подскажите пожалуйста почему у меня нету иконки напротив анонима? В примере иконка присутствует а у меня ее нету 🙁
Здравствуйте, Сергей!Почему-то код разместился над шапкой блога!?Вставил точно над строчкой в шаблоне.
Здравствуйте,Александр!
Скорее всего вы не туда код вставили. 🙂
Да,Сергей,Вы правы.Я прозевал две скобки и попал не на ту строчку.Теперь все в порядке.Спасибо.А все таки возможно изменить именно форму ввода комментариев (избавиться от этих отпугивающих английских слов при выборе ввода подписи) не прибегая к помощи Дискус и т.п.?
С уважением-Александр.
Вам только остаётся подключить систему комментариев к Blogger от какого нибудь сервиса. Посмотрите инструкции в этом блоге. 🙂
Всё же в блоггере комментарии ужасные… Ограниченность выбора аккаунта для комментария, нельзя вставлять картинки / смайлики… идиотизм. Странно, что они не улучшают эту категорию.
Сергей, приветствую! у меня нифига не получается, с этим кодом для нового вида комментов аля «фейсбук» 🙁 подскажите как быть? Во первых, у меня в шаблоне нету строчки ]]> , а есть просто : . Если вставляю этот код выше < и нажимаю сохранить шаблон, то вид комментов не меняется, но зато при просмотре блога — в его шапке вылазит куча текста, фрагменты этого кода. Что я делаю не так?
Привет Алекс! Строка ]]></b:skin> есть в каждом шаблоне. Вам надо просто внимательно посмотреть. Нажмите кнопку Форматировать шаблон, затем сочетание клавиш Ctrl+F откроется спецокошко (поиск по коду) вставляете в него искомый код и нажимаете Enter 🙂
Сергей, так у вас в статье опять не правильно описано.. Что бы строка ]]> появилась, её надо раскрыть сначала, нажать вот сюда, как показано на скриншоте — https://cloud.mail.ru/public/FrqY/cpzeynvTg . Иначе, ]]> просто не видно!
Еле разобрался с этим нюансом, сам. И кстати, как сделать, что бы шрифты в комментах были немного больше? А это они уж совсем мелкие какие-то. Какой фрагмент кода отвечает за размер шрифта? 🙂
Если искать визуально, то конечно надо раскрыть стили. Что здесь не правильно?
Шрифт в коде строка 4 или 9 — самому сейчас проверить негде. 🙂
Я имею ввиду, что в Вашей статье нигде не сказано что нужно раскрыть стили… а если просто в поиске на странице забить ]]> — то ничего не ищется. И кстати, уведомления о новых комментах — ответах с этого блога ко мне не приходят, хотя и указываю свой действующий е-майл. Захожу и смотрю тут вручную — появился ли ответ или нет)
Здесь не сказано, а так в некоторых статьях показано. Просто каждый раз писать в инструкции одно и тоже неохота. В связи с этим я сейчас сел писать отдельную статью по стилям CSS (как, куда и способы вставки стилей в шаблон Blogger), а в дальнейшем я просто буду ссылаться в инструкциях на неё. Думаю полезно будет новичкам.
А насчёт уведомлений о новых комментах чуть позже налажу. Так как в этой теме WordPress плагин не работал. Сейчас обновлю тему (надеюсь авторы исправили), возможно будет работать. 🙂
Сергей, приветствую! я щас пытаюсь разобраться вот с этой статьёй и сделать нормальные кнопки для публикаций в соц.сети. Посмотрите пожалуйста, эту статью, может сможете мне помочь 😉 Короче, смысл в том, что автор там указывает что его код нужно вставлять после определённого куска кода в шаблоне. Это понятно всё, но проблема в том, что я (и не только я) не можем найти тот кусок кода после которого нужно его код вставлять 🙁 Потому что сам код шаблона в блоггере изменился (а статью он писал давно уже, с тех пор произошли изменения в коде шаблона) и многие строки теперь скрыты и видоизменены.
И вот не понятно, куда ж именно вставлять его коды.
Может разберётесь в ситуации? у вас же есть тестовые блоги, посмотрите?
Да, здесь всё просто. Я сразу нашёл в стандартном шаблоне по отрывку кода post-share-buttons goog-inline-block . Автор вас вводит в заблуждение предлагая именно после этого кода устанавливать соцкнопки. Кнопки устанавливаются сразу после статьи — чуть ниже строки <div class=’post-footer-line post-footer-line-1′> или <div class=’post-footer-line post-footer-line-2′> У меня же есть инструкции по установке соцкнопок от разных сервисов, рекомендую от яндекса или Share42. 🙂
Сергей, нету в стандартном шаблоне у меня post-share-buttons goog-inline-block ! Я на двух разных блогах проверял… Один из блогов вообще без каких либо скриптов и гаджетов, то есть — код шаблона там практически не видоизменялся там. Нету этого кода и всё тут.
Нету именно когда нажимаю на изменить html в настройках шаблона. А если искать просто по исходному коду страницы, то можно найти такую строчку — post-share-buttons goog-inline-block , это да.
А Вы уверены, что вот после этого кода можно вставлять — ?
По поводу кнопок от яндекса — я их пробовал, как по мне — фигня. Они появляются только в новых статьях блога. А в старые их никак не вставишь.
Что значит уверен? Они и вставляются после этих строчек. Не забивайте себе голову, устанавливайте как я написал. 🙂
Да, без уведомления о новых комментариев туго. Надо срочно мне чего то предпринимать.
Да, у вас тут вообще с комментами беда какая то)) уведомления не приходят — это раз, да ещё и кнопка «ответить» Вам пропадает, если много комментов накапливается в цепочке нашей переписки. То есть, кнопка «ответить» есть только не на всех ваших ответах мне.
Меняйте тут систему комментов 😉 , а то вообще не удобная.
Вы каким браузером пользуетесь? Жалоб не было до вас, вы первый. Это система комментариев стандартная, вордпрессовская. Хотя и от темы WordPress многое зависит. Подключать сторонний сервис я не хочу.
Сергей, браузер ФФ 43.0.4. Версия не самая новая, (новая — 45), но тем не менее.. от браузера это не зависит, скорее всего. Это глюк вашей системы комментов. Вот скриншот — https://cloud.mail.ru/public/5v5L/27Q4paDPQ . На скриншоте видно, что даже нету кнопки «ответить» Вам.
По поводу div class=’post-footer-line post-footer-line-1′> или — нифига не получается! не устанавливаются кнопки 🙁 Где с вами можно быстрее пообщаться? дайте свой е-майл, если не сложно, там посоветуюсь с вами, отблагодарю потом чем смогу 😉
От браузера тоже зависит, просто надо чаще кэш чистить. На почту написал. 🙂
Сергей, ну я не нуб же. Браузер тут не причём, кэш почищен. Я же скриншот показал, там чётко видно — что кнопки «ответить» нету под вашими последними комментами! То есть — когда много комментов в одной цепочки, то кнопка ответить под последними из них пропадает! Мне приходится отвечать на комменты от Вас выше, а не на последний. Это глюк системы комментов.
С тем кодом я разобрался вроде как, позже ещё на почту вам напишу. Там просто надо было раскрыть большую строку кода что бы найти post-share-buttons goog-inline-block .
Хорошо.
Сергей, приветствую! вот хотел узнать ваше мнение по поводу подключения других систем комментов в Блоггер. «SV каментс» — она платная, от 300 руб в год и выше. Дискус система — тоже вроде платная? или нет? И вообще — какие ещё знаете системы? может ещё чего интересного посоветуете?)
Привет! Дискус бесплатная. Ещё из бесплатных система Livefyre. Система св камент сначала была бесплатная, а теперь к сожалению только за деньги.
Ещё у меня стоит на политическом сайте хорошая и удобная система hypercomments (адрес сервиса), бесплатно можно установить только на один сайт, на несколько надо платить. Вот блин, про неё (hypercomments) забыл инструкцию написать.
Из платных есть ещё Cackle. А так, есть возможность установить в Blogger комментарии FB и ВК. 🙂
По поводу увеличения размера шрифтов, кстати. Я разобрался, там надо подредактировать 4-ю строку в коде, вот этот параметр — font:normal 11px/14px . К примеру, увеличить до 13px/16px. Увеличивать нужно обе цифры обязательно, а не только одну.