Singpolyma

Archive of "Hacks"

Archive for the "Hacks" Category

Last Updated Posts

Posted on

Aditya of The Last Word has made a very useful discovery — the new Blogger RSS feeds are ordered by last update! This means that when you make an edit on an old post, that post is moved to the top of your RSS feed! The use for this immidiately becomes apparent : a widget for showing which posts have been updated recently!

Based off of a quick hack Aditya threw together I have developed some reuseable code to just this end. I have it running asynchronously in my sidebar under the ‘Previous Posts’ heading. When you first load the page (or if you have JavaScript turned off) the normal Blogger-generated ‘Previous Posts’ list is displayed. After the page has loaded, if you have JavaScript on, the list will update to a list of the most recently updated posts.

So, on to the code! There are two versions of this hack : synchronous and asynchronous. If you want it to run synchronously (that is, the page waits for the hack to finish before it continues to render) place the following code where you want the widget to appear:

<script type=”text/javascript” src=”http://jscripts.ning.com/get.php?xn_auth=no&amp;id=1317016;
<script type=”text/javascript”>
//<![CDATA[
do_updated_posts(‘<$BlogURL$>’,”,5);
//]]>
</script>

You can change the 5 to whatever number of posts you want in the list. Save and republish : you’re done!

If you want it to run asynchronously (the page loads before the hack does), insert the following code into your <head> section:

<script type=”text/javascript” src=”http://jscripts.ning.com/get.php?xn_auth=no&amp;id=1317016;
<script type=”text/javascript”>
//<![CDATA[
addLoadEvent(function(){do_updated_posts(‘<$BlogURL$>’,’last_updated_posts’,5);});
//]]>
</script>

Again, you can change the 5 to whatever number of posts you want in the list. Then, insert the following code where you want the list to display:

<div id=”last_updated_posts”><i>Loading…</i></div>

Save and republish. You’re done!

The whole way this works may just be a bug in the rss.xml generating engine. If it is, this hack will stop working when they fix it, since it is dependant on the order of items in rss.xml.

Tags:

Asyncronous Archives

Posted on

This hack combines two popular archive hacks with a new functionality in the same script. The two popular hacks included are the displaying of archive post counts in the archive list, and the re-ordering of the archive list. These two can be applied using the script with or without the third, new, functionality with is asyncronous loading of archives into the sidebar. If you don’t know what that means, try it out in my sidebar. Select an archive from the drop-down and notice that instead of being taken to the archive page, the posts in that archive are listed for you right in the sidebar. The steps to implement either part of this hack follow:

  1. Edit your blog template and add the following code directly after the <body> tag:
    <ArchivePage>
    <!– START ARCHIVE XOXO –>
    <ul class=”xoxo posts” style=”display:none;”>
    <Blogger><li><a href=”<$BlogItemPermalinkUrl$>”><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></li></Blogger>
    </ul>
    <!– END ARCHIVE XOXO –>
    </ArchivePage>

    Note: if you have your blog marked up using hAtom or the XOXO Blog Format this step is unnecessary.

  2. Add the following code into your sidebar where you want the archive list to display:
    <div id=”archive_list”><i>Loading Archives…</i></div>
    <div id=”archive_display”></div>
    <noscript>
    <ul class=”archive-list”><BloggerArchives>
    <li><a href=”<$BlogArchiveURL$>”><$BlogArchiveName$></a></li>
    </BloggerArchives></ul>
    </noscript>

    Note to advanced users. The noscript section is necessary. You can edit it, but only if you pass two additional parameters to the function in the next step containing the code starting the list and ending the list.

  3. Add the following code into your <head> section:
    <script type=”text/javascript” src=”http://jscripts.ning.com/get.php?xn_auth=no&amp;id=1286814;
    <script type=”text/javascript”>
    //<![CDATA[
    addLoadEvent(function(){get_archive_list(‘archive_list’,’archive_display’,’format‘,sort);});
    //]]>
    </script>

    Where format is drop if you want a drop-down archive list or list if you want the archives displayed in an unordered list. sort is true to sort the archive list oldest-to-newest and false to sort newest-to-oldest.

    If you want the archive list to link to the archive pages instead of loading in the sidebar then delete the archive_display text from the code above.

  4. Save your template and republish your blog.

Advanced users may be interested in the information on the scripts behind this.

Tags:

Trackback Inside Blogger

Posted on

It is reccomended that you use the new del.icio.us, pinging, AND trackback script. This one may still work, but I no longer actively support it.

Blogger has no native trackback capabilities. While trackback is a wonderful tool, it can sometimes just be too much of a pain for Blogger users. After all, you just went to the work of writing a wonderful post, who wants to bother making a hop over to Haloscan afterwards to send trackbacks to others? With the advent of the semi-automatic Backlinks we seem to be ever less inclined to make the extra hop.

Now, the extra hop can be a thing of the past. Install the Blogger Trackback Userscript and get trackback functionality directly from your Blogger dashboard! Every time you publish a post, the script harvests the title, permalink, and post excerpt (as well as blog title) and then displays a form on the ‘post complete’ page for trackbacks. Enter the trackback URLs one at a time and hit enter. The trackbacks will be completed AJAXially.

Much thanks to Johan’s Blogger del.icio.us helper script which facilitated much of the code for this script.

Possible Future Features

  1. Support for autodiscovery trackback RDF so that one can enter simply the post URL for a trackback and not have to use the full trackback URL
  2. Optionally try auto-trackbacking to all posts linked to from the post
Tags:

Comment Photos and Highlighting

Posted on

PurpleMoggy has created a set of instructions for using this on Blogger BETA. I have updated my hack to support his new features and fix the bugs he found. There is also now a new ‘no image’ image.

Awhile back I wrote a post detailing my hack for adding profile photos to comments. Unfortunately that post was rather technical in its explanation. This post attempts to deal with adding the hack to your blog in a more user-friendly fashion and also with using the hack to highlight blog-contributor comments.

Step 1 – The first thing you need to do is find the comment section in your blog template. Edit your template and scroll down until you find the <BlogItemComments> tag. The code inside should look something like this:

<div class=”comment-poster” id=”c<$BlogCommentNumber$>”>
<a name=”c<$BlogCommentNumber$>”></a>
<$BlogCommentAuthor$> said…
</div>

<div class=”comment-body”>
<div class=”innerCmntBody”><$BlogCommentBody$></div>
</div>

<div class=”comment-timestamp”>
<a href=”#c<$BlogCommentNumber$>” title=”comment permalink”>4/26/2006 07:49:51 PM</a>
</div>

Step 2 – If you plan to use comment highlighting (so that the comments made by blog authors look different from those of users) this must be wrapped in another tag so that all of the code for each comment is in one tag. Like so:

<div class=”commentelem”>

<div class=”comment-poster” id=”c<$BlogCommentNumber$>”>
<a name=”c<$BlogCommentNumber$>”></a>
<$BlogCommentAuthor$> said…
</div>

<div class=”comment-body”>
<div class=”innerCmntBody”><$BlogCommentBody$></div>
</div>

<div class=”comment-timestamp”>
<a href=”#c<$BlogCommentNumber$>” title=”comment permalink”>4/26/2006 07:49:51 PM</a>
</div>

</div>

Some blog templates will already have a tag around their comments, as will those using the ‘standard’ comment markup. If you have one of those templates just write down the class of the wrapping tag or add one (the underlined section above).

Step 3 – Next we need the class of the element where we can look for the link to the author. In the example code above this would be comment-poster. When in doubt use the class of the overall wrapping tag. Once you have it, write it down. Count the number of <a> tags there are before the <$BlogCommentAuthor$> tag and write this number down (in the above example it is 1).

Step 4 – The only thing left to do in this part of the code is to insert the element where the profile photo will go. Add this code right before the <$BlogCommentBody$> tag: <div class=”commentphoto”></div>

Step 5 – Now go to the <head> section of your blog and add the following code:

<script type=”text/javascript” src=”http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605;
<script type=”text/javascript”>
//<![CDATA[
function thisblog_showCommentPhotos() {showCommentPhotos(‘commentphoto’,’class of author wrapper‘,# of a tags,’main wrapper class‘,'<$BlogURL$>’,’highlighted text colour‘,’highlighted text background‘;}
addLoadEvent(thisblog_showCommentPhotos);});
//]]>
</script>

Where class of author wrapper is the class you wrote down in step 3, the # of a tags is the number you wrote down in step 3, and the main wrapper class is the class you wrote down in step 2. If you are not going to use comment highlighting the last for parameters can be left off (from main wrapper class to highlighted tex background) otherwise you have to fill in the color you with the text and background of highlighted comments to be in their appropriate spots above.

Step 6 – Save and Republish!

Tags:

Profile Photos With Comments

Posted on

Blogger does not provide a template tag for displaying the profile pictures of commentors in your blog template. Johan Sundström had created a way around this using an IFrame, but I found that solution to be somewhat buggy, even on his own blog. I have modified some of his code and added some of my own to create what I feel is a cleaner hack. I have bundled the majority of the JavaScript into a JScripts entry and it also uses a script I wrote to scrape Blogger profiles to JSON(P) [example]. The code to include the hack into your template is surprisingly simple:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605 </script>
<script type="text/javascript">
//<![CDATA[
addLoadEvent(function(){showCommentPhotos(‘class of elements to put photos in‘,’class of elements where links to authors can be found‘,number of <a> tags before the link to the author (0 if none));});
//]]>
</script>

You will need to add a <div> or other tag (with the class you pass in first) to the comment section, and style it so that the images show up the way you want. The second class you pass is the element containing the link to the comment author, you must add a class to this element if one does not exist. The third parameter is the number of <a> elements in this element before the link to the author. The script runs after page load and should thus have no adverse affects on initial load times.

Tags: