Как установить иконку количества комментариев и сделать их нумерацию.

иконка количества комментариевЗдравствуйте. Очень рада видеть вас на своём блоге. Сегодня предлагаю вашему вниманию шпаргалку, как установить иконку в строку заголовка сообщения, отображающую количестве комментариев к данному посту и сделать нумерацию комментариев.

Такие иконки немного освежат дизайн.


В этой статье был предложен вариант установки картинки в строке названия сообщения. На иконку с числом комментариев, посетитель, конечно же, обратит внимание. Установка несложная. Давайте разберём. Сначала предлагаю посмотреть о чём идёт речь.
 иконка комментариев

Реализация.
Шаг 1. Заходим во вкладку шаблон. Сделайте обязательно резервное копирование. Изменить HTML. С помощью горячих клавиш находим такую строку
<h3 class='post-title entry-title' itemprop='name'>
Сразу после неё вставляем следующий код.
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>


Шаг 2. Там же в шаблоне ищем, до боли любимую всеми строчку ]]></b:skin>, и над ней устанавливаем этот код.

.comment-bubble {
float: right;
background: url( http://iconizer.net/files/Bremen/orig/comment.png ) no-repeat;
width: 32px;
height: 32px;
font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;
}

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

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

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

С установкой тут немного легче. Просто перед той же строкой ]]></b:skin> вставляем вот этот код.

.comment-thread ol {
    counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 20px;
color: #CC0000 ;
padding: 10px;
padding-top: 3px;
margin-top: 7px;
margin-left: 10px;
position: relative;
z-index: 10;
}
.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: 16px;
    color: #CC0000 ;
}

Меняйте размер и цвет цифр на свои значения. Не забудьте сохранить шаблон.

На этом у меня всё. До новых встреч. Спасибо, что читаете мои шпаргалки. Увидимся.


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

Введите Ваш email


3 комментария:

  1. Добрый день, Вика! У многих блогеров в снизу сообщений есть вставки: (названия разные)Рекомендую почитать, Советую почитать и анонсы к ним. Как можно сделать это у себя на блоге. Спасибо за консультации.

    ОтветитьУдалить
    Ответы
    1. Ирина, посмотрите вот эти статьи блога
      http://www.shpargalochki.ru/2015/03/pohozhie-soobshhenija-pod-pod-kazhdym-postom.html

      http://www.shpargalochki.ru/2015/05/stati-po-teme-vnutri-posta.html
      http://www.shpargalochki.ru/2013/12/pohozhie-soobshhenija-v-bloge.html

      Удалить
  2. Виктория, благодарю Вас!

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

Пользовательский поиск