Меняем форму комментариев на Blogspot



Не знаю, кому как, но мне давно не давала покоя стандартная форма комментариев на Blogspot. Так хотелось хоть немного её видоизменить. Не так давно набрела на сайт и нашла код, который для нас "чайничков" вставить не составит особого труда.

Копируем код ниже и плавно переходим в черновик blogger-шаблон-настроить. В открывшемся дизайне шаблонов нажимаем-дополнительно-вставить СSS. Перед Вами откроется вкладка, куда необходимо вставить скопированный код. Смотрите на скриншоте

Как и куда вставлять CSS, чтобы изменить форму комментариев для блогов blogspot

Далее жмем-применить к блогу-просмотреть блог-назад в blogger.


#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:#50C806}
#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 #50C806;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:2}
.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:#50C806}
.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([URL=http://radikal.ru/fp/f9e9332a95154de285e58e8bba4dd609][IMG]http://s019.radikal.ru/i631/1308/c5/a91f379742c9.jpg[/IMG][/URL]);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:103%!important}
.comment-form{width:100%;max-width:100%}




Выделенное розовым фоном-это цвет #050C806, сейчас он зеленый, можете поменять на свой вкус. Так же можно изменить ширину(width) и высоту(height), по желанию. Только смотрите внимательно, чтобы и ширина и высота были пропорциональны.

Прежде чем изменить, изучите внимательно цифры. Больше ничего менять не рекомендую, так как сама меняла, и лучше чем есть не стало, хотя если есть желание можете экспериментировать. Всё, меняем и наслаждаемся проделанной работой.


Автор статьи ✎ Olga Protasova Выпуск ✹ 8/30/2013 Ярлыки ►


Открыть комментарии →

11 коммент. :

  1. Большое спасибо! Скопировала код, попробую по вашему совету его использовать!

    ОтветитьУдалить
    Ответы
    1. Валентина здравствуйте. Если не получится этим способом, почитайте новый пост Красивые формы комментариев на blogspot.

      Удалить
  2. Ольга, добрый день! Корректирую блог и доигралась: у меня вообще пропали комментарии на блоге, как вернуть прежние комментарии? Формы даже нет. Что делать? Я шаблон не меняла, а получилась такая петрушка. Гуглила - не нашла. Помогите, где искать неполадку? Спасибо заранее

    ОтветитьУдалить
    Ответы
    1. Сама Доброта, если Ваш профиль blogger связан с Google+ посмотрите в черновике blogger вкладка Google+ в настройках "Включить комментарии Google+ в этом блоге". Если стоит отметка включить, комментарии не будут отображаться в блоге.
      Если проблема не решена пишите, будем разбираться.

      Удалить
  3. Анонимный10/3/16 03:24

    Здравствуйте! А почему в этой форме нет кнопочки ответить у тех, кто ответил тебе? Как это испрвить?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Или я что-то не поняла, но какой кнопки нет? Кнопка ответить есть, посмотрите скриншот по ссылке
      https://goo.gl/tjQ0xa

      Если нужно ответить на ответ комментатора, почитайте эту статью (второй вариант)
      http://www.bdblogov.ru/2013/10/blogspot.html

      Пример в демо блоге
      http://application-2.blogspot.com/2015/07/blog-post.html



      Удалить
  4. Здравствуйте!
    На форме "комментарий" есть флажок "Оповещать" (в правом нижнем углу, чтобы автору комментария приходили уведомления о последующих новых комментариях)
    Как можно сделать, чтобы он был Установлен по умолчанию?
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. akolesov, настройки-электронная почта. В поле впишите адрес эл. почты, можно несколько. Скриншот
      goo.gl/daGbCL

      Удалить
    2. Спасибо! Но это - не то.
      Вы сказали про то, чтобы оповещения о комментария приходили мне, автору блога. У меня это установлено.
      Я же спрашиваю об оповещении внешнего комментатора. Он пишет комментарий, а в правом нижнем углу его формы есть флажок "Оповещать" (справа от "публикация-просмотр). По умолчанию он сброшен. В этом случае он не получает уведомления о появлении последующих комментариев.
      Чтобы получать уведомления, он должен установить флажок "руками". А можно сделать, чтобы флажок был установлен по умолчанию?
      Вот о чем вопрос. Спасибо!

      Удалить
    3. akolesov, теперь понятен вопрос. Когда-то тоже искала информацию по Вашему вопросу на форумах и у известных гуру блоггер. Но так никто ничего не придумал. Только вручную настроить оповещение.

      Удалить
    4. Спасибо! Жаль.
      Я пытался найти соответствующий параметр в коде HTML (где описание формы для комментария), но не нашел.
      Еще раз спасибо!

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *