В англоязычном блоге “Help Blogger. Tricks And Tutorials For You Blog” нашла несколько вариантов виджета “Последние комментарии”. Все виджеты вставляются в гаджет "HTML/JavaScript" во вкладке “Дизайн” админки блога.
1 вариант
В виде списка с первыми фразами из комментария (к сожалению, название комментируемой статьи отображается английскими буквами).
Источник: Recent Comments Widget For Blogger
А так выглядит этот виджет в сайдбаре блога:
HTML-код виджета № 1:
<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://exp13blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
Некоторые пояснения к коду:
http://exp13blog.blogspot.com - адрес вашего блога
<a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a> - ссылка на авторство виджета
2 вариант
Необычный виджет в виде раскрывающегося списка (можно раскрыть или один комментарий, или сразу все по кнопке “Show all”).
Источник: Expandable Recent Comments Widget For Blogger/Blogspot
Так выглядит виджет в сайдбаре блога (в нераскрытом состоянии):
А так будет выглядеть этот же виджет, если нажать на кнопку “Show all” (т.е. в раскрытом состоянии. При этом надпись на кнопке уже поменяется на “Hide all” - скрыть всё).
Примечательно, что в этом виджете при раскрытии комментарии отображаются полностью, т.е. без сокращения количества символов (как в других виджетах):
Как видно, в этом виджете название комментируемой статьи отображается уже нормально (т.е. русскими буквами). Однако, дата и время комментирования - в английском варианте.
HTML-код виджета № 2:
<style type="text/css" media="screen">.row-aa { background: #f2f2f3; }.row-bb { background: #F8F5F1; }.row-div {
margin:0px; padding:5px;}.comment-header { font-size:0.9em;// border:1px solid #E0E0E0;// background-color:#F3F3F3; padding:4px; margin-top:10px; margin-bottom:5px;}.comment-box { margin:0px; padding:0px; font-size:0.9em; height:500px; overflow:auto;}.comments1 {
// background: #F3F3F3; padding:3px; border-left:1px dashed #A6A6A6; color: #888888; font-style: italic; padding-top:4px; margin-bottom:5px;}.comment-footer { text-align:center; font-size:0.9em; padding:4px; margin-top:5px;
}</style>
<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == 'Show all') { unfold_all(this); this.value='Hide all'; } else { fold_all(this); this.value='Show all'; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>
<div class="comment-box"><script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script><script type="text/javascript" src="http://exp13blog.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts"></script><script type="text/javascript" src="http://exp13blog.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments"></script>
</div>
Пояснения к коду:
http://exp13blog.blogspot.com - вместо выделенных красным (2-х участков) подставить адрес своего блога
3 вариант
В этом виджете добавляются ещё и аватарки авторов комментариев (которые к тому же ещё и вращаются при наведении курсора).
Кроме того, при наведении курсора на имя комментатора появляется всплывающая подсказка с заголовком комментируемой статьи и датой и временем её комментирования.
Источник: Recent Comments Widget With Hide Author Comments Function For Blogger
Виджет в сайдбаре блога будет выглядеть таким образом:
HTML-код виджета № 3:
<style type="text/css">
.rc{padding-left:24px; padding-top: 6px;}
.rc a:hover {color: #F3903E;text-decoration: none;}
.rc-ico{margin-left:-20px;margin-top:4px;float:left; margin-right:3px}
.rc-ico img {margin-top: -2px;margin-right:5px; border: 2px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out; }
.rc-ico img:hover {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);}
.rc-header{font-size: 13px;}
.rc-header a{}
.rc-body{font-style: italic; font-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}
.rc-footer{font-size:11px; float: right;}
#rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;}
</style>
<script type="text/javascript">
var numRecentComments = 5;
var maxCommentChars = 67;
var trueAvatars = true;
var urlMyAvatar = '';
var urlMyProfile = '';
var cropAvatar = true;
var sizeAvatar = 50;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKufHjVWqzf2Ew9PbO-GgVPs67ajNjcCD7sNhAoUwcF4B1ZTdo64D2uK1eZqeBth4KHZW5f9aZ5qnF9EuyQ2pfQ4seCI8IrxrG7ZJqVjuK_NvKXN2TvFzz0_orfWAM44fGVg-jeUArPzsI/"+sizeAvatar+"/anonymous-Icon.jpg";
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var txtMore = '';
var txtWrote = 'commented:';
var txtAnonymous = '';
var maxResultsComments = "";
var numPerPost = 2;
var maxPostTitleChars = 40;
var getTitles = true;
var maxResultsPosts = "";
var txtTooltip = '[user] on "[title]" - [date MM-dd-yyyy hh:mm]';
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'"'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href='';
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href=='') {j--; continue; }
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="-";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
}
var authorName = entry.author[0].name.$t;
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = entry.author[0].gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " rc-admin";
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);
var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
if(!/#/.test(href)) href += "#comments";
document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
}
}
document.write('<div style="clear:both;"></div></div>');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>
<span id=rcw-cr><a href=http://helplogger.blogspot.ro/2013/03/recent-comments-widget-with-hide-author.html>Recent Comments Widget</a></span>
Пояснения к этому коду:
1) var numRecentComments = 5; - количество комментариев = 5 (можно изменить)
2) var maxCommentChars = 67; - количество отображаемых символов текста комментария = 67 (можно изменить)
3) var sizeAvatar = 50 - указан размер аватарки (можно изменить)
4) Blogger User - 2 строчки; если в эти строчки вписать имя автора блога, то в виджете комментарии автора блога не будут отображаться.
5) <a href=http://helplogger.blogspot.ro/2013/03/recent-comments-widget-with-hide-author.html>Recent Comments Widget</a> - сведения об авторстве виджета
Все виджеты мне показались симпатичными и любой можно поставить на блоге.
Мне также понравилось то, что при добавлении этих виджетов не предусмотрено внесения изменений в HTML-код шаблона блога. Так что если виджет надоест или его захочется поменять на другой, достаточно всего лишь удалить его из Дизайна блога.
Спасибо, Марина!
ОтветитьУдалитьПривет,Татьяна! Какими судьбами вы оказались на Блогспоте? :)
УдалитьПривет! Я тут давно) Вчера прилинковала доменное имя к блогу, экономлю место на платном хостинге в связи с предстоящими переменами на blog.tut.by. Искала скрипт для отображения комментариев. Заходите, чуть что) http://enlang.info
УдалитьСпасибо, Марина!
ОтветитьУдалитьСпасибо за скрипт, но возник вопрос - в примере №2 можно как-то регулировать размер? Т.е., чтобы отображались, например, только последние 5 комментариев или размер самого окна с комм.?
ОтветитьУдалитьСпасибо а помощь. У меня все получилось со скриптом №3. Я "русифицировала" его, заменив в коде "commented" на "написал(а)". Спасибо больше. Вот что у меня получилось - http://www.literaturus.ru/
ОтветитьУдалить