Привет, друзья. Давно ничего не писала на тему как изменить стиль комментариев в блоге. Хочу поделиться с вами ещё одним интересным вариантом. Такой стиль очень напоминает ленту комментариев в Фейсбуке.
Посмотрите сами, как он выглядит в работе на этом блоге.
Подглядела решение на сайте http://www.dte. Для начинающих блогеров не составит труда добавить, всего - то, некоторые стили в шаблон блога. Конечно, если есть желание.
Просто скопируйте код, приведённый ниже. Далее идём во вкладку шаблон, находим строку ]]></b:skin> и сразу над ней его устанавливаем. Кто пока не знает, как легко найти строку в шаблоне, прочитайте здесь, пожалуйста.
Код.
Обратите внимание на участок, отмеченный синим цветом. Здесь можно вставить вашу фавиконку или смайлик, или другое изображение. Размер указан - 16 Х 16 px.
Теперь просто сохраните шаблон и полюбуйтесь оригинальным стилем последние комментарии на своём блоге.
Спасибо всем, кто заглядывает в мои шпаргалки. Удачи и до новых встреч.

Подглядела решение на сайте http://www.dte. Для начинающих блогеров не составит труда добавить, всего - то, некоторые стили в шаблон блога. Конечно, если есть желание.
Просто скопируйте код, приведённый ниже. Далее идём во вкладку шаблон, находим строку ]]></b:skin> и сразу над ней его устанавливаем. Кто пока не знает, как легко найти строку в шаблоне, прочитайте здесь, пожалуйста.
Код.
.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;
}
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;
}
Обратите внимание на участок, отмеченный синим цветом. Здесь можно вставить вашу фавиконку или смайлик, или другое изображение. Размер указан - 16 Х 16 px.
Теперь просто сохраните шаблон и полюбуйтесь оригинальным стилем последние комментарии на своём блоге.
Спасибо всем, кто заглядывает в мои шпаргалки. Удачи и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Привет, мне понравилось, что пояснения к форме комментов сверху, а не снизу. Какие строчки в коде за это отвечают? Спасибо!
ОтветитьУдалитьОлеся, весь код расписывать не буду. Думала ты уже знаешь, что background-color цвет фона, border размеры и цвет рамки, color цвет шрифта. Но смотри, у тебя ведь уже стили установлены другие. Опять напортачишь. Потренируйся на тестовом. Удачи.
ОтветитьУдалитьЗдорово смотрятся комментарии
ОтветитьУдалитьНаташа, да, согласна. Хочется сказать просто элегантно.
ОтветитьУдалитьВиктория, у меня перестал работать виджет "Последние комментарии". Нет, это был не оригинальный стиль, а тот, который ты делала раньше с фото комментаторами.
ОтветитьУдалитьИ у меня перестал. Испробовала все варианты, которые были в запасе. Ни один не прижился. И раньше с ними такое было, но в данный момент скорее всего из за Гугл диск. Где хранились эти скрипты почти у всех. Об этом сообщалось примерно следующее
ОтветитьУдалить31 августа 2016 г., прекращается обслуживание контента через googledrive.com/host/[id] .
Я так понимаю, что ссылки на скрипты используемых в виджетах Blogger и т. д. перестанут работать. Первым был Dropbox, теперь вот и Google Drive.
Многие предлагаемые нами виджеты для пользователей Blogger будут бесполезны и тем более, кто уже установил их в свой блог не будут работать. Как один из вариантов можно использовать бесплатно сайты Google в качестве бесплатного хостинга. Или Firebase Hosting.
Да, Виктория, как раз 31 августа и прекратил работать. Тогда я уберу этот виджет. У тебя появился виджет "Активные комментаторы". Я, наверное, просмотрела этот пост. Напомни мне, пожалуйста!
ОтветитьУдалитьВиктория, у тебя Олеся Царева - самый активный комментатор. Я с ней тоже дружу блогами. Я сейчас зашла на ее блог "Мой бесконечный декретный отпуск..." и увидела Последние комментарии. У неё не пропал виджет. Интересно, где она брала код? Я ей написала в комментариях.
ОтветитьУдалитьДа с активными я ещё экспериментирую. Тот что у Олеси стоит не знаю, у меня вроде такой тоже был. Сейчас надо смотреть , чтобы в коде не было ссылок вида googlecode.com.
ОтветитьУдалитьСейчас пока поставлю гаджет от фида. Хоть что-то. Посмотри на делах домашних.
Виктория, спасибо! У тебя появился виджет "Последние комментарии" сегодня. Мне без него плохо. Я вижу, кто написал комментарий и когда И всегда успеваю отвечать.
ОтветитьУдалитьНовый виджет тоже замечательный! Виктория, я тоже такой хочу!
ОтветитьУдалитьИрина, сейчас кофе допью и опубликую пост. Доброе утро.
ОтветитьУдалитьВиктория, доброе утро! Спасибо! Жду!
ОтветитьУдалитьЗдравствуйте, Вика! Очень мне понравились такие комментарии, очень хочу себе такие, но, не знаю как удалить старые. Пробовала сама удалять, получается такое как было изначально, но эти не становятся, просто, наверное, не все удалила. Вот по этому уроку делала - https://wordpressmania.ru/rezbovaya-forma-kommentariev-kak-v-wordpress/#comment-7539
ОтветитьУдалитьМожет сможете что-нибудь посоветовать или к кому обратиться. Спасибо!
Комментарии , которые брали у Сергей по - моему сейчас не работают. Смайлики это точно. А эти очень просто устанавливаются. В живую можно посмотреть на этом блоге http://www.dela-domashnie.ru/
УдалитьКомментарии Сергея работают у меня в тестовом блоге хорошо, в основном блоге через раз. Проблема в том, что их надо удалить, а я не знаю как. А поверх них эти не устанавливаются, при чем в обоих блогах. Я эту систему не очень понимаю, как это происходит... при установке одного, предыдущее должно удаляться или нет?
ОтветитьУдалитьпоняла. Тут бы всё в обратном порядке сделать. Много менять нужно и как бы вы вообще чего лишнего не сделали. А этот код конечно не будет работать. он просто поменяет внешний вид родных блогеровских. А вы в корне их изменили.
УдалитьВот и я о том же... Если бы просто код вставлялся, удалила бы и всё, а там очень много всего менялось, в обратном порядке трудно сделать. Как-нибудь еще раз попробую в тестовом... Спасибо!
ОтветитьУдалить