Привет, друзья. Давно ничего не писала на тему как изменить стиль комментариев в блоге. Хочу поделиться с вами ещё одним интересным вариантом. Такой стиль очень напоминает ленту комментариев в Фейсбуке.
Посмотрите сами, как он выглядит в работе на этом блоге.
Подглядела решение на сайте 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.
ОтветитьУдалитьСейчас пока поставлю гаджет от фида. Хоть что-то. Посмотри на делах домашних.
Виктория, спасибо! У тебя появился виджет "Последние комментарии" сегодня. Мне без него плохо. Я вижу, кто написал комментарий и когда И всегда успеваю отвечать.
ОтветитьУдалитьНовый виджет тоже замечательный! Виктория, я тоже такой хочу!
ОтветитьУдалитьИрина, сейчас кофе допью и опубликую пост. Доброе утро.
ОтветитьУдалитьВиктория, доброе утро! Спасибо! Жду!
ОтветитьУдалить