Добавляем виджет последних комментариев с аватарами авторов в Blogger

День добрый, дорогие читатели!
Сегодня я покажу Вам как сделать просто, но в то же время  функциональный виджет последних комментов для сайтов на блог-платформе Blogger.

1. Как установить виджет?
2. Настройка виджета последних комментариев
3. Мне не нравиться аватар для анонимов!

Как установить виджет?

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

3. В открывшемся окне из списка виджетов выбирайте HTML/JavaScript (нажатием на значок  + 

4. Вводим заголовок виджета, а во второе поле - вставляем весь код, который указан ниже. 

<style type="text/css">
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px  !important;padding: 0 0 6px 0 !important;display: block;clear:  both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments li .avatarImage {padding: 3px;
background: #fefefe;-webkit-box-shadow: 0 1px 1px #ccc;-moz-box-shadow: 0  1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float: left;margin: 0 6px 0  0;position: relative;overflow: hidden;}
.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments li span {margin-top: 4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Настройки виджета
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycfAHbf6NVva59jucA_Yty7T4GRXoPz63S66j7ZBBexoHAeiEIat0aGsqSloK13Kv3G8XdWmN9IvJd4AL45XBio9ci-xyl6tiNS2PxwnYlzBRuXch7PGK-FSRHKoNT12DLFdzjSdxlmY8/s1600/default-avatar.jpg",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript"  src="https://helplogger.googlecode.com/svn/trunk/helplogger/[helplogger.blogspot.com]recent-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div  style="font-size: 10px; float: right; margin-top: -15px">Получить свой виджет<a  href="https://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html"  rel="nofollow" >Виджет Последних комментариев"</a></div>

Скачать скрипт с Google.Drive | Скачать с сервера 1 | Скачать с сервера 2

Настройка виджета последних комментариев

numComments  = 5,  // количество отображаемых комментариев в виджете
showAvatar  = true, // true - отображает аватар автора коммента; false - не отображает
avatarSize  = 60, // размер аватара в пикселах
roundAvatar = true, // true - круглые аватары; false - пользовательские
characters  = 40, // количество символов коммента, которые будут отображены в виджете  
defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycfAHbf6NVva59jucA_Yty7T4GRXoPz63S66j7ZBBexoHAeiEIat0aGsqSloK13Kv3G8XdWmN9IvJd4AL45XBio9ci-xyl6tiNS2PxwnYlzBRuXch7PGK-FSRHKoNT12DLFdzjSdxlmY8/s1600/default-avatar.jpg", // URL-адрес аватара для анонимных пользователей
hideCredits = true; // true - строчка об авторе скрыта; false - строчка об авторе отображается 

Мне не нравиться аватар для анонимов!

В строчке defaultAvatar  замените синий текст (URL дефолтного аватара) на адрес своего изображения. Я предлагаю вам  несколько изображений найденных мною. Пользуйтесь!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZLPAXZTiO29PSsFiS5PCGdSSj9v9FB7B-ZenpDWLOsHg_Jx0pUTNjsGYzH3JeDC7LtJvCxmWTyFbFk-EN7_5-C3mC8PHkh9HVlyVkYSkPjb5nulGv8GZ_cLJfGUVt5uzMpcf0ja7Jig/s1600/default-avatar-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKx9l7PoKvXsqPXiV4sbJUrB6yqTM5Hso6N7wfG1BDcu5o6ctoJyZ6HMpatHPrJ4t-2YndcNPIPtq78iH0gB6dJXCKot8ejlEATjhVneoZZX8QW3B2wzquCNLpiCruldeMHX0Dh3vKeN0/s1600/default-avatar-2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfaF6IbrLo-7tJgEjVMmLxb24lNb9qjiB4Wm9WpaWcmWYnjIes9B9SV3N7NEvqwG9gU_q4vQrQVGJuRqjayyZCi9jnC32XTV6V0ZLot7xdBL1NZhYJ9qZrXkbDpr8ppBwHYKWi4Sklzas/s1600/default-avatar-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGD9tg95I8kwqumv3sAFjsnhJkOIds5yfGw5NVQ9QDh_Q_qZIYF1cMM-xqYVn6-9AS4srX1L1ks9R8TJTJXnQn-Set4v65gJpNxZUVkqiuLYobQJ2Uw4dLvHw4LUMmNF40FC-7PoSYuSg/s1600/default-avatar-4.gif

Больше изображений для аватарок можно найти на Findicons.com или других подобных сервисах.

Кстати, я уже писал как поменять стандартны аватары для анонимных пользователей и пользователей, которые еще не загрузили свой аватар. О том как это сделать читайте  в посте "Заменяем стандартные аватарки комментаторов в Blogger".

На этом всё. Ваши вопросы жду в комментариях. До новых встреч
Спасибо автору скрипта - Helplogger