Singpolyma

Technical Blog

Archive for the "Tech" Category

Moved to New Blogger

Posted on

Hello! I’m on the new Blogger! Finally! Can you see the difference? It isn’t major to the eye, but man does this backend feel nice to finally work with for real!

New Tools and XOXO Blog Activity

Posted on

After a long period of inactivity I have revived the former XOXO Blog as XOXO – A Semantic Weblog. The following new tools have been announced:

There is also a discussion of distributed social netoworking and a new WordPress plugin to start implementing the idea.

Del.icio.us / Trackback Script Updated

Posted on

I have made some minor bug fixes to the del.icio.us, pinging, and trackback script for the new Blogger. It also now saves trackback URLs when you save a draft.

Tags:

New Singpolyma Templates

Posted on

I have added variants to my Singpolyma Templates for my new asynchronous peek-a-boo comments.

Tags:

Asynchronous Peek-a-boo Comments

Posted on

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.

  1. Go to the layout on your BETA blog and select ‘Edit HTML’.
  2. Check the ‘Expand Widget Templates’ box.
  3. 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&amp;id=2941927' type='text/javascript'/>
  4. 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>
  5. 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>
  6. 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>
  7. 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).
  8. 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.