inComm

Version 9, Updated 20 Dec 2011

InComm is a Blogger widget designed to display comments below your blog posts on the home page, on Older Posts and Newer Posts pages, and on labels pages. It requires that your blog's Per-Post Comments feed is turned on.

Instructions

1. Click the button to add inComm to one of your blogs. See this Blogger Help article for more information about adding widgets to your blog.
2. A window will pop up that allows you to select which blog of yours you want to add inComm to. Select the blog you want this widget to be added to from the drop-down list.
3. If you want inComm to remain hidden, you can delete the title. If you delete the title, inComm will show up under the name HTML/JavaScript in the steps below.
4. Press the ADD WIDGET button.
5. After the pop-up window closes and the page changes to one that shows each gadget/widget as a rectangular box, drag and drop inComm to an open slot below the Blog Posts box.
6. Push the SAVE or Save arrangement button at the top of page.
7. View your blog's home page to verify that inComm installed correctly.
8. Return to the Layout configuration page at any time to modify inComm's CSS or the HTML used to display each comment in the inCommHTML variable.

inComm (customize manually please)

<b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> <style> .inComm { max-height: 200px; overflow: auto; padding: 0 1.5em; } .inComm ul { list-style-type: none; margin: 0; padding: 0; } .inComm li { margin-top: 5px; margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px dotted #EEE; } .inComm li:hover { background-color: #EEF; } .inComm td { vertical-align: top; padding-right: 15px; } .inCommLeft { width: 150px; text-align: right; } .inCommRight { } .inCommDate, .inCommTime { margin-top: 7px; font-size: x-small; display: block; } .inCommNumber { float: left; font-size: small; font-weight: bold; color: Black; background: Khaki; border: 1px solid Gold; padding: 0 5px; margin: 0 10px 10px 0; } .inCommAvatar { float: left; clear: left; } </style> <script> /** * Modify the number of comments by * changing the value of this variable. * Acceptable values are integers 1 to 200. */ var inCommMaxComments = 25; /** * Change the default avatar image by * changing the URI (link address) below. * The default image should be 32 by 32 pixels. */ var inCommAvatarURI = "http://img2.blogblog.com/img/b16-rounded.gif"; /** * Modify the HTML for comments here. * Comment components that can be * inserted anywhere are denoted by * two underscores on both sides of the * component name with no spaces in between. * * Components include: * commentNumber, commentURI, content, * authorURI, author, avatarURI, * date, year, month, monthName, day, * time, hour, 12hour, minutes, seconds, and ampm. * * You can use the default styling classes or * make your own and modify the CSS rules at top. */ var inCommHTML = '<table><tr><td class="inCommLeft"><div class="inCommNumber">__commentNumber__</div><div class="inCommAvatar"><img src="__avatarURI__" height="32px" width="32px"/></div><a href="__authorURI__">__author__</a>:<div class="inCommDate"><a href="__commentURI__">__monthName__ __day__, __year__</a></div><div class="inCommTime"><a href="__commentURI__">__12hour__:__minutes__ __ampm__</a></div></td><td class="inCommRight">__content__</td></tr></table>'; /** * Warning: Please do not modify any of the following code. */ var inComm=function(){var n={},g,d=0,m=!1,i=!1,u,v=!1,w=!1,x=!1,y=!1,z=!1,A=!1,B=!1,C=!1,D=!1,E=!1,F=!1,G=!1,H=!1,I=!1,P=",January,February,March,April,May,June,July,August,September,October,November,December".split(",");/__author__/.test(inCommHTML)&&(m=!0);/__authorURI__/.test(inCommHTML)&&(i=!0);/__avatarURI__/.test(inCommHTML)&&(u=!0);/__date__/.test(inCommHTML)&&(v=!0);/__time__/.test(inCommHTML)&&(w=!0);/__content__/.test(inCommHTML)&&(x=!0);/__commentURI__/.test(inCommHTML)&&(y=!0);/__commentNumber__/.test(inCommHTML)&& (z=!0);/__year__/.test(inCommHTML)&&(A=!0);/__month__/.test(inCommHTML)&&(B=!0);/__monthName__/.test(inCommHTML)&&(C=!0);/__day__/.test(inCommHTML)&&(D=!0);/__hour__/.test(inCommHTML)&&(E=!0);/__12hour__/.test(inCommHTML)&&(F=!0);/__minutes__/.test(inCommHTML)&&(G=!0);/__seconds__/.test(inCommHTML)&&(H=!0);/__ampm__/.test(inCommHTML)&&(I=!0);return{setPlace:function(e){g="inComm"+d;d++;return n[e]=g},parser:function(e){var d,c,a,b,h,g,f,J,K,L,o,j,k,M,q,p,N,r,l,s,t,O;if(e&&e.feed&&e.feed.entry&&0!== e.feed.entry.length){d=e.feed.link[0].href;d=document.getElementById(n[d]);c=e.feed.entry;o="";j=window.location.href;M=parseInt(e.feed.openSearch$totalResults.$t,10);e="";for(b=0;b<c.length;b++){a="<li>"+inCommHTML+"</li>";g=c[b].author[0].name.$t;f=c[b].published.$t.match(/\d+/g);q=f[0];p=f[1];N=P[parseInt(p,10)];r=f[2];K=q+"-"+p+"-"+r;l=f[3];s=f[4];t=f[5];L=l+":"+s+":"+t;O=11<l?"pm":"am";k=M-b;f=c[b]&&c[b].author[0].uri?c[b].author[0].uri.$t:"http://www.google.com/search?as_epq="+encodeURIComponent(g)+ "&safe=active";J=c[b]&&c[b].author[0].gd$image&&c[b].author[0].gd$image.src&&!/^http:\/\/img\d\.blogblog\.com\/img\/blank\.gif$/.test(c[b].author[0].gd$image.src)?c[b].author[0].gd$image.src.replace(/\/s\d+(?:-c)?\//,"/s32-c/"):""!==inCommAvatarURI?inCommAvatarURI:"http://img2.blogblog.com/img/b16-rounded.gif";if(c[b]&&c[b].content)o=c[b].content.$t;else if(c[b]&&c[b].summary)o=c[b].summary.$t;if(c[b]&&c[b].link)for(h=0;h<c[b].link.length&&!("alternate"===c[b].link[h].rel);h++);if(c[b]&&c[b].link[h]&& c[b].link[h].href)j=c[b].link[h].href,200<k&&(j=0===k%200?j.relpace(/\?/,"?commentPage="+Math.floor(k/200)+"&"):j.replace(/\?/,"?commentPage="+(Math.floor(k/200)+1)+"&"));m&&(a=a.replace(/__author__/g,g));i&&(a=a.replace(/__authorURI__/g,f));u&&(a=a.replace(/__avatarURI__/g,J));v&&(a=a.replace(/__date__/g,K));w&&(a=a.replace(/__time__/g,L));x&&(a=a.replace(/__content__/g,o));y&&(a=a.replace(/__commentURI__/g,j));z&&(a=a.replace(/__commentNumber__/g,k));A&&(a=a.replace(/__year__/g,q));B&&(a=a.replace(/__month__/g, p));C&&(a=a.replace(/__monthName__/g,N));D&&(a=a.replace(/__day__/g,r));E&&(a=a.replace(/__hour__/g,l));F&&(a=a.replace(/__12hour__/g,0===l%12?12:l%12));G&&(a=a.replace(/__minutes__/g,s));H&&(a=a.replace(/__seconds__/g,t));I&&(a=a.replace(/__ampm__/g,O));e+=a}d.innerHTML=e}}}}(); document.getElementsByClassName?(inComm.postFooters=document.getElementsByClassName("post-footer-line-2"),inComm.postIDs=document.getElementsByClassName("hentry")):(inComm.getTagsByClass=function(n,g){var d,m=[],i=document.getElementsByTagName(n);for(d=0;d<i.length;d++)-1!==i[d].className.search(g)&&m.push(i[d]);return m},inComm.postFooters=inComm.getTagsByClass("div","post-footer-line-2"),inComm.postIDs=inComm.getTagsByClass("div","hentry")); if(/^\/$|^\/search/.test(location.pathname))for(inComm.i=0;inComm.i<inComm.postFooters.length;inComm.i++)inComm.url="http://"+location.host+"/feeds/"+inComm.postIDs[inComm.i].getElementsByTagName("a")[0].name+"/comments/default",inComm.outerBox=document.createElement("div"),inComm.outerBox.className="inComm",inComm.commentList=document.createElement("ul"),inComm.commentList.setAttribute("id",inComm.setPlace(inComm.url)),inComm.outerBox.appendChild(inComm.commentList),inComm.postFooters[inComm.i].appendChild(inComm.outerBox), inComm.script=document.createElement("script"),inComm.script.src=inComm.url+"?alt=json-in-script&callback=inComm.parser&start-index=1&max-results="+inCommMaxComments,document.body.appendChild(inComm.script); </script>

Additional notes

• For more information about configuring Per-Post Comments feed settings, please consult this resource on Blogger Help.
• To remove inComm, return to your Layout configuration page and click the "Edit" link in the inComm widget's rectangle. Then click the REMOVE button in the pop-up window.