Blogger Javascript Hack

This weekend I came up with a script that would allow you to have the post title in your HaloScan window and also have the Next and Previous post links on the Item Pages.

IF YOUR CODE HAS STOPPED WORKING, IT’S BECAUSE I’VE MOVED A FILE, PLEASE MODIFY YOUR TEMPLATE AS PER STEP 4

Now it’s a bit tricky, and a bit messy, but here’s how to do it.
Note, you will need a remote file hosting system!

Step 1.
In the Blogger settings, on the Formatting page make a note of every setting.
Then change Show to 999 Posts, and Timestamp Format to a date output setting (I choose Sunday, January 02, 2005).
Hit Save Settings, but do not Republish your blog.

Step 2.
In the Template page, copy your template in to a text editor like Notepad, and save it. The replace the whole template with

var blogger = new Array;
<blogger>blogger[‘<$BlogItemNumber$>’] = Array(“<$BlogItemTitle$>”, “<$BlogItemPermalinkURL$>”, “<$BlogItemDateTime$>”);
</blogger>

Then hit Preview.
In the Preview window, view the page source, select all the text and copy it in to a text editor. You will need to remove everything above:

var blogger = new Array;

and also

</body>
</html>

from the bottom.
Save it as post_data.js and upload it to your file space.

Step 3.
Restore all your settings.

Step 4.
In your blogger template add the following lines between the head tags

<script type=”text/javascript” src=
“http://WWW.YOURWEBSITE.COM/post_data.js”> </script>
<script type=”text/javascript” src=
“http://blog.artesea.co.uk/js/previous_next_post.js”> </script>

With WWW.YOURWEBSITE.COM the location where you uploaded the post_data.js file.

Then you can add the following lines, where best suited (although they must be between the <Blogger> tags).

<ItemPage>
<script type=”text/javascript”>
var BlogItemNumber = ‘<$BlogItemNumber$>’;
var previousArray = previousPost(blogger, BlogItemNumber);
if(previousArray[0] == ”) document.write(‘&lt;&lt; Previous | ‘);
else document.write(‘<a href=”‘ + previousArray[1] + ‘” title=”‘ + previousArray[0] + ‘ (‘ + previousArray[2] + ‘)”>&lt;&lt; Previous</a> | ‘);
</script>
<a href=”<$BlogURL$>” title=”Home”>Home</a>
<script type=”text/javascript”>
var nextArray = nextPost(blogger, BlogItemNumber);
if(nextArray [0] == ”) document.write(‘ | Next &gt;&gt;’);
else document.write(‘ | <a href=”‘ + nextArray[1] + ‘” title=”‘ + nextArray[0] + ‘ (‘ + nextArray[2] + ‘)”>Next &gt;&gt;</a> ‘);
</script>
</ItemPage>

You’ll then need to save your template, and republish the whole blog.

Step 5.
If you use HaloScan, and are a Premium Member you can add these two lines of code to your HTML Template.
Between the HEAD tags add:

<script type=”text/javascript” src=”http://WWW.YOURWEBSITE.COM/post_data.js”> </script>

And where you want the title of the post to appear add:

<script type=”text/javascript”>document.write(‘<br /><a href=”‘ + blogger[‘{HSPageID}’][1] + ‘”>’ + blogger[‘{HSPageID}’][0] + ‘</a>’); </script>

Hopefully it should all work after these steps, if you have any problems, leave a comment. The only problem is that you’ll need to generate the javascript code after every post, and that you’re limited to only 999 posts.

8 thoughts on “Blogger Javascript Hack

  1. Alternatively, instead of changing the template each time, looking at the preview, copying the code etc, you could just manual type the new posts in yourself.
    Just make sure that new posts go to the top.

  2. I’m trying to use javascipt (a ready made little program) in blogger and I’m having lots of problems. I’m not really a programmer but found your blog while doing a search. Do you know of any forums or discussion groups for blogger/javascript? thanks

  3. I thank you a lot for posting such a simple script.. This is exaclty what I had been seeking for sometime.. Being a non-techie I could not code it myself 😛

    As my thanks.. I have circulated this link to my friend’s circle and clicked on some of your goog.le.ads. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Human test: Enter Ryan backwards