0

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

коментарите в 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>. Веднага над него инсталирайте кода, който сте избрали.
    Очаквам вашите мнения и въпроси.

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

    BGtop

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

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

    Публикуване на коментар


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита