Как красиво оформить комментарии в блоге

красиво оформить комментарии

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

Так выглядит блок в стандартном виде

стандартный блок комментариев

Так после изменений

новое оформление комментариев

Для этого нам необходимо зайти во вкладку шаблон и сделать резервную копию. Позволю себе сделать небольшое отступление. Пожалуйста, прочитайте статью стили CSS в шаблоне блога. Вам станет гораздо проще понять как легко можно найти тот или иной участок кода. И строку ]]></b:skin>. Наверное, вы обратили внимание, что очень часто при внесении дополнений в дизайне предлагают CSS коды, блоки которых всегда вставляются перед этой строкой.

Сегодня нам придётся опять найти такую строчку. Сначала с помощью клавиш Ctrl+F попробуйте найти #comments h4 {. Если он у вас есть, его просто нужно весь удалить и вставить код, который приведён ниже. В некоторых шаблонах  #comments h4 вообще нет. В этом случае просто вставляйте код перед ]]></b:skin>

#comments h4 {
padding : 10px;
line-height : 15px;
margin-left:20px;
}
#comments h4, .comments .comment-header, .comments .comment-thread.inline-thread .comment {
position : relative;
}
#comments h4, .comments .continue1 a {
position:relative;
padding:5px 10px;
color:#fff;
border-radius:10px;
width:180px;
font-family: Georgia;
text-align: center;
border:solid #444 3px;
}
#comments h4, .comments .user a, .comments .continue1 a {
font-size : 18px;
}
#comments h4, .comments .continue1 a {
font-weight : bold;
color : #EBEBEB;
font-family: Verdana;
text-shadow: 3px 1px 2px #000;
background-color: #0099FF;
font-size: 18px;
font-style: italic;
}
#comments h4:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:80px;
width:0;
height:0;
border-width:0;
border-right-width:10px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #444;
}
#comments h4:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #0099FF;

http://rivai-silaban.blogspot.ru/
Не забудьте просмотреть и сохранить шаблон. Можно немного изменить, в зависимости от дизайна, цвет самого блока.

Ну и другие настройки -размер текста, цвет, тень и прочие. В этом не составит труда разобраться. Посмотрите на то, что у меня получилось на этом блоге. И ещё один небольшой совет. Сделайте для себя ещё один блог на шаблоне,аналогичном вашему и пробуйте сначала на нём все изменения. А я на сегодня прощаюсь с вами. Хороших всем выходных.

Удачи всем нам
Ой, а что это там ниже?  



хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

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

  1. Спасибо, Вика, за статью. По Вашему совету создала блог для экспериментов с кодами. Попробовала применить код. Не могу справиться с цветом. Ставлю свои цвета, получается прозрачный фон. А ещё у меня вопрос: как сделать, чтобы окно для ввода комментариев не сворачивалось, а оставалось всё время на виду?

    ОтветитьУдалить
  2. Людмила Геннадиевна, покажите мне свои цвета, который хотите применить я попробую и вышлю Вам код. Только адрес свой что ли дайте через форму связи на моём блоге. А то я у Вас такую в блоге не увидела. А с окном ввода я не совсем всё поняла. Я к Вам буквально вчера зашла вроде всё ОК с комментариями. Или что-то другое.

    ОтветитьУдалить
  3. Вика, я хотела сделать под цвет фона, но забыла прописать перед A60000 решётку. Но в нижней части у меня белый квадратик, вместо уголка. Теперь я думаю, откажусь от этого. Будет слишком пёстро. А с окном ввода, может это я как администратор не вижу. Мне нужно кликнуть на "комментарии" и тогда они раскрываются. А в другие блоги я захожу и сразу могу видеть и писать комментарии.

    ОтветитьУдалить
  4. Замечательно смотрится! Жаль, но я в шаблон не полезу((( У меня там уже есть ошибки

    ОтветитьУдалить
  5. Вика, всё получилось. Спасибо за подсказку,что в некоторых шаблонах #comments h4 нет.

    ОтветитьУдалить
  6. Людмила Геннадьевна. Попробуйте в точности оставить код, как у меня. Ничего не меняя. Если встанет, значит вы что-то не так своё вставляете. Насчёт окна комментариев. Вы уточните в каком точно блоге оно у Вас не раскрывается. Может я не на тот смотрю.

    ОтветитьУдалить
  7. Татьяна, замечательно, что у Вас всё получилось.

    ОтветитьУдалить
  8. Ира, да уж ладно. Не лезь пока в шаблон. Так, подожди. У тебя вроде как есть тест блог.

    ОтветитьУдалить
  9. Людмила Геннадьевна, возможно Вы это имеете ввиду. http://blogodel.com/2012/12/okno-kommentariev-blogger-blogspot.html

    ОтветитьУдалить
  10. Буду знать, а то вдруг, в будущем, захочу изрисовать свой блог :)

    ОтветитьУдалить
  11. Ой, Иван. Я всё время, что-то экспериментирую. Ну вот, что поделать со мной.

    ОтветитьУдалить
  12. Виктория! Создал новый блог. Вы его видели. Там сейчас пишу о ремонте. Хотел ответить на ваш комментарий, но нет кнопки "ответить". В одном из своих блогов я как-то это сделал. А сейчас не могу вспомнить. В настройках все стоит правильно. Видимо нужно что-то изменить в коде. Буду благодарен за подсказку. И, конечно же, с праздником!!!

    ОтветитьУдалить
    Ответы
    1. Дмитрий, в панели управления-настройки-другое.Разрешить фид блога-выбираем дополнительно. Каналы комментариев к каждому сообщению" не должен установлен пункт "Ни одного" из выпадающего списка.
      В админке-настройки-сообщения и комментарии расположение комментариев выберите Встроенный Не забудьте сохранить.

      Удалить
    2. Забыла ещё сказать. прочитайте эту статью http://www.shpargalochki.ru/2014/11/nekorrektnoe-otobrazhenie-foto.html для сторонних шаблонов.

      Удалить
    3. Не. Дело не в настройках, я ж об этом писал. Буду разбираться в коде

      Удалить
    4. У меня была такая же проблема, вот я и дала Вам ссылку на статью выше, каким образом я её решила.

      Удалить

Пользовательский поиск
Foto Saya
My Photo