Как подчеркнуть комментарии автора на блоге Блогспот (Blogger)

Автор Damir-Tote. Опубликовано в Блог, Все о Блогспот

           В этом Blogger уроке я покажу вам, как выделить комментарии автора с помощью CSS.

 
Преимущества добавления стилей CSS для автора комментариев. Если вы используете по умолчанию комментарии Blogger, трудно провести различие между комментариями, сделанные посетителями и сделанные вами, в блоге автора. Если у вас есть только несколько комментариев, то серьезной проблемой для вас не станет. Однако, если у вас есть какие-то посты с большим количеством комментарии, то в таком случае ваши комментарии тонут среди всех прочих и возникает вопрос, как выделиться среди всех. Мы можем сделать это, добавив CSS для того чтобы выделить ваши комментарии автора.
 
В этом Blogger уроке вы узнаете, как легко добавить изменения на ваши комментарии, так что они никогда не будут теряться в толпе. Это требует небольшого количества настройки, чтобы ваш шаблон Blogger принял изменения. Изображение ниже показывает один из примеров того, что может быть достигнуто с помощью стилей CSS.
Как подчеркнуть комментарии автора на блоге Блогспот (Blogger)
            Я уже установил эту возможность себе на блог, в конце поста вы можете его понаблюдать.
 
Следующие инструкции позволяют выделить комментарии автора в разделе комментариев Blogger. Код создает темный прямоугольник вокруг комментария, сделанный автором блога. Эти изменения не повлияют на CSS стиль других комментариев.
 
            Переходим к самой инструкции первого метода:
 
1. Войти в Blogger
 
2. Перейти Дизайна > Изменить HTML
 
3. Делаем резервное копирование шаблона, загрузив его на свой компьютер
 
4. Ставим галочку «расширить шаблоны виджета»
 
5. Используйте сочетание клавиш CTRL + F, введите следующее в поле поиска
 
<dd class='comment-body'>
 
6. Немедленно выше этой линии, вставьте следующий код:
 
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
 
7. Теперь посмотрите на этот блок кода
 
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
и вставить  </b:if>, сразу после него.
 
8. Ваш код будет выглядеть так:
 
<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
 <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
 <b:loop values='data:post.comments' var='comment'>
 <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
 <b:if cond='data:comment.favicon'>
 <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
 </b:if>
 <a expr:name='data:comment.anchorName'/>
 <b:if cond='data:blog.enabledCommentProfileImages'>
 <data:comment.authorAvatarImage/>
 </b:if>
 <b:if cond='data:comment.authorUrl'>
 <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
 <b:else/>
 <data:comment.author/>
 </b:if>
 <data:commentPostedByMsg/>
 </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
 
9. Теперь с помощью CTRL + F еще раз, найдите эту строку ]]></b:skin>
 
10. Вставьте следующий код, непосредственно перед ]]></b:skin>
 
.comment-body-author {
background: #f5deb3;
border: 2px solid #de7008;
padding: 5px;
}
 
11. Сохранить изменения шаблона
 
12. Нажмите на Просмотр Блога и идти на пост, чтобы увидеть CSS подчеркнул ли ваши комментарии.
 
Второй способ, чтобы добавить выделение на комментарии автора в Blogger. А для себя я выбрал первый метод, второй не прижился. Следующий метод будет также добавлять выделение на комментарии автора в Blogger и может быть использована, если у вас есть трудности с первым методом. Это, правда, включает изменения в код шаблона.
 
1. Войти в Blogger
 
2. Перейти Дизайн > Изменить HTML
 
3. Делаем резервное копирование шаблона, загрузив его на свой компьютер
 
4. Ставим галочку «расширить шаблоны виджета»
 
5. Найдите следующий раздел кода с помощью клавиш CTRL + F и введите <data:comment.body/>  в поле поиска
 
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<b:include data='comment' name='commentDeleteIcon'/>
</b:if>
 
6. Замените следующий код после того, как <span class=’deleted-comment’>  до </b:if>, как показано красным цветом:
 
<span class='deleted-comment'>
<!--Highlight Author Comments Start-->
<b:if cond='data:comment.author == data:post.author'>
<p class='comment-body-author'><data:comment.body/></p>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<!--Highlight Author Comments End-->
</b:if>
 
7. Используйте сочетание клавиш CTRL + F, чтобы найти ]]></b:skin>, который закрывает CSS раздел.
 
8. Вставьте следующий код сразу над ]]></b:skin>
 
p.comment-body-author {
background: #eeeecc;
border: 2px solid #335577;
padding: 5px;
color:#558866;
}
 
9. Сохранить шаблон
 
10. Нажмите на просмотр блога и перейдите к сообщению, который вы прокомментировали и увидите ваши изменения.
 
В этом Blogger уроке вы научились двумя методами выделять автора комментариев в вашем Blogger блоге. Бывает, есть еще некоторые работы, чтобы настроить цвета в CSS, чтобы соответствовать цветовой гамме вашего блога, а также поиск всех кодов. Удачи!
 
До новых статей!!!

Трекбэк с Вашего сайта.

.