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

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

комментарии

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


.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(http://4.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*ширина иконки*/
height: 48px; /*высота*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}


Синим цветом отмечена строка с адресом картинки - иконки в формате png.
Скопируйте предложенный код. Заходим во вкладку ТЕМА  - изменить HTML. Находим строку ]]></b:skin>  и сразу над ней вставляйте код. Не забудьте сохранить изменения.

Можно сделать нумерацию комментариев как у меня на этом блоге. Вот эта статья.

Желаю всем удачи, терпения и здоровья.

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

Введите Ваш email



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

  1. "когда комментариев много". Ой завидно аж стало, что у кого-то много.

    ОтветитьУдалить
    Ответы
    1. Саша, вон у девчат педагогов, до сотни бывает . Это удобно.

      Удалить
  2. Спасибо, Виктория! В последнее время мне много пишут в Блог Кота Васьки. Весь мир неожиданно полюбил кошек!!!

    ОтветитьУдалить
  3. Ирина, ну тебе непременно нужно установить нумерацию. Вот у меня бывает повторно спрашивают что - то и дабы не писать снова говорю посмотрите комментарий , допустим 3.2.

    ОтветитьУдалить
  4. Совсем не глупо! Вика, может быть Вы сбросите мне на "мыло" более подробную инструкцию. Я пока не могу понять двух вещей:
    1. Надо ли копировать для пользования соответствующе функцией полностью всю, публикуемую Вами ссылку, или только выделенную цветом её часть?
    2. Куда эту ссылку следует сбрасывать?
    И главное: как застраховать себя от того, чтобы куда чего лишнего не сбросить и не стереть информацию, как у меня, сдуру, случилось в начале моей блогерской карьеры; или не получить дурацкую инструкцию, которую Вы мне не посылали, из-за чего мы чуть не рассорились!
    Буду весьма благодарен, хоть не уверен, что пойму, что и как надобно делать.

    ОтветитьУдалить
  5. Семён, здесь не ссылку нужно копировать, а весь код целиком. Естественно и сбрасывать не нужно. Боюсь, что у Вас не получиться. Это нужно в самом шаблоне делать. Оставьте лучше эту затею.

    ОтветитьУдалить
  6. Ну, что делать! Буду "поститься" старым казацким методом.

    ОтветитьУдалить
  7. Интересная фишка. Спасибо, Вика!

    ОтветитьУдалить
  8. Интересно, Викуля. Потренируюсь на "пробном"

    ОтветитьУдалить
    Ответы
    1. Люба, да всё получится. Другие варианты по ссылкам посмотри тоже.

      Удалить
  9. Доброго времени суток, Вика! Ничего у меня неумёхи не получается ни иконка к комментариям не ставится ,ни нумерация комментариев, тоже не получается. Вот такая фигня выставляется и меня совсем это не привлекает что то.http://prntscr.com/s4beaf Наверное придётся убирать.

    ОтветитьУдалить
  10. Валентина, здравствуйте. На Вашем блоге Мир творчества посмотрела - стоят иконки. Что не устраивает. Можно конечно поиграться со стилями
    font-size: 22px;
    color: #555555;
    padding-left:10px;
    padding-top:3px;

    и
    margin-top:7px;
    margin-left:10px;
    width: 50px; /*ширина иконки*/
    height: 48px; /*высота*/

    ОтветитьУдалить
  11. Не знаю, Вика я нашла только лишь в одной статье и больше нигде.

    ОтветитьУдалить
  12. Не знаю, я почему то нашла только в одной статье и больше нигде нет.

    ОтветитьУдалить
  13. Валентина, тут я должна была поправку сделать. Эта иконка стоит только тогда, когда нет пока ни одного комментария. Потм она исчезает . Вот посмотрите. У меня в этих комментариях и предыдущих её тоже нет. Вот нашла пост, где комментариев нет. Она присутствует.http://www.shpargalochki.ru/2017/06/poyavlenie-i-skrytie-elementov-za-schet-prozrachnosti.html

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML