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

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

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

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

Реализация.

Шаг 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>, и над ней устанавливаем этот код CSS.

.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