
Не так давно я уже писал об использовании аватара-заглушки для комментаторов, у которых нет аватара. Сегодня мы пойдем дальше - куда более грамотно, нежели в исходном варианте, разместим элементы ленты комментариев и сопроводим каждый комментарий красивой рамочкой.
Для начала, как и в прошлой статье, я предлагаю вам ознакомиться с тем, о чем именно идет речь. Смотрим на картинку:

Как вы видите, в переработанной версии все служебные элементы скомпонованы наверху, образуя "шапку", а пространство, выделенное под "тело" комментария раздалось вширь за счет того, что теперь под аватар не резервируется вертикальный столбец примерно в 40 пикселей. Ну, и красивая рамочка вокруг каждого комментария, разумеется. Убедил, что так лучше? Тогда начинаем священнодействие :-)
Открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета" и под строкой "/* Comments" и вставляем следующий код:
/* Comments ----------------------------------------------- */ .avatar-image-container { background: url("https://lh4.googleusercontent.com/-89_0zLbxxSI/TmCsszik0xI/AAAAAAAAAPA/YGjARPZ5nNk/anonymous-avatar.gif") no-repeat; float: right !important; margin: 5px 10px 5px 5px !important; position: static !important; border: none !important; } #comments-block.avatar-comment-indent { margin-left: 0 !important; } #comments-block .avatar-image-container.avatar-stock img { padding: 23px 25px 0 0; width: 12px; height: 12px; } .comment-header { border: 1px solid #c3def4; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; margin: 5px 0; padding: 5px 0 5px 10px; position: relative; } .comments { line-height: 130%; }Строки, которые, возможно, вам стоит адаптировать под себя, это 4 (картинка аватара-заглушки), 22 (цвет рамки) и 23-25 (радиус скругления углов рамки). Остальное лучше не трогать.
Теперь, когда пол дела сделано, ищем следующий код:
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> </div>...и заменяем его этим:
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'> <dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <div class='comment-header'><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd></div> </b:loop> </dl> </div>Вот, собственно, и все. Хочу только уточнить, что скругление уголков рамочки, которое вы видите на картинке, в IE будет только в последней, девятой версии, да и то, после проведения небольшой доработки. В младших версиях этого браузера этого не будет вовсе. Подобного можно добиться, но я специально не стал этого делать. При большом количестве комментариев, страница в IE8- из-за этого будет сильно тормозить. Не думаю, что ради чуть большей красивости стоит жертвовать скоростью загрузки страницы.
Тимофей, я сделала у себя в блоге и все работает. А вот как сделать так, чтобы перед формой комментариев разместить текст, как это сделано у Вас?
ОтветитьУдалитьНу, это стандартная опция настроек блога: Настройки -> Комментарии -> Сообщение формы создания комментариев.
УдалитьЗавтра-послезавтра будет еще одна "вкусняшка" в продолжение темы комментариев. Так что разминайте пальчики для забивки в шаблон нового код ;-)
Тимофей! Еще просьба-вопрос)))
ОтветитьУдалитьВсю "петрушку" с исправлениями (анонимный на гость...) затеяла ради нового оформления комментариев. Вот по вашей статье выше, все делаю как написано, но к сожалению ничего не изменяется. Строки "/* Comments" у меня нет, вставила перед ]]. И строчек первого кода, который нужно заменить тоже нет.
Если можете, подскажите как быть. Спасибо.
Боюсь тут я Вам не смогу помочь. Издержки использования Вами самопального шаблона, увы :-(
УдалитьПопробуйте найти код максимально похожий на то, что у меня в статье. А дальше уже Вам с этим кодом придется экспериментировать самостоятельно...
Спасибо Тимофей за то, что "Боюсь тут я Вам не смогу помочь.".
УдалитьЕсли б не ваш отказ, то я так и продолжала бы себя терзать с этой программой Аристер. А на самом деле Blogger ий ))) шаблон и проще и удобнее, ну по крайней мере мне так пока нравится. Настраиваю дизайн как мне хочется, и поэтому наверно будут вопросы))). Так что, очень надеюсь на помощь)))
Спрашивайте. Помогу в меру сил и возможностей. Меня, кстати, на написание нескольких статей сподвигли читатели :-)
Удалить"При большом количестве комментариев, страница в IE8- из-за этого будет сильно тормозить." А что есть те кто пользуется этим дерьмом?
УдалитьУ IE достаточно много приверженцев. При этом многие из них до сих пор по тем или иным причинам сидят под ХР. А там либо встроенный IE6, либо апгрейт до IE8 (IE9 не поддерживает XP)...
УдалитьВ будущем, пожалуйста, в комментариях моего блога обходитесь без грубости и крепких словечек. Этот ресурс, в том числе, посещают и дамы!
Спасибо большое! Наверно нужно вернуться на блоггеровский вариант.
ОтветитьУдалитьТимофей! Изменила шаблон на стандартный. И ))) все получилось. Спасибо большое!
ОтветитьУдалитьНу и отлично :-D
УдалитьАга, отлично, это ж сколько теперь времени нужно будет, чтоб сделать дизайн как мне хочется! Ну что ж, будем осваивать и это ))).
ОтветитьУдалитьТимофей! Как мне стать вашим постоянным читателем??? Гаджета такого не вижу.
Подскажите)))
Вот тут я уже ответил на Ваш вопрос.
УдалитьТимофей, очень хочу такие рамочки для АСБО. Все сделала,как вы сказали, но осталось по-прежнему... :-(
ОтветитьУдалитьО! Появились такие рамки! Я решила заглянуть в настройки- дополнительно- разрешить фид блога и сделала "ни одного" и рамочки появились!
ОтветитьУдалитьУ меня в ближайших планах статья по технологии создания такого интерфейса для комментариев, имеющих иерархический формат. Типа того, что сейчас есть у меня. Текущая же статья написана под комментарии в линейном формате.
УдалитьОтлично, буду ждать... Мне нужно как у вас - рамочка и кнопки "ответить" и "удалить"
УдалитьА скажите, пожалуйста, можно сделать фон ответов другим цветом?
ОтветитьУдалитьАлия, это оформление создавалось для линейного формата комментариев. Соответственно, для скрипта комментариев все сообщения равнозначны - он не понимает, что из них вопросы, а что ответы.
УдалитьХотя, чисто теоретически, можно "назначить" ответами все сообщения, отправленные от Вашего имени и привязать к Вашему нику смену цвета сообщения.
Нет,там бывают ответы не только от моего имени...
УдалитьТимофей, мне кажется, что у меня линейный формат. И рамочки у меня появились, только кнопки "Ответить" и "удалить" пропали... Можно как-нибудь сделать, чтобы они не исчезали?
ОтветитьУдалитьНет, нельзя. Вернее можно, но для этого надо специально писать код.
УдалитьДа и зачем они? Ответить все равно в форме внизу комментариев только получится. А для удаления в линейном формате есть кнопочка изображающая мусорку.
Лучше активируйте тогда персональный ответ и цитирование, как вы это раньше делали, используя материалы другой моей статьи.
Нет, персональный ответ для этого блога мне не подходит. Хотелось бы, чтобы как у вас - и рамка и ответить и удалить. Если у вас есть, значит такое возможно же сделать и себе?
УдалитьУ меня иерархический формат комментариев. Вы же, насколько я понял, прикипели к линейному. В же линейном подобное невозможно.
УдалитьВы писали: Заходим в Настройки -> Другое -> напротив Разрешить фид блога в выпадающем меню выбираем Дополнительно -> напротив Каналы комментариев к каждому сообщению в выпадающем меню выбираем: для отображения комментариев в линейном формате - Ни одного, в иерархическом - Полный.
Удалить************
У меня стоит "Полный". Значит у меня все же иерархический формат... Но рамки не появляются. Появляются только тогда, когда выбираю "Ни одного". Ничего понять не могу...:wall:
Ой, извините, это же вы написали для линейного формата. Буду ждать теперь для иерархического...
УдалитьВот, Тимофей, посмотрите, пожалуйста. У меня раньше вот так было - ответы на сером фоне, а теперь фон исчез. Вы не знаете, как его вернуть?
ОтветитьУдалить[img]http://s019.radikal.ru/i644/1204/fc/2c2c59258da0.jpg[/img]
Для класса comment-thread или класса inline-thread задайте цвет фона. Точнее сказать не могу - нет времени на эксперименты. Так что самостоятельно выясните, для какого класса лучше.
УдалитьНо это все будет работать только для комментариев в иерархическом формате.
Фуф, выяснила... Даже цвет фона ответов изменила... Если интересно, могу рассказать как...
ОтветитьУдалить[img]http://s54.radikal.ru/i143/1204/a3/4c85ce2fa9de.jpg[/img]
Да нет, не нужно. Если мне приспичит, то я разберусь :-)
УдалитьА! Забыла сказать... Еще они (комментарии)у меня пронумеровались почему-то...
ОтветитьУдалитьА это Вы где-то перемудрили. В коде изначально предусмотрена нумерация комментариев. Только она скрыта. Вы эту нумерацию высветили...
УдалитьПодскажите, пожалуйста, этот код работает для иерархического формата публикации или линейного ? Спасибо
ОтветитьУдалитьДля линейного.
УдалитьЗдравствуйте! Подскажите, как изменить кнопки "ответить" "удалить" в комментариях?
ОтветитьУдалитьО каких кнопках идет речь? Вы имеете в виду одноименные ссылки в комментариях с иерархической структурой?
УдалитьДоброй ночи Тимофей!
ОтветитьУдалитьОпять с вопросом :)
Подскажите пожалуйста, как можно изменить размер аватарки и автора и гостя?
Ваш код мне очень помог, но вот "села" с размерами. Уже все перебрала, и css меняла и в HTML всякие dd, dt и span, ну нИкак не выходит изменить размер аватаров Если поможете, то размер автарок хочу не меньше 60-70px.
Спасибо.
День добрый, Марина!
УдалитьА зачем оно Вам? Вы отдаете себе отчет, что этим просто растянете маленькую картинку до большего размера? Картинку-то для аватара скрипт Blogger выдает именно 36х36px. И растянув ее, Вы потеряете в качестве изображения.
Здравствуйте Тимофей! Рада вашему ответу. И все-таки. Помогите сделать. Я понимаю, что изображение растянется, но САМ ФАКТ, что я смогу это сделать:). Буду экспериментировать.
ОтветитьУдалитьПожалуйста расскажите :)
Марин, подобное можно сделать только для линейного формата комментариев. Для иерархического, как сейчас у меня, это, по сути, невозможно.
Удалитьа и, если честно, мне не хочется копать в этом направлении - бесперспективная тема... :-\
Тимофей! Вы "лентяй" :-D :-D ;-D Кто-то обещал помочь, чем сможет :) Если все-таки согласитесь, то у меня линейные комменты.
ОтветитьУдалитьЗа ответ спасибо :)
Марин, напомните через месяц-полтора. Сейчас времени даже нет что-то смотреть. Вы же видите, даже статей новых уже давно нет...
УдалитьХорошо! Я упрямая, пока не получится, не успокоюсь :) :) ;)
ОтветитьУдалитьНапишу Вам в июне:)
Спасибо.
Тимофей ! Подскажите, пожалуйста, что нужно добавить в мой код, чтобы в профиле можно было выбирать Анонимный ? Говорят, не возможно оставить комментарий
ОтветитьУдалитьМожет я намудрил с кодом вашего поста ?
Вот мой блог:
http://land-travel.net/
Спасибо за совет
А при чем здесь мой код? Возможность анонимного комментирования выбирается в стандартных настройках блога.
УдалитьЗаходите в Настройки->Комментарии и там ищите нужную опцию.
Да,Тимофей,спасибо.
УдалитьНе могу разобраться, почему текст в рамку не попадает. Как это можно исправить?
У Вас комментарии закрыты для свободной публикации - только через предмодерацию. И как я должен тестировать, что у Вас там не работает, не имея возможности посмотреть на оставленный мной тестовый комментарий? :wall:
УдалитьПосле исправления кода аватары должны переместиться вправо, а они у меня слева от комментария
УдалитьДа бог с ними с аватарами. У Вас текст комментариев отсутствует! Это Вы в упор не замечаете?? А между тем при правильном использовании моего кода это попросту невозможно. В предложенном мной коде тэги только добавляются, но ничего не удаляется. А у Вас на выходе просто нет блока, ответственного за вывод тела комментария!
УдалитьЗа смещение аватара вправо отвечает пятая строка первого блока кода. Тем не менее, по неизвестной мне причине, у Вас она не отрабатывается.
P.S. Вы упорно не снимаете предмодерацию с комментариев, несмотря на мои просьбы. Видимо, Вы не очень-о жаждете моей помощи, раз столь целеустремленно препятствуете моей работе.
Об отсутствии текста сообщал раньше.
ОтветитьУдалитьПредмодерация снята. Подскажите об ошибках в моем коде
Тимофей, буду Вам очень признателен
Тимофей !
ОтветитьУдалитьВ вашем посте написано все предельно ясно.
При редактировании кода на Ваш не возникло никаких сложностей.
Все получилось, так как Вы предлагали.
Повторно проверил все свои действия, всё так
Посоветуйте мне как быть
Вижу в Вашем CSS-коде тэги служебных комментариев. Возможно, проблема в них.
УдалитьВ CSS свой способ выделения служебных надписей: не как <!-- ... -->, а как /* ... */.
Тимофей, посмотрите в CSS поменял служебные надписи и аватары стали на положенное место.
ОтветитьУдалитьОстался текст комментария
Вы внимательно смотрели ЧТО на ЧТО Вы заменяете согласно рекомендациям этой статьи? Замещаемый код ТОЧНО был таким же как прописан у меня? Разработчики Blogger очень часто вносят свои правки в исходный код и материалы моих статей становятся неактуальными. Например, они могли видоизменить формат кода вывода комментариев, а Вы подмахнули этот код на мой не проверив соответствие.
УдалитьВ любом случае, чтобы тут помочь, мне нужно видеть уже не код страницы, а исходный код блога. И у меня, если честно, сейчас на подобное нет времени. Так что советую Вам восстановить замененный код в исходное состояние (не то, что у меня, а то что РЕАЛЬНО было), а потом попробовать дополнить его по аналогии с моим примером. В частности рамка делается за счет дополнения некоторых тэгов в строки 4 и 35. Ну а дата и кнопка удаления перемещаются наверх при помощи банальной перетасовки последовательности тэгов.
Если поймете, в чем у Вас была проблема - отпишитесь.
отписываюсь ...
УдалитьТимофей, знаю, что у вас своих дел полно.
Но, догадываюсь, Вам любопытна возникшая проблема.
Не собираюсь пасовать перед трудностями.
С вашей помощью уже удалось улучшить ситуацию.
В своем комментарии от 29 апреля 2012 г. Вы указали, что
код написан для линейного формата.
Я решил все наоборот установить у себя в настройках переключатель
на иерархический формат.
Посмотрите, появился текст !
Подскажите как подправить мой код для рамок со скруглениями.
Надеюсь, проблему можно решить
То, что Вы проделали, это не решение - это суррогат! Вы сломали механизм вывода комментариев. Но вместо того, чтобы его починить, просто поменяли его на другой, альтернативный механизм.
УдалитьЕсли Вам так легче - пожалуйста. Только вот рамка для иерархической структуры делается гораздо сложнее. И материал, как ее сделать я придерживаю для одной из следующих статей. Так что либо поступайте, как я Вам рекомендовал в свои прошлом посте, либо ждите статью про оформление комментариев с иерархической структурой. Когда она выйдет - не знаю.
Огромное спасибо, все получилось. Все прекрасно работает даже в нестандартном шаблоне. Я счастлива ))))
ОтветитьУдалитьНу и отлично :D
УдалитьДобрый вечер!Тимофей,скажите,пожалуйста,почему у меня не отображаются кнопки ответить и удалить(мусорка)?
ОтветитьУдалитьПолагаю, потому, что Вы используете линейный формат комментариев, а не иерархический. Именно под линейный формат и была написана данная статья.
УдалитьСразу скажу, предвещая Ваш вопрос: статьи, описывающей подобное красивое оформление комментариев для иерархического формата, на текущий момент, нет. То оформление, которое Вы сейчас видите у меня, еще нигде не описано. Пока нет времени на написание соответствующей статьи.
С кнопкой ответить разобралась..при иерархическом формате она есть....а вот с кнопкой удалить у меня недавно появилась проблема..и при иерархическом формате ее не было...исчезла и не появилась..вообще ничего не могу отредактировать быстро...что то я натворила:~(
ОтветитьУдалитьНу тут уж я ничем не могу помочь. Угадать, где Вы напортачили, я не в состоянии.
УдалитьА, вообще, перед кардинальными правками шаблона не помешало бы делать его резервную копию...
Спасибо вам огромное!я вам там в личку письмо скинула:-[
ОтветитьУдалитьВечер добрый! :-D Вопросик возник. Чуть ниже формы отправки комментария есть две ссылки-Выйти и Подписаться по электронной почте. Как можно изменить в этих ссылках цвет шрифта, размер шрифта или вообще как-то заменить на картинку???
ОтветитьУдалитьЧерез просмотр кода выдает <a href="javascript:BLOG_CMT_subscription.toggle()" id="subscribeButton">Подписаться по электронной почте</a> а такого кода у меня шаблон не находит
Спасибо. Надеюсь на ответ.
В шаблоне этого кода и не будет. Модуль формы отправки комментариев подключается с помощью IFRAME. Он закрыт для правки. По крайней мере изменить текст ссылок или заменить на картинку Вам не удастся.
УдалитьА вот с изменением шрифта и цвета можно попробовать поиграться. Попробуйте задать стили оформления для ID signoutLink, ID subscribeButton и ID subscribeButtonHolder. Может получиться, а может и нет. Тут раз на раз не приходится...
Спасибо! Всё получилось. Только вот почему то мой аватар администратора отображается как знак вопроса с мальньким значком блоггера внизу. Не знаете почему?
ОтветитьУдалитьУ меня с этим на Вашем блоге проблем нет. Видимо Вы потерли аватар на сервисе Picasa в альбоме "Изображения Blogger" или "Фотографии профиля".
УдалитьСейчас всё работает. Спасибо.
ОтветитьУдалитьЗдравствуйте! Помогите разобраться, на всех страницах блога есть форма отправки сообщения. Ее нет только на Главной после любого поста, такое ощущение, что она просто не до загружается, как быть?
ОтветитьУдалитьСпасибо. форма есть -http://vera-ostraya.blogspot.com/p/blog-page.html форма отсутствует - http://vera-ostraya.blogspot.com/2013/03/blog-post_12.html
У Вас вместо формы крутится картинка: [img]http://cackle.me/static/img/comment-wait.gif[/img]
УдалитьПосмотрите на ссылку, задающую эту картинку. Поищите ее упоминание в коде Вашего шаблона или скриптах, что Вы подключили со стороны. Скорее всего то, к чему принадлежит эта картинка и создает проблему для вывода формы.
Тимофей, подскажите пожалуйста, что я сделала не так. После /* Comments" и нижней черты вставила: .avatar-image-container { и все остальное.
ОтветитьУдалитьУ меня получилось:http://deslin-des.blogspot.ru/2013/03/blog-post_15.html; т.е. в закругленном прямоугольники оказался только ник и фото, остальное не влезло. Потом вы пишете, что: нужно заменить, но в HTML я у себя нашла только это: после плюса стоит:
+ "_comments-block-wrapper"'>
У Вас иерархическая структура комментариев. Статья же писалась под линейную структуру.
УдалитьЯсно, хоть это я подтвердила. А по моему у Вас тоже иерархическая, как Вы так сделали. Научите :)
ОтветитьУдалитьЭто должно стать материалом одной из будущих статей. Увы, времени на их написание катастрофически не хватает...
УдалитьТимофей, здравствуйте!
ОтветитьУдалитьОгромное спасибо за Ваш блог.
Вроде, не чайник и все сделал, как описано. Но изменения минимальны. Изменился вид: теперь вверху - "такой-то комментирует...", дата, время и корзина, а потом комментарий. Аватарки так и остались справа (http://www.hromoff.com/2012/08/blog-post_9.html?showComment=1366407676822). Рамочка не появилась ни разу - ни при линейной структуре комментариев, ни, тем более, при иерархической.
Где может прятаться решение проблемы?
Тимофей, прошу прощения за беспокойство. Разобрался. Сбился в мелочах.
ОтветитьУдалитьВсегда рад, если человек сам находит решение. И не потому, что мне работы меньше. А потому, что когда сделаешь что-то сам, всегда остается чувство удовлетворения и гордости собой, что редко случается, когда тебя вели за ручку! :friends:
УдалитьСогласен с Вами. :)
УдалитьПодскажите, пожалуйста, вот мне эти закругления не критичны. Мне бы просто поле, на котором комментирование размещено, сделать другим цветов, а то оно светлое, а общая гамма блога темная
ОтветитьУдалитьhttp://electronica-synth.blogspot.ru/2014/02/iPolisyx.html
Вы имеете в виду поле ввода комментариев? Увы, его цвет изменить не получится. Это отдельная страница, представленная в виде iframe-модуля. Передача CSS-стилей между двумя страницами, размещенными в разных доменах (страница с формой размещена в домене blogger.com, а не в blogspot.com) невозможна.
УдалитьУ меня тоже есть блог в темных тонах. Точно так же приходится мириться с этим безобразием...
Прошу прощения. Нашел где меняется цвет этого поля:
ОтветитьУдалить#comments {
background-color: #000030;
padding: 15px;
}
Как видел у Вас подложку под поле ввода комментариев белой, так и сейчас ее наблюдаю... Что изменилось?
УдалитьПоменяла код. но в рамочк взялось не все :(
ОтветитьУдалитьМожно как-то поконкретнее?
УдалитьПодскажите, пожалуйста, а как сделать такой стиль для иерархических комментариев? Если данный код применить при иерархических, то в рамку берется только имя комментатора, а сам комментарий остается за пределами рамки.
ОтветитьУдалитьБоюсь, я так и не нашел пока времени для написания статьи на тему применения подобного оформления к иерархической структуре комментариев. Каюсь...
Удалить