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

Доброго времени суток, всем. Сегодня в очередной раз публикую код виджета последние комментарии блога. Сколько их было - воз и маленькая тележка. И в конце концов многие из них "приказали долго жить" или перестали корректно отображаться.

К примеру, у меня на всех блогах, в гаджете последние комментариев вместо аватарки пользователя стали отображаться просто иконки Блоггер. Вот так

И на многих блогах наблюдалась та же картина. Проблем этого виджета, как и других аналогичных, была связана скорее всего с переходом на  HTTPS - соединение. Путём нудных проб и ошибок, удалось реабилитировать его. Посмотрите на этом блоге в сайдбаре.

Этот виджет не требует внешних скриптов и может быть установлен без изменения шаблона Blogger. Устанавливается в гаджет в нужном месте макета блога.

Сначала скопируйте код, приведённый ниже, сделайте соответствующие настройки, которые отмечены ниже. Затем  перейдите в Дизайн -> Добавить гаджет -> Основные -> HTML / Javascript .

<style type="text/css">
ul.commenti_recenti {
     list-style: none;
     margin: 0;
     padding: 0;
}
.commenti_recenti li {
     font-family:Georgia !important;
     font-size:13px !important;
     font-weight:bold;
     background: none !important;
     margin: 0 0 6px !important;
     padding: 0 0 6px 0 !important;
     display: block;
     clear: both;
     overflow: hidden;
     list-style: none;
}
.commenti_recenti li .avatarImage {
     padding: 3px;
     background: #efefef;   
     box-shadow: 0 1px 1px #bbb;
     float: left;
     margin: 0 6px 0 0;
     position: relative;
     overflow: hidden;
}

.commenti_recenti li img {
     padding: 0px;
     position: relative;
     overflow: hidden;
     display: block;
}
.commenti_recenti li span { 
     margin-top: 4px;
     color: #191919;
     display: block;
     font-size: 13px; 
    font-family:Georgia !important;
     font-weight:normal !important; 
     line-height: 1.3;
}
</style>
<script type="text/javascript">
//<![CDATA[
     // Impostazioni personalizzate
     var
numComments  = 6,
showAvatar  = true,
avatarSize  = 40,
roundAvatar = true,
characters  = 80,
showMorelink = true,
moreLinktext = "Дальше",
defaultAvatar  = "https://lh4.googleusercontent.com/-d8sFfc8eZoA/T8OGeWC33nI/AAAAAAAAYZA/OseLBU2FwI8/s80/avatar.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|commenti_recenti|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript" src="http://www.shpargalochki.ru/feeds/comments/default?alt=json&callback=commenti_recenti&max-results=6"></script>

Что можно изменить и отредактировать -

http://www.shpargalochki.ru/ вставьте адрес вашего блога
#efefef;  цвет фона изображения.
#191919; цвет текста комментариев
font-size:13px  размер текста имени в двух вхождениях
line-height: 1.3; высота межстрочного интервала
margin-top: 4px; это расстояние между именем комментатора и текстом комментария.
6 количество отображаемых комментариев
40 размер аваторки
Иконка анонимного комментатора отмечена строкой жёлтого цвета. Можно редактировать.

Если захотите сделать круглые аваторы в гаджете, тогда в коде над участком

.commenti_recenti li img {
     padding: 0px;
     position: relative;
     overflow: hidden;
     display: block;
}
Задайте стили для округления

.avatarRound {   
     border-radius: 100px;
}

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

Спасибо за внимание и до встречи.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :