2012-06-09

Textual description of firstImageUrl

Изменение формы комментариев Blogger с выделением автора

форма комментариев
В этой записи вы научитесь изменять форму комментариев Blogger с выделением комментариев автора блога.

Эта форма комментариев поддерживает древовидные комментарии blogger.
Как установить форму комментариев с выделением комментариев автора в ваш блог.
..
  1. Перейдите во вкладку Шаблон –> Настроить настроить_комментарии
  2. Откроется дизайнер шаблонов, где перейдите по пути Дополнительно –> Добавить CSS

    добавить_CSS
  3. В открывшееся окно добавьте один из предложенных ниже кодов. Выберите дизайн формы комментариев.
  4. Сохраните изменения, нажмите кнопку “Применить к блогу”.
Коды различных стилей формы комментариев:
  • Синий стиль
    комментарии
    #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:#1e05d8}
    #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 #1e05d8;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:#1e05d8}
    .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://4.bp.blogspot.com/-awl7HMjMgh4/T89YtINejTI/AAAAAAAAGmQ/XxcTVLKUAtI/s320/picresized_1338990142_comment-author-blue.gif);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%}
  • Розовый стиль
    розовый_стиль
    #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:103%!important}
    .comment-form{width:100%;max-width:100%}
  • Зеленый стиль
    зеленый_стиль
    #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: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:#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(http://2.bp.blogspot.com/-zz8GxHMWPAo/T89XNSMjjeI/AAAAAAAAGl4/7IfX13BSmxg/s320/picresized_1338989738_comment-author-green.gif);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%}
     
Вы можете изменять цвета форм по своему усмотрению, кроме выделения автора http://2.bp.blogspot.com/-zz8GxHMWPAo/T89XNSMjjeI/AAAAAAAAGl4/7IfX13BSmxg/s320/picresized_1338989738_comment-author-green.gif 
Это изображение, которое вы можете заменить на свое, только сохраните близкие размеры картинки.

10 комментариев :

авто комментирует...

а как так?

Mycrib комментирует...

а вот так ;)

Антонина Романова комментирует...

Спасибо! Вставила по Вашим указаниям себе в блог розовый стиль, почему-то ничего не поменялось. В чем причина?

smotrju комментирует...

Здравствуйте, Наталья.
А как сделать, чтобы был как у Вас стиль комментарий?
Я имею в виду, чтобы имя автора и дата публикации красным выделялись,
и такой же размер текста?

Иванова Наталья комментирует...

Изменяем цвет даты комментария, вставив в стили (до тега ]]> ) код:
.datetime a {
color: #EE210B}


Изменить цвет ссылки автора блога в комментарии:

.comments .comments-content .user.blog-author a {
color: #EE210B;
}


Если вы хотите сделать все ссылки в комментарии одного цвета, включая ссылки на профиль автора комментария, а также ссылки из комментариев и ссылки на даты, то добавьте код:

.comments-content a{
color: #EE210B !important;
}


smotrju комментирует...

Большое спасибо, Наталья)

Анонимный комментирует...

Прикольно! Это во всех браузерах работает? В IE тоже?

Иванова Наталья комментирует...

Конечно работает. Это же css

Organic Fan комментирует...

здравствуйте! а как добавить кнопку "ответить" под ветвь дискуссии? (в стандартном дизайне такая кнопка там есть)

Ирина Брифото комментирует...

@ Organic Fan
Найдите в коде строку
.comment .continue{display:none}
и замените none на yes.
Вот так:
.comment .continue{display:yes}
Кнопка сразу появится.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности