Как установить счетчик нумерации комментариев в блоге Blogspot

---

Счетчик нумерации комментариев для каждого поста в блоге

Здравствуйте дорогие блоггеры. Посмотрела я на днях все свои посты и обнаружила, что нет у меня информации об установке счетчика нумерации  комментариев к сообщениям в блоге.

Это такая кнопка-счетчик, чтобы отображался порядковый номер комментария на каждой странице, которые получили Ваши посты. Посмотрите скриншот

Справа видите кнопку, и номер комментария 1, 1а, 2 и.т.д. У меня в блоге уже давно стоит этот счетчик и сегодня расскажу Вам, как его установить. Потребуется поработать с шаблоном. Ничего страшного, справитесь. У меня получилось и у Вас получится, я такой же "чайник" как и все начинающие, немного правда уже набралась опыта, угробив несколько шаблонов, но ведь на ошибках учатся. Все можно восстановить, главное-делать копию шаблона.

Идем в шаблон, делаем резервную копию шаблона. Дальше изменить шаблон и ищем эту строку

<h3 class='post-title entry-title' itemprop='name'>

Немного сложновато будет её найти, но я постараюсь показать на скриншотах, надеюсь будет полегче искать. Когда перейдете в шаблон, не нажимайте на стрелки, прокручиваем вниз и останавливаемся где много стрелок и строк <b:includable id='comments' var='post'></b:includable 

Слева начинайте нажимать на стрелки и внимательно ищите эту строку. Я нашла их даже две. 

Сразу под этой строкой вставляем код ниже, нажимаем-просмотр. Если ничего не вылезло где не надо-сохраняем.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>   

Если счетчик не будет отображаться, прокрутите вниз и вставьте код под нижнюю строку. Теперь в самом верху шаблона находим самую первую стрелку <b:skin></b:skin>, нажимаем на стрелку и внизу выше строки ]]></b:skin> (где найти строку почитайе в статье как быстро и красиво оформить текста в блоге). Вставляем код CSS, скопируйте его

.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: 14px;
color: #555555;
padding-left:10px;
padding-top:7px;
background: url(url адрес кнопки) no-repeat;
margin-top:7px;
margin-left:10px;
width: 40px; /*image-width size*/
height: 40px; /*image-height size*/
}
.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: 12px;
color: #666666;
}

Выделенное синим-размер, цвет, положение слева и сверху порядкового номера (цифры); красным-URL адрес кнопки-счетчика; лиловым-положение кнопки сверху (top), слева от блока комментария (left), высота и ширина кнопки.

А это несколько видов кнопок для Ваших блогов

                           

                           

                            

Нажмите правой кнопкой мыши-копировать URL картинки. В коде замените URL адрес изображения кнопки.

У меня на сегодня все. Пишите отзывы, делитесь с друзьями и знакомыми в социальных сетях. Всем пока, До свидания.

Почитайте статьи:  Как изменить курсор мыши в блоге; Коды символов для вебмастеров; 

Рекомендуемый контент: