Singpolyma

Archive of "Blogger"

Archive for the "Blogger" Category

hCard Profile Generator

Posted on

Users on the New Blogger may be pleased to discover there is a nice third-party tool for generating a profile section that is hCard-compatible!

Tags:

Blogger and hAtom

Posted on

Please note that no template is ever 100% hAtom compatible on Blogger. There are those that come really close, but datetime-design-pattern dates cannot be generated on Blogger and thus the ‘updated’ field is always invalid.

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.

Peek-a-boo Widgets

Posted on

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

Tags:

hCard Profile Generator

Posted on

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!

Tags: