Sunday, October 8, 2006

Blog Navigation: Top of Page and Top of Post

This hack adds two new links to the footer of your post. One link to the top of the page, and one to the top of the post.

Implementing this hack is easy if you follow the next steps.

Step 1: Backup your template by downloading it and saving it to your harddisk.

Step 2: Edit the HTML of your template, and expand the widgets.

Step 3: Find the post includable, and add the code to it that is highlighted in red:


<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id' >

 
If you are using the Peek-A-Boo hack, this code is already there.

Step 4: Scroll down to the code-lines for the post-footer. Just below the code for the quick-edit icon, insert this code:

<!-- to top of page and top of blog -->
<a href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top of Page</a>
<a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);' title='Scroll to top of post'>Top of Post</a>


Save the template and you are done.