I have made some minor, optional changes that just make the code cleaner. I have removed support for my old comment photo hack from this code. I have added support for my new comment photo hack. Please re-install if you are going to use the new hack. Check out my casino website www.top10slotgames.com for how these codes work.
I have added the ability to limit the number of comments displayed (requested by kca) and fixed the Jose problem.
Many people have benefited from my peek-a-boo comments hack for the new Blogger. It has one serious downfall however. Loading all that extra data inline can be slow. This version of the hack is designed so that the comments are not loaded until after you click the link to display them. This fixes some minor issues and improves speed like no one’s business.
- Go to the layout on your BETA blog and select ‘Edit HTML’.
- Check the ‘Expand Widget Templates’ box.
- Paste the following code into the <head> section of the template:
<script type='text/javascript'>
//<![CDATA[
var comment_form_template = '<div class="commentelem" style="clear:both">\n'
+ '<div style="float:left;margin-right:5px;clear:both;" id="commentphoto[[CID]]"></div>'
+ '<div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
//]]>
</script>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&id=2941927' type='text/javascript'/>
- Find the code that looks something like:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
And replace that second line with:
<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
document.getElementById('comments<data:post.id = 'none';
</script>
</b:if>
- Right below this, find the code that looks like
<dl id='comments-block'> and just before it, insert <div expr:id='"commentsul" + data:post.id'> </div>
- Next, find the post-generating code. It will look start something like this:
<b:includable id='main' var='top'>
<!-- posts -->
In this section there will be a block of code that looks something like:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Replace it with this:
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
- Find the post template section, which starts something like this:
<b:includable id='post' var='post'>
And then find the link to the comments area, which looks something like:
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
And replace it with:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display("" + data:f.url + "","commentsul" + data:post.id + "","","" + data:post.url + "#comments","max comments");toggleitem("comments" + data:post.id + "");return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem("comments" + data:post.id + "");return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
Replace the red max comments with the maximum number of comments to display asynchronously (or replace with false to display all comments).
- Click ‘Save Template’ and, if it appears, ‘Confirm & Save’, then view your blog.
To make my comment author photos and highlighting work with this you will need to make sure you have the latest version of that hack installed.
I now have eight variations of my original peek-a-boo widget. (See also peek-a-boo HTML and peek-a-boo scrolling.) I was then asked for yet another variant. I realised that keeping these strictly in posts is insane and disorganised. So I have added the variant (open links in new window) and created a wizard. Just follow the steps and generate the code for your widget, just the way you like it!
Peek-a-boo Widget Generator
What is the point of getting that profile section in your sidebar marked up as an hCard? There are a number of reasons. Your blog will be compatible with the features of the new Operator Firefox Extension. If you ping Pingerati (or you’re indexed by Technorati), people will be able to find you on the hCard Search Engine. There are, obviously, other reasons as well.
What’s that? Blogger doesn’t output this markup by default, and you don’t want to learn the codes? No problem! Use my new hCard Profile Wizard and follow the easy two-step process to include an hCard-compatible profile in your blog!
I toot my own horn too much. This blog has more recently been at least 90% my own code. My readership seems to be going up though (FeedBurner reporting over 60 as of yesterday).
Either way I think I’ll spend this posts talking about some of the more recent developments in the hacker community. Some of this is new, some of it is old, it is not a comprehensive list. This is just what I thought was cool recently 😉 These are in no particular order.
Stubborn Fanatic (Vivek Sanghi)
- …has used the new Blogger ‘if’ tags (as he documented them) to create a hack that shows Google AdSense ads inside posts on item pages. My blog is ad-free. I find ads inside posts the most annoying. If I ever do ads I promise they will not interfere with the post. But at least his hack keeps them from cluttering the main page.
- …colourful, colourful comments!
- …fix your layout editor (you have a hacked-beyond-belief template!)
- …has created a horizontal menu bar of your tags (yawn…) with drop-down lists of the most recent posts (cool!) Definately a hack to check out, even if you don’t install it.
Hoctro
Note to Hoctro : how about a way to browse your blog by date? The newest entry on the main page and then no interface for date-based archives or a prevous-post link/list. Nothing. Annoying.
Hackosphere (Ramani)
- Neo template. Maxtrix-cool, fast, Web 2.0 extravaganza. And he’s selling it! (You money-maker you… 😉 )
PurpleMoggy
BlogU
iMessengr
If you read here at all, you’ll know I’ve been busy too… but you can just read that, I’m not going to make a list of links to myself 😉
Tired of running from my blog to FreshBlog, to Bloggeratto, to Hoctro, to Beautiful Beta, to Hackosphere, to PurpleMoggy, to others trying to find hacks? Enter the Blogger Hacks Wiki. Launched back in June with the collaboration of many hackers and bloggers, this Wiki is meant to be the Wikipedia of Blogger Hacks. Not all of the newest hacks are there, but the general available ones should be.
Since the Blogger BETA (now the new Blogger) launch, the wiki has been stagnating just a little bit. Hacks have been rolling out at record rate from many new players. I myself have been very lax at entering all my new hacks into the Wiki. One problem was that one could not tell from the wiki if a hack was for the old or new Blogger.
No longer. The main ‘View Hacks’ link now points to the Wiki Category for the New Blogger, and I have added categories to all the hacks’ pages based on platform. We as hackers need to start adding our hacks back into this database — everyone will benefit, even us! (Who wants to duplicate work if there’s an easy way to find out someone else already did it?) There is also a category for hacks which I was unsure what platforms they would work on. I need help going through and recategorising the pages in the Platform Unknown category.
I have also done some work on the Request Hacks page. New hack requests should now be added to the top section ‘Undiscussed Requests’. After the community has posted some feedback it gets moved to under the ‘Discussed Requests’ heading. Requests which have been solved (ie, had hacks created for them) move to the Solved Requests page.
The Wiki benefits both hackers (easier to find our hacks, find other’s hacks, and get ideas for hacks from the requests page) and the general people (find hacks so much easier!) I would really like to keep it up-to-date and maintained 🙂