-
-
2006-12-23
Hacks by Others- body
-
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.
- ...has a wicked table of contents widget for your blog!
- ...Google AJAX using their API instead of YubNub.
Hackosphere (Ramani)- Neo template. Maxtrix-cool, fast, Web 2.0 extravaganza. And he's selling it! (You money-maker you... ;) )
- Instructions for the new Blogger for my Comment Photos and Highlighting hack.
- Display related posts by tag. Kind of like FreshTags.
- Premade templates that let the user switch the colour scheme.
- Nice styles for your blockquotes.
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 ;)
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
Blogger Hacks Wiki Update
- body
-
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 :)
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
Peek-a-boo and Scrolling
- body
-
With some more inspiration from this man, and some help from this post I have created alternate versions of my peek-a-boo links lists and peek-a-boo HTML widgets. These ones, when expanded, are a 200-pixel-high box with a scrollbar. For those extra-long lists ;)
Link List (Click Title to Expand)
Note about installation : if you put this code into your template more than once at a time (for multiple lists) you must change the id='ALIST' (bold in the code) to id='BLIST' on the second list, etc. This code should go inside the section for your sidebar. Then, after saving, go to 'Page Elements' to customise its contents.
<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;height:200px;overflow:auto;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Link List (Click [+/-] to Expand)
Note about installation : if you put this code into your template more than once at a time (for multiple lists) you must change the id='ALIST' (bold in the code) to id='BLIST' on the second list, etc. This code should go inside the section for your sidebar. Then, after saving, go to 'Page Elements' to customise its contents.
<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">[+/-]<\/a>');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;overflow:auto;height:200px;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
HTML (Click Title to Expand)
HTML (Click [+/-] to Expand)
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
2006-12-21
Singpolyma Templates for new Blogger- body
-
Now having translated most of my hacks to the new Blogger, it is time to unveil the templates. I myself will likely be switching soon, and my template will be based on the code here published. The features are similar to the first set, but optomised for the new Blogger.
To install one of these templates, just cut-n-paste the code into the 'Edit HTML' section of your blog and save. Confirm deletion of widgets (Yes, unfortunately, you lose you widgets. You can make them again).
Templates- Basic template - all the basic features of the original set, including peek-a-boo comments and backlinks.
- Comment Form - based on basic, my lightbox comment form added in.
- Comment Photos and Highlighting - based on basic, my comment photos and highlighting hack (as translated by PurpleMoggy) added in.
- Basic Asynchronous - Same as basic but with asynchronous peek-a-boo comments.
- Comment Form Asynchronous - Same as comment form but with asynchronous peek-a-boo comments.
- Comment Photos and Highlighting Asynchronous - Same as comment photos and highlighting but with asynchronous peek-a-boo comments.
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
Update : Peek-a-boo Comments
- body
-
I have updated my Peek-a-boo Comments for new Blogger hack to include some bug fixes, the use of an external script (for performance and readability), and comment author links.
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
For New Blogger : Blogger del.icio.us categorising, pinging, and trackback helper
- body
-
I have made some minor bug fixes to this script, as well as made it so that it saves the trackback URLs when you save a draft.
Some time ago I married Johan's del.icio.us and pinging script with my own trackback script into one new script. That script does not work on the new version of Blogger, and the trackback feature has been glitchy for some time. Outgoing trackback is still something we need on the new version of Blogger, and the pinging services provided by this script might even be useful on other blogging services. Del.icio.us posting? Now that we have labels? Well, Freshtags, my calendar widget, and just tag management in general, will work better if you use del.icio.us. If you disagree, this part of the script is optional.
This script does not overwrite the old script. Running both simultaneously will look dumb on the Blogger Classic interface (there will be duplication), but will not break anything. If you only run on the new Blogger, please remove the old script (if you have it installed).
Install the new script
Userscripts.org entry
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
Peek-a-boo HTML Widgets
- body
-
There was a minor styling error in this hack -- I have fixed it now :)
This hack was inspired by a comment on my peek-a-boo link lists hack. It is a one-click install hack of a special HTML widget to your blog. Edit the template and content of the widget to be whatever you want (such as JavaScript includes for external blogrolls). The widget will appear either with just a title, or with '[+/-] TITLE'. Clicking the title (or [+/-], depending on the version you choose) will display all of the HTML/JavaScript contents.
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
2006-12-20
Die index.html!- body
-
It has annoyed me for some time that the default 'Home' links on the new Blogger (which I will continue to call Blogger BETA, at least for today, don't worry, I know that's officially wrong) go to /index.html. Some internal links ('View Blog' from the dashboard) do not, which is worse. Why have a URL longer than it need be? Why have multiple URLs available that people can bookmark? Doesn't that just confuse things.
This hack is very simple and fixes the problem.
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
Comment Forms and Blogger BETA
- body
-
The old inline comment form is dead to Blogger BETA (or, should I say, the new Blogger). Deader than ever, the form now does absolutely nothing.
Have no fear -- there is good news!
Since we must use Blogger's ugly comment page in some form (because of their new security token system), I wanted to include this in our pages somehow. I thought of making it inline, but discarded this idea because it would look rather dumb (since we can't style that page) and would be displaying comments twice on the page, etc.
Enter lightbox. The following hack gives you a nice, integrated comment form that still appears somewhat separated (so visitors know you didn't create that ugliness!). Visitors can close the 'popup' without commenting, but if they comment it will close and reload the page automatically. (See a demo on my test blog, but I can't guarantee it will be there forever. My test blog is for testing and is therefore unpredictable.)
To install the hack, follow these steps:- Go to the 'Template' tab and select 'Edit HTML'.
- Check the 'Expand Widget Templates' box.
- Add this code right before your </head> tag (if you have my calendar hack, or any other Lightbox Gone Wild for Blogger hack, installed, this step in unnecessary):
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=1093361' type='text/javascript'/>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2655847' type='text/javascript'/>
<link href='http://singpolyma.googlepages.com/lightbox.css' rel='stylesheet' type='text/css'/> - Find this code:
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
and replace it with this:
<a class='lbOn' expr:href='"#comment-form-" + data:post.id'><data:postCommentMsg/></a> - If you do not use peek-a-boo comments or have a footer link pointing to the inline comments section (if you don't know, you don't) then find this code:
<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 this:
<b:if cond='data:post.allowComments'>
<a class='comment-link lbOn' expr:href='"#comment-form-" + data:post.id'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if> - Find this code:
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
And directly after it put this code:
<script type='text/javascript'>
var isLoad<data:post.id/> = 0;
function checkDeactivate<data:post.id/>() {
if(isLoad<data:post.id/> > 1) {
//<![CDATA[
document.getElementById('lbContent').innerHTML = '<div style="text-align:center;width:100%;font-size:16pt;font-family:sans-serif;"><br /><br /><br />Reloading...</div>';
//]]>
window.location.reload();
}//end if isLoad
isLoad<data:post.id/>++;
}//end function checkDeactivate
</script>
<div expr:id='"comment-form-" + data:post.id' style='display:none;'>
<iframe expr:onload='"checkDeactivate" + data:post.id + "();"' expr:src='data:post.addCommentUrl + "&amp;isPopup=true#commentForm"' frameborder='0' style='border-width:0px;width:100%;height:380px;'/>
<div style='text-align: right;'><a class='lbAction' href='#' rel='deactivate'><img alt='' src='http://www.ning.com/xnstatic/icn/cross.gif' style='display: inline; width: 10px; height: 10px;'/> Close</a></div>
</div> - Save your template
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
New(?) Splog Format
- body
-
I discovered a new-to-me Splog format today. See these search results? See the acne scar removal articles? These Splogs are rel=nofollow linking to me with my name in order to make their SPAM show up in other's search results... that's low...
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
2006-12-19
Blogger Calendar- body
-
If you don't use del.icio.us and want more posts showing up in your calendar try appending ?max-results=999 to your feed URL. So it will look like:
http://yourblog.blogspot.com/feeds/posts/full?max-results=999
So you're not satisfied with just an archive list? You've perhaps switched to BETA and even the hierarchal menu just isn't cool enough? Well, you've come to the right place.
This hack allows you to generate a calendar of your posts for people to browse inline in your blog! This hack works with either Blogger Classic or Blogger BETA and, best of all, is one of my easiest hacks to install yet!
Just go to the setup page. Enter your feed URL (do NOT use a FeedBurner feed, it tends to mess things up) and your blog title. Click generate. Follow the instructions.
Now, if you use mine (click the calendar next to the archives box in my sidebar) you'll note that I have posts in the calendar going all the way back to forever it seems. Your probably only has this month's. Well, that is just one extra hack, but there's a catch -- you have to be one of those who posts all blog entries to del.icio.us (I know, the BETA people no longer have a GM for that, I'm working on it.)
Go to the full del.icio.us feed setup page (I won't steal your password!), enter your del.icio.us username and password in the upper form. Click Go. Go back to the setup page. Enter your username (and optional anchor tag) in the lower form. Click Go. Use the contents of your address bar as your feed URL for the calendar instead of your normal feed.
A translation of this page exists. Not sure on the language of that page, but thought I'd give them a link.
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
Lightbox Gone Wild for Blogger
- body
-
Lightbox Gone Wild is a JavaScript tool used to overlay other pages on the current page using AJAX. It looks nice and is really user-friendly. One problem : we on Blogger cannot create a static HTML page on the same domain to be included via AJAX.
So I have modified the code slightly. My version will include snippets from your local page instead. Just include these lines in your <head> section:
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=1093361"></script>
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=2655847"></script>
<link rel="stylesheet" type="text/css" href="http://singpolyma.googlepages.com/lightbox.css" />
Then, insert the HTML you want to be displayed in the lightbox like so:
<div id="lightbox-id" style="display:none;">
HTML HERE
</div>
Make sure you have a link similar to this in the code to be inserted so that the lightbox can be closed again:
<a href="#" class="lbAction" rel="deactivate">Close</a>
Then, insert a link to open the lightbox, like so:
<a class="lbOn" href="#lightbox-id">Open Lightbox</a>
To see an example, click the calendar icon next to the archives in my sidebar.
Not sure why I'm linking to translations today. I usually don't. They show up in the backlinks, and saying in English 'here's a translation' doesn't make loads of sense. They deserve a link though. A translation of this post.
© 2006 Stephen Paul Weber. Some Rights Reserved.
-
BloggerBubble
- body
-
Andrés Santos wrote a nice hack for Blogger that used Websnapr to display pop-up thumbnails of links in your blog posts. Just install one line of code and you're good to go.
Problem : It didn't work with my Blogger template.
And so I did what I often do -- hacked his hack! If his code won't work for you, insert this code just before the </head> tag in your template instead:
<script src="http://jscripts.ning.com/get.php?xn_auth=no&id=2654582" type="text/javascript"></script>
This should work with most Blogger templates (write me if it won't with yours and I'll update it). Also, it will work with any hAtom-based template.
JScripts Entry
© 2006 Stephen Paul Weber. Some Rights Reserved.
Close
Syndication
FreshTags
Recent Comments
Post CalendarArchives
-
►
2007
(21)
-
►
January
(17)
- JScripts Gets Some Love
- OpenID as True Single Signon
- Template Conversion 'Wizard'
- Table for Converting Blogger Classic to New Blogge...
- Lightbox Comment Form Update
- New Stuff on Ning
- The Bleet
- Static Pages in Blogger
- Microsummaries in Blogger
- hAtom in the New Blogger
- Moved to New Blogger
- New Tools and XOXO Blog Activity
- Del.icio.us / Trackback Script Updated
- New Singpolyma Templates
- Asynchronous Peek-a-boo Comments
- Peek-a-boo Widgets
- hCard Profile Generator
-
►
January
(17)
![[feed]](http://photos1.blogger.com/blogger/6537/1341/1600/xml.png)
