[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/AVvXsEgdujlt-2qh0UQVjcPEyBzG5vRzXx2IHY01hwHCG6tWyNXSl6z-zLW0YpgcHPtMHZNg_EWLk4DzyrXadtt66tKACh7dIcTWlN8vEQOHvj0l2JIkfcd5YjZPXHUoR59ndbndg7_BaaOimaXc/s1600/default-avatar.jpg",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript"  src="http://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="http://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/AVvXsEgdujlt-2qh0UQVjcPEyBzG5vRzXx2IHY01hwHCG6tWyNXSl6z-zLW0YpgcHPtMHZNg_EWLk4DzyrXadtt66tKACh7dIcTWlN8vEQOHvj0l2JIkfcd5YjZPXHUoR59ndbndg7_BaaOimaXc/s1600/default-avatar.jpg", // URL-адрес аватара для анонимных пользователей

hideCredits = true; // true - строчка об авторе скрыта; false - строчка об авторе отображается 

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

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwnHkufuuKHuPbaVAY56q0-bR1jN0phAyZ-g_yby80XMriicj2t5k4SSRoOiK26qWTfPJM5MzmCzF2N-wDNzouG7pcpFfUY8ofV_9UDd50zjKwepyhNhyphenhyphen2z9yM-76QLiWrZnVcCrzygt0/s1600/default-avatar-1.gif

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLNxTn6UjbYgcALv4PA8K0ekhsfOTyHRO6B-GJtOfWFPaPHv4i_f2i6xGXjPOH_kg_UiBcObxAa8nDHP7Dh9S22rQYpzITROpLqefIeGe_cMb_v7IAZfmqa7-0PBbb6KwYvi06eeknZLI/s1600/default-avatar-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8aHUjWdg0Q3EtSNhKI0e2NFC2mRxPmJ-YD7G5mz9PZ4G0k9NE750KaIhq0Yp59soPYlXbeqYMwAb_Z9mkFEGP8uJRGOtJL-NJj103eR_0QKLTx_V6Nanv-FxUjxbi3jvGeIxK5x3SngY/s1600/default-avatar-4.gif

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

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

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