Как в системе Blogger создать свой собственный пользовательский стиль комментариев

Комментария в системы Blogger, конечно, достаточно гибкие, чтобы их можно было настроить и безопасно использовать на своем блоге. В прошлой статье, я рассказал вам, как использовать на блоге 2 системы комментарии Google и Blogger вместе, на этот раз я подумал и решил написать урок, который мог бы научить некоторые новичков основам создания пользовательской системы комментариев для своего блога Blogger. В этой статье использоваться будут стандартные классы, на примере которых я покажу вам, как создать пользовательский стиль системы комментариев в Blogger и вдобавок поделюсь несколькими классными трюками, которые вы сможете применить у себя на блоге.

Пользовательский стиль комментариев в Blogger

Примечание: так как, различные шаблоны блоггера создаются разными дизайнерами, я хочу, чтобы вы для начала избавились от всех предыдущих CSS кодов, которые используются в стиле ваших комментарий.

Как найти, какой именно класс CSS нужно редактировать:

В Google Chrome и Mozilla Firefox есть набор удобных инструментов для веб-разработчиков. Инструмент «Inspect Element» это волшебная палочка для веб-разработчика.

Просмотр кода элемента

Просто наведите курсор мыши на любой элемент, любой веб-страницы, нажмите правой кнопкой мыши и выберите пункт «Просмотр кода элемента». У вас появиться новое окно, которое будет отображаться в нижней части вашего экрана с двух сторонним разделением. На первой стороне, вы увидите исходный код, а на другой код CSS. На той стороне, где находиться CSS вы можете его редактировать для проверки высоты, ширины, цвета и т. д. Но как вы обновите страницу, все станет как прежде. Для внесения постоянных изменений, вы должны использовать те же CSS в таблице стилей вашего шаблона.

Стилизация аватара автора в комментариях:

Аватар это своего рода образ, который представляет вашу личность. Если кому-то из вас хочется сделать аватар закругленным, вместо простого прямоугольника. Реализаций такого рода довольно много, все можно сделать с помощью CSS, и все что вам понадобиться, это следующий кусок CSS кода. Вы также можете добавить свои собственные стили.

Изменить стиль аватара на круглую форму вы можете, просто воспользуйтесь ниже представленным кодом, вставьте CSS код в свой шаблон.

.comments .avatar-image-container, .comments .avatar-image-container img {
width: 48px;
max-width: 40px;
height: 40px;
max-height: 48px;
background: #FFF;
float: left;
border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 10px 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #ddd;
}
.comments .comment-thread.inline-thread .avatar-image-container, .comments .comment-thread.inline-thread .avatar-image-container img {
width: 36px;
max-width: 36px;
height: 36px;
max-height: 36px;
margin-left: 5px;
}

Совет: Перейдите в Blogger.com >> Шаблон >> Изменить HTML >> Найдите ]]></b:skin> и над ней вставьте код.

Стилизация тела комментария в Blogger:

Стилизация тела комментария позволит вещам работать на систематической основе. Все будет держаться вместе. Например, пользователь оставил комментарий, но поскольку тело не было хорошо сформировано, текст будет переваливаться через края. Поэтому, очень важно, чтобы отступы и края были сделаны соответствующим образом, так чтобы все выглядело аккуратно и чисто. Ниже приведен пример кода, которым вы можете легко воспользоваться. Также можете настроить его под себя.

#comments {
background-color: #fff;
padding-top: 20px;
border-top: 1px solid #ddd;
}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-left:60px;
width:490px;
}

.comments .comment-block,.comments .comment-thread.inline-thread .comment {
border:1px solid #ddd;
background:#fff;
background-color:#fff;
padding:10px;
padding-right:0px;
padding-left: 0px;
}

.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

.thread-chrome.thread-expanded .comment-header {
width: 412px;
margin-left: 15px;
}
.comments .comments-content .comment {
width:100%;
line-height:1em;
font-size:13px;
margin:15px 0 0;
padding:0;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 22px;
overflow: hidden;
}
.thread-chrome.thread-expanded .comment-content {
width: 380px;
line-height: 22px;
overflow:hidden
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}

.item-control.blog-admin {
display: none;
}
.comments .comments-content .comment-replies {
margin-top:0;
}

.comments .comment-content {
line-height: 1.4em;
padding: 15px;
}

.comments .comment-thread.inline-thread {
padding-left: 0px;
}

.comments .comment-thread.inline-thread .comment {
width:auto;
}

.comments .comment-thread.inline-thread .comment:after {
content:"";
position:absolute;
top:10px;
left:-20px;
border-top:1px solid #d2d2d2;
width:10px;
height:0;
}

.comments .comment-thread.inline-thread .comment .comment-block {
border:0;
background:transparent;
padding:0;
}

.comments .comment-thread.inline-thread .comment-block {
margin-left:48px;
}
.comments .continue {
border-top:0;
width:100%;
}

#comment-editor {
width:98%!important;
}

.comment-form {
width:100%;
max-width:100%;
}

Стилизация имени автора в комментариях и Мета:

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

#comments h4 {
display:inline;
line-height:40px;
padding:10px;
}
.comments .continue a {
background:#0d86cc;
text-align:center;
padding:10px 0;
display:none;
}
#comments h4,.comments .continue a {
line-height: 30px;
margin: 0;
padding: 20px 0 14px 10px;
font-size: 18px!important;
text-transform: uppercase;
font-weight: 400!important;
color: #444;
}
.comments .user a {
color: #444!important;
font-size: 18px;
line-height: 25px;
text-transform: capitalize;
margin-top: 20px;
font-weight: 600;
padding-left: 15px;
}
.comments .comments-content .datetime {
cursor: pointer;
float: right;
padding-top: 6px;
padding-right: 20px;
}
.icon.user {
background: url (http://4.bp.blogspot.com/-IWb4aHUGy9Y/UbCY5Le708I/AAAAAAAABWs/7quaLpItlhM/s1600/online.png) no-repeat;
height: 12px;
width: 16px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comment-thread.inline-thread .user a {
font-size:13px;
margin: 0px;
padding: 0px;
}

Вы также можете добавить свои собственные стили, чтобы изменить шрифт, цвет, размер и все, что вам понадобиться. Чтобы все сочеталось с вашим дизайном блога.

Стилизация кнопки «Ответить» в комментариях Blogger:

Почти все шаблоны  на блоггере имеют кнопку «ответить» на комментарий. Однако, оно работает только со встроенной системой. В наши дни, все шаблоны Blogger по умолчанию работают на встроенных комментариях. Так вот вам пример CSS кода, который вы можете непосредственно скопировать и вставить в таблицу стилей своего шаблона.

.comment-actions {
background: #f2f2f2;
padding: 8px;
margin-left: 435px;
border: 1px solid #ddd;
float: right;
margin-top: -30px;
margin-right: 5px;
}
.comment-thread a {
color: #777;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}

Стилизация Автора записей в комментариях, чтобы отличается от остальных:

Наверняка вы видели, что в комментариях автор записей выделен различными надписями, как «Редактор» или «Автор». Это помогает пользователям понять, что пишет или отвечает на вопросы автор.

Это можно реализовать с помощью .icon.blog-author, который поможет вам изменить стиль комментариев автора. Вот пример кода, который вы можете вставить в таблицу стилей.

.comments .comments-content .icon.blog-author {
display: inline-block;
height: 18px;
margin: 0 0 -4px 6px;
width: 18px;
background-image: url (http://3.bp.blogspot.com/-oXtMYI4_PL4/UbCYKeISeSI/AAAAAAAABWk/Zx8WKou8CkU/s1600/Verificon.png);
}

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>