.png)
Metro Style Recent Comments V2 Widget For Blogger
Hi guys,Again after releasing the first version of metro style recent comments today i release the second version it is not very metro styled but it is some so that is why it is the second version of the metro style recent comments.
Demo
Install It Into Blogger
1. Log Into Blogger
2. Navigate To Layout
3. Click Add A Gadget
4. Scroll Down
5. Select HTML/Javascript
6. Now Paste The Following Code There
<script type='text/javascript'>//<![CDATA[
function latest_recent_comments(e){var t;t='<ul class="latest_recent_comments">';for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+="<li>";var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel=="alternate"){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf("/s1600/")!=-1){s=s.replace("/s1600/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s220/")!=-1){s=s.replace("/s220/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s512-c/")!=-1&&s.indexOf("http:")!=0){s="http:"+s.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(s.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2mw0RBbOkfsdq0nPdHopY5Degw3LJ5kbJOfetXfa-8AS4Bg6j427s1klqvpE7nxxHL0cwPCsAdCmUw50PmmFxkuRHNjjiWQLW_DPvcpMDR94d_9OCo2kPkvdXr9g2XuXq2lAL7JF_myqv/"+avatarSize+"/md_blogger_logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWy5h9PFv9hk2Eag35Z9Ras6aCSzuasfnkCLRjU6v5AalmpTT1p8T1F92isjG4ZHR9n-XjgJ6xAiSXqKsg6WJwzc0NNqSB_GxId34lCcTjqCe-hF3y4cxR4LLmmD-AIsez5luJu9pdLKw/"+avatarSize+"/md_openid_logo.png"}else if(s.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){s=defaultAvatar+"&s="+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o="avatarRound"}else{o=""}t+='<div class="avatarImage '+o+'"><img class="'+o+'" src="'+s+'" alt="'+i+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}t+="<span>"+i+"</span>";var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,"");if(c!=""&&c.length>characters){c=c.substring(0,characters);c+="…"}else{c=c}t+='<a href="'+r+'">'+c+"</a>";t+="</li>"}t+="";document.write(t)}var numComments=numComments||8,avatarSize=avatarSize||34,characters=characters||26,defaultAvatar=defaultAvatar||"https://lh5.googleusercontent.com/-5YeC_6-32nw/UPb7SL-uGXI/AAAAAAAABWE/QJRpUV7G9bc/s80/personal.png",showAvatar="undefined"===typeof showAvatar?!0:showAvatar,roundAvatar="undefined"===typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"===typeof hideCredits?!1:roundAvatar
//]]></script>
<script type="text/javascript" src="http://buzz.blogger.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>
<link type="text/css" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/77us9x1267td2r8/metro-style-recent-comments-v2.css"/>
Customization
- Now Change http://buzz.blogger.com with your blog link.
- Change 5 with with number of recent comments to be displayed.
7. Click Save
And DoNe.
%2Btitle%2Bwhen%2Buser%2Bloses%2Bfocus.png)
Hello Itried on http://lastingrose.blogspot.co.uk/2013/05/white-goat-and-caged-parrot-how-indian.html but doesn't work.
ReplyDeleteI have downloaded the css and everything is in the html of the main page. No luck though Version 1 worked fine.
Could you please let me know how to get it working.
Hi Sreeddhar, Please try again by copying and pasting the code as it is and changing the http://buzz.blogger.com with http://lastingrose.blogspot.co.uk and not with http://lastingrose.blogspot.co.uk/2013/05/white-goat-and-caged-parrot-how-indian.html
ReplyDeletei am sure it will work please try again.
Here is what I have in the HTML other than the CSS :
ReplyDeletescript src='http://lastingrose.blogspot.co.uk/feeds/comments/default? alt=json&callback=latest_recent_comments&max-results=3' type='text/javascript'/
If I try to copy your code I get only this
ReplyDelete- See more at: http://bloggeraxe.blogspot.co.uk/2013/06/metro-style-recent-comments-v2-widget.html#sthash.1zeEXKk7.dpuf
However I have copied the script from the page source and put in the HTML brfore /body tag.
I have placed your script and calll for comments feed in a DIV just above your other working code for RECENT POSTS at the bottom of the page above the footer due to LENGTH of comments field (Not suitable for side bar widget) Recent posts work well but comments don't show up though they show up in the GOOGLE comments.
ReplyDeleteSorry but this widget only shows comments from blogger comments not of google plus comments there is still no recent posts widget for Google plus comments.
DeleteHey Mark,
ReplyDeletePlease see my site. I have blogger comments integrated with Google comments. However your version 1 worked with Google comments, in a sidebar widget Don't understand why it won't work together as you are calling the coomments feed independant of Google comments.
Yes` And i am still on my word check this demo http://jsbin.com/idoyam/2/edit the both comments show the same recent comments.
DeleteNote: ( The first version was by mark and not me.)
Hi Mark, Thanks for the demo. Strangely , linking the CSS file seems to work but not putting in the template CSS. However I noticed your RECENT posts don't work in Internet Explorer. Please see http://lastingrose.blogspot.co.uk/2013/06/is-india-heading-towards-best-decade.html
DeleteHello Mack , I got it working by linking to the css file. You look to be an expert on METRO style. Is there any way you can put together a METRO style CSS based GRID to show POPULAR POSTS which will go with the METRO MINIMALIST template?
DeleteI and Mark are already working on our metro grid style here is a image demo https://plus.google.com/u/0/118155467503282413193/posts/9aN4RihrjzV
DeleteGreat Guys!I shall look forward to see your widget working soon. Best of LUCK!
ReplyDelete