Да номерираме коментарите в Blogger

Добър ден на всички. Ако към публикациите в блога ни потребителите оставят достатъчно коментари, ще бъде полезно да ги номерираме. Понякога трябва да присъедини мнение към един или друг коментар и за да не прелиства цялата лента, читателят просто споменава номера на този коментар. А и самото номериране ще подобри външния вид на блога.

За разлика от WordPress, в стандартната версия на Blogger не са предвидени номерирани коментари. Но след като направим малки изменения в кода на темата, можем да го постигнем. Ще изглежда по същия начин, както в моя блог. Можете и да стилизирате малко. Настройките са доста прости. Подбрала съм и няколко възможности за избор от ваша страна.

Номериране на дървовидни коментари

За да бъде номерацията вляво кодът е:

.comments .comments-content { counter-reset: commentnumber; }
.comments .comment-block:before {
  content: counter(commentnumber);
  counter-increment: commentnumber;
  position: absolute;
  right: 0;
border-radius: 3px; background: #D80556; width: 20px; height: 20px; width: 30px; font-size: 15px; line-height: 1em; color: white; text-align: center; }
  font: normal 16px 'Century Gothic', 'Lucida Grande', Arial, Helvetica, Sans-Serif;
}
.comments .comment-replies { counter-reset: commentnumberv; }
.comments .comment-replies .comment-block:before {
    content: counter(commentnumber) "." counter(commentnumberv);
    counter-increment: commentnumberv;
}

➤Запазете шаблона и вижте какво се е получило;

➤Цветът на фона: # D80556; може да се промените на желания от вас;

За да бъде номерацията вдясно кодът е:

.comments { margin-top: 30px; }

.comments h4 { font-size: 20px; margin: 0 0 18px; text-transform: capitalize; }

.comments .comments-content .comment-thread ol { overflow: hidden; margin: 0; }

.comments .comments-content .comment:first-child { padding-top: 0; }

.comments .comments-content .comment { margin-bottom: 0; padding-bottom: 0; }

.comments .avatar-image-container { max-height: 50px; width: 50px; }

.comments .avatar-image-container img { max-width: 50px; width: 100%; }

.comments .comment-block { background: #fff; margin-left: 72px; padding: 14px 0 0 20px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

.comments .comments-content .comment-header a { color: #333; text-transform: capitalize; }

.comments .comments-content .user { display: block; font-style: italic; font-weight: bold; }

.comments .comments-content .datetime { margin-left: 0; }

.comments .comments-content .datetime a { font-size: 12px; text-transform: uppercase; }

.comments .comments-content .comment-header, .comments .comments-content .comment-content { margin: 0 20px 0 0; }

.comments .comment-block .comment-actions { display: block; text-align: right; }

.comments .comment .comment-actions a { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius:2px; background: #677E52; color: #FFFFFF; display: inline-block; font-size: 12px; line-height: normal; margin-left: 1px; padding: 5px 8px; }

.comments .comment .comment-actions a:hover { text-decoration: none; }

.comments .thread-toggle { display: none; }

.comments .comments-content .inline-thread { border-left: 1px solid #F4F4F4; margin: 0 0 20px 35px !important; padding: 0 0 0 20px; }

.comments .continue { display: none; }

.comment-thread ol { counter-reset: countcomments; }

.comment-thread li:before { color: #677E52; content: counter(countcomments, decimal); counter-increment: countcomments; float: right; font-size: 16px; padding: 15px 20px 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: 12px; }

Тези кодове са подходящи само за дървовидните коментари. За линейните кодът е малко по-различен.

Номериране на линейни коментари

Код:

#comments-block { counter-reset: commentnumber; }
#comments-block dt:after {
  content: counter(commentnumber);
  counter-increment: commentnumber;
  position: absolute;
  right: 10px;
  font: normal 16px 'Century Gothic', 'Lucida Grande', Arial, Helvetica, Sans-Serif;
}

Инсталиране

Отидете в раздела Тема и намерете реда ]]> </ b: skin>. Веднага над него инсталирайте кода, който сте избрали.
Очаквам вашите мнения и въпроси.

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!