Blogger Hacks, Categories, Tips & Tricks

Wednesday, August 10, 2005
Blogger Hacks - The Series
Update July 2006: In order to better illustrate the subtle differences between some of these hacks, the contents of this list has been migrated to the BloggerHacks Wiki. To view all hacks in the wiki, visit the Category: Hacks page, where you'll see a list of all wiki content that has been categorised as a hack. New content submitted to Freshblog will be written up and added there. This list will not be updated going forward. Please visit the wiki to get a better handle on these hacks. For more information, read my post introducing the wiki.

Please continue to leave your comments here alerting me to your great hacks, and by all means add your hack or mod to the wiki. Thanks!!
_______
Original Post:

A master-list of all the blogger hacks that I'm aware of, updated frequently to reflect the latest in blogger hackology. If the instructions or implementation on a hack that appeals to you is unclear, please e-mail & I'll try to help.

If there's no credit next to the link, the hack is one that I wrote. If there's a credit, you'll be taken to the blog of the hack-author to enjoy their creative modifications to blogger.

If you have a hack to contribute, either leave a comment, send me a trackback, or e-mail me.
  • FreshTags: Context Sensitive Category Menus for your Sidebar:
    1. FreshTags: A context-sensitive sidebar display of your tagged content.
    2. FreshTags for Wordpress, from Singpolyma Technical Blog.
  • Del.icio.us Categories using Firefox & Greasemonkey:
    1. Categories using Greasemonkey: Basic Script to add tags to your posts.
    2. Greasemonkey Script v2. with added options for styling, and tags that return to the "tag entry" field when you open a post to edit it. By Browservulsel
    3. Greasemonkey Script v3. Post to del.icio.us from inside your blogger account, and auto-populate the del.icio.us submission form with your tags. By Ecmanaut See also revised Freshblog How-to
  • Categories using Javascript:
    1. In-Blog Categories using .js - See Marc Morales, and later posts that describe the evolution of the system. In fact, hit up his October Archives and read back as far as the 23rd. All good stuff.
    2. In-Blog Categories using .js, with integrated in-post search results. From Pappmaskin Diare Techblog, explored and explained further by Gretchen at YLCF
    3. In-Blog Categories using .js. Take the feed for each del.icio.us tag, turn it into a script, & publish the script in a pre-dated post on your blog. From Naked Sex Monkey
    4. Del.icio.us2Blogger In-Blog Categories using .js. In-post search results in a single dynamic post - from Phydeaux3. Original Version: Comprehensive 3-part how-to. Part 1, Part 2, Part 3. See also the how-to for the Tag Cloud
    5. Labelr, by Amit Upadhay. Integrated and easy categories using .js
    6. Collapsible Sidebar display for categories - from 3Spots
    7. Asynchronous Blogger Categories - by Aditya
  • Categories using Google Blog Search:
    1. Categories using Google Blog Search - from Orangewise
    2. Categories using Google Blog Search & keywords in your post titles, from NetCF2.0
    3. Categories using Google Blog Search & Technorati tags as your keywords, from Skeptic Rant
    4. Categories using Google Blog Search, with a .js sidebar menu, by Taher.
  • Manual Categories:
    1. Categories without bookmarking - from Virtual Scratchpad
    2. Manual Categories - Manually add your permalinks to a master-list post for each category. From Theatre of Noise.
    3. Manual Categories with slick expand & contract sidebar menus - from A Consuming Experience.
    4. Manual Categories using a second blog - from Rangga
  • Other Category Methods:
    1. Categories using multiple blogs - from OldCola
    2. Categories for self-hosted Blogger Blogs, using PHP - by Moshare
  • Apply Stylesheets to your Blog:
    1. Print View for your Content using CSS - from You've Been Haacked
    2. Print View w/ possibilities for "stylesheet switcher" - from Aditya
  • Search Your Blog:
    1. Native Blog Search - Pull Google Blogsearch results into your sidebar - by Aditya
    2. Ajaxified Google Blogsearch - by CJ Millisock
    3. Search for Related Posts on the Create Post Page w/ Greasemonkey - by Aditya
  • Comment Submission Hacks:
    1. In-post comment form, Cocomment Compatible - from Singpolyma
    2. In-line comments with images / icons - from Ecmanaut
    3. In-line comments with images, quicktags & live preview - from Basang Panagini
    4. In-line comments (download zipped as RAR file) - from Azer Koculu
  • Comment Formatting Hacks:
    1. Highlight Author / Owner Comments - from Aditya
    2. Highlight Owner, w/ Profile Pics - from Singpolyma
    3. Grammatically Correct Comment Count - by Aditya
  • Hacks to backup your Blog:
    1. Backup your last 100 posts using your feed - from Ecmanaut
  • Nav-bar Hacks:
  1. Use CSS to hide the Navbar - from Blogger Templates. I interpret this as a TOS violation & don't recommend it.
  2. Comment out the navbar - from Tygar-blog. Ditto.
  3. Customise the color of the navbar so that it works with your template - from blogkardesligi
  4. Build the nav-bar into your template- From Saady (see his comments for how-to)
  5. Show / Hide the Navbar with Hover-over - from Bloggeratto
  • Other Hack Collections:
    1. 3 consecutive posts w/ multiple hacks - from Witfits. 1,2,3
    2. Spicing it Up from Saady (templates, tagboards, counters, & a cool nav-bar hack.)
    3. List of hacks from Sushi-Delight.
    4. Dave Goodman's List of Blogger Hacks
I'll take all the input I can get, so please dive in to the comments and trackback to link to other relevant material. Let's turn this post into a one-stop shop for blogger mods!!

Posted at 5:50 PM by John.
76 Comments:
<    >
Blogger Id.Ology said...
John, This is a much-long-anticipated act from your. Put all your blogspot works in one collection. Single word can't be a intriguing ideaology, but the collection of thoughtful words in the volumes of books can be the creative force for generations to come. Blogger should be lucky cause they can start blogging freely in the powerful technology of your works!
organize scattered thoughs and make it philosophy!

<    >
Blogger plush said...
hi! i'm working on a hack, to change the navbar colors and validate it. it looks primitive but maybe we can upgrade it or throw it away hehe.

here is a handy link to hack.

<    >
Blogger Scott said...
Thanks for the posting. I'd figured out the same thing myself and was planning a similar post, but now I'll just link to yours.

Another Blogger Hack suggestion that you might want to consider. If you have a list of links in your sidebar that you occasionally update (e.g. favorite posts on your blog, favorite links on the web), the blogger template makes you republish the entire site just to modify that list. You can get around that problem with the "object" tag. Another benefit is that you can put a longer list into a smaller space with a scrollbar.

Create a separate html document with your link list in it (use your blogger template as a starting point if you want it to look consistent). Post it somewhere public (like on your web server) and put a link to it inside the "object" tags.

Take a look at my blog for some examples. I use it for favorite outside links, favorite posts, and even a blogroll.

There are some caveats (like if the html document isn't in the same domain as your blog, Internet Explorer may have trouble). I plan to post a more detailed description at some point ... unless you get around to it first.

<    >
Blogger Scott said...

<    >
Blogger dunPanic said...
Hi John, I have a blogger hack myself I want to contribute. Nothing major, just a simple greasemonkey script to add a comment. It is hosted at userscripts.org at this link.

One addition comment: I cannot find instructions on your site on how to contribute new blogger hacks, is commenting here the way?

<    >
Blogger Singpolyma said...
hey :) there are a few ways to put a comment form directly on the post page (as it is with most non-blogger blogs, and my preferred method) one I use on my blog (http://singpolyma.blogspot.com/), but have not yet detailed for others to use. I believe there is also one on http://bloggerhacks.blogspot.com/ , but I'm not sure.

<    >
Blogger Johan Sundström said...
I'm still far from catching up with all my blogger hacks, but I've at least posted something on some of my earlier template mods already:
Adding calendar navigation to your Blogger template, Blogger "edit template" button user script, Blogger: writing proper plurals with CSS 2 and a (not strictly blogger-specific, but still useful) post on making transparent PNGs work in Internet Explorer too.

<    >
Blogger Johan Sundström said...
And today's article on how to add post comment faces to your inline post comment pages.

<    >
Blogger Tracy said...
Thank you, thank you, thank you.

THM
TreeHuggerMum

<    >
Blogger robin said...
Thanks for linking to my article on category pages and for the comments on my site. All of this back-and-forth commenting between us has inspired me further.

This time I took on the task of improving Farrago Recent Comments. I am happy with the results: the code is more readable, self-contained, commented, supports other date formats, etc.

Hmmm... what's next I wonder? I'm actually quite happy with the functionality of Blogger at this point.

<    >
Blogger John said...
a hack to create an alphabetized index of entries for the main page or achive pages on blogger.

Could be useful for review blogs, or other blogs, where the title of the entry is more important than the date it was posted on.

<    >
Blogger John said...
I had a thought...and I might be able to figure out how to code it...but someone else might be quicker, or know whether or not it is even a rational idea. My javascript knowledge is pretty weak.

What if at the top of the blogger template one defined a string = BlogItemTitle with the first (or last) X characters truncated. And that string were used in place of BlogItemTitle everywhere else. Then one could put category names in the first (or last) X characters of every title, and they would be invisible for everyone, but could be used for sorting. Would this work?

<    >
Blogger Ayub said...
The solution given by me is not a hack. Its working fine for all my blogs. So I decided to publish it so that people can use it.

<    >
Blogger James said...
Just a quick thanks for this page.

<    >
Anonymous dreamflow said...
I've added:

Live preview and quicktags for my inline comments form

<    >
Anonymous ayub said...
After visiting many weblogs in search of a perfect category that remains in the same blog (not outside links), I found this entry http://consumingexperience.blogspot.com/2006/01/how-to-include-categories-for-your.html which works with a specific template. The page remains same and the purpose also gets solved. Please check and analyse this. Thank you

<    >
Blogger itrelated said...
nice hack, ill try it sometimes.

<    >
Anonymous Linuxct said...
Cool hacks!

<    >
Blogger Amit said...
John, you may want to add this to this list. :-)

<    >
Anonymous singpolyma said...
My inline comments form hack has moved to http://singpolyma-tech.blogspot.com/2006/01/new-inline-comments-form.html
and I also have a backlinks hack here: http://singpolyma-tech.blogspot.com/2006/01/new-backlinks-hack.html

<    >
Blogger John said...
Stephen,

Links updated. Thanks for the heads-up!!

<    >
Blogger The Light-House. said...
The hacks are always cool and i have adopted some of them.
Blogger help offer two soultions for expandable post.
1. Show Hide http://help.blogger.com/bin/answer.py?answer=897

2.Expandable summaries.
http://help.blogger.com/bin/answer.py?answer=898
I wonder if u could combine the two so that we have some part of the summary then a link of javascript for rest of the post?

<    >
Blogger Ariel said...
Hey John, I don't suppose you could post an explanation of the "Highlight author/owner comments" hack here on Freshblog? As a non-techie, I've managed to utilize a lot of the hacks here, but this one has thrown me for a loop.

Love the blog.

<    >
Blogger Sigsputnik said...
very useful stuff - i could hack my blog all day with this gear! and i probably will!

http://myminitruck.blogspot.com/

<    >
Anonymous andrew said...
can i ask if it is possible to display only one to two posts in your blog? if it is, how can i do it?

thanks!

<    >
Blogger John said...
Andrew,

Sign in to blogger, & select change settings > formatting. At the top of the formatting page is a section titled "show."

To show 2 posts on the main page, change the dropdown over from days to posts, & select 2 as the quantity.

Your recent posts list will still show the titles of the previous 10 posts. There will still be 1 post on the post page, and your archive pages will still show everything from the given month, but the main page will only show your 2 most recent posts....

Hope this helps....

<    >
Anonymous Matt said...
Here's one for the "Syndication & Feeds" section:

The Add to Any button.

It's basically all the feed readers' subscription buttons combined into one. Very useful.

http://www.addtoany.com/bloggers/

<    >
Blogger sleive said...
Hi, I've been looking around for a tiny hack that I've been trying to figure out how to do. It's a bit of an anal detail, but I'd like the "comment(s)" (or, in my case, thought(s)) to reflect, grammatically, the number of comments I have. So 0 thoughts, 1 thought, 2 thoughts...

How do I add that 's' for when blogcommentnumber != 1?

Much appreciated!

<    >
Blogger anniebluesky said...
You may be interested in adding this hack in your "Other site navigation' section. The end result is a 'current list of all previous posts' post with a link in the sidebar to that post. It uses del.icio.us, Firefox and Greasemonkey. You can read about it and see it in action at A del.icio.us way to make a previous post list.

<    >
Blogger audienceone said...
Here are two social bookmarking template to enable blogspot blogs to be bookmarked on social bookmarking sites.

Social Bookmarking on Blogger/Blogspot

This place is a good repository for blogger hacks. Consider adding this your list.

<    >
i got one for ya Windows Media Player for Listening to streamed music (SHOUTcast)

i'll email it to you leave your email address at http://dariuscole.blogspot.com

<    >
Blogger Efendi said...
hi ^^ i've always check your blog ^^

it contains a lots of information, especially for the beginner in the blog world :)

um.. and maybe you can add my page here: http://qureyoon.blogspot.com/2006/06/custom-view-using-blogger-tag_30.html

since i think it's usefull for some beginner :P (i'm a beginner too :P)

thank you ^^

*cheers* from indonesia c|_|

<    >
Anonymous Thom said...
Hi, I wrote this greasemonkey script that will let you get a comment feed for any blogger blog.

http://www.ts0.com/bloggercomments/

<    >
Blogger David Nicholson said...
Hi, I have designed a script that makes it very easy for Blogger users to categorise posts, it is described here.

<    >
Blogger Vince said...
I've created a hack to easily post encrypted text and be able to decrypt the text right inside the browser on the blog:
http://veenix.blogspot.com/2006/07/encrypted-blog-posts.html

<    >
Blogger Caramuel said...
I am using a little bit of javascript in order to manage nice dynamic categories in Blogger. I like the results so much, that I've decided to share it in categorize.blogspot.

I hope someone else will also find it useful.

<    >
Blogger anniebluesky said...
Previously I used the Peek-a-boo Comments which I really liked. Then, since I'm always trying different things, I applied these hacks, Correct comment count in Blogger and Tweaking permalink in Blogger .

Well, I want it all. But, I can't get all 3 codes to play together and get along. The worse that happened is it displayed weird naked code and the best senario I had 2 sets of comment links for each post...one for peek-a-boo and one that opens up the pop-up window. Can all three be merged into a nice neat bundle?

<    >
Blogger Greg said...
Hi anniebluesky,

Here's a thought: how about using Hearsay for each post.

Normally, Hearsay will grab and display comments from your whole blog (via your comments RSS feed).

But, using thom's awesome comments parser, you could set up a separate Hearsay for each post. Just point Hearsay at the parsed feed of each post on the page instead of your comments blog.

For example, you could put this in blog template where you want the comments listed out:


<div id="recent-comments-<$BlogItemNumber$>" ><center><br/><br/><br/>Please wait ... <BR/>loading comments.<BR/><BR/><img src="http://ghill.customer.netspace.net.au/snake_transparent.gif"/>
</center></div>
<script type="text/javascript">
comCount=10; comSize=0;
hearsay("http://www.ts0.com/bloggercomments/get.asp?blogID=xxxxxxx&postID=<$BlogItemNumber$>", "recent-comments-<$BlogItemNumber$>");
</script>


(Note that you'll need to include the header code and CSS as per the Hearsay instructions).

This will list out details of the recent comments for each post. It will work on the main page, archive page or post page. Since the comSize is set to zero, you won't get any of the actual comment. The comCount of ten means you'll get ten comments per post (set this to whatever works for you). You can use CSS to style the list as you see fit.

Not sure if this is 100% what you're after, but it might get the creative juices flowing!

<    >
Blogger Avi said...
JUST POSTED ANOTHER INLINE COMMENT FORM HACK. I WOULD NOT MAKE IT IF I KNEW THIS PAGE BEFORE. BUT IN THE END THE HACK GOT VERY GOOD.

Its here.

It is internationalizable, flexible easy to install (only including a JavaScript file in your template), and works very well integrated to Blogger comment capabilities.

<    >
Blogger anniebluesky said...
Greg, I have been busy, but will read your suggestions (ie study) later. I don't know yet what I'll end up using.

Thanks!!!

<    >
Anonymous Anonymous said...
hey :) there are a few ways to put a comment form directly on the post page (as it is with most non-blogger blogs, and my preferred method) one I use on my blog (http://singpolyma.blogspot.com/), but have not yet detailed for others to use. I believe there is also one on http://bloggerhacks.blogspot.com/ , but I'm not sure.
----------------------------------
my site:数据恢复

<    >
Anonymous Peter said...
Large photos in post causing the sidebar sliding to the bottom of the page is such a common problem that we frequently see people asking for help because of this on forums. Anyway, I have made a post How to put a wide image in a post without causing the sidebar sliding to the bottom of the page and I figure it is something useful for blogger to know.

<    >
Blogger Avatar said...
The Hovering Peek-A-Boo Blogger Navbar has been released for Blogger v3.0 and the pure CSS version option for Blogger v2.0 was also added:

Blogger v3.0 (the new Blogger)

v3.0

Blogger v2.0 (The Now Classic Blogger)

v2.0

<    >
Anonymous Anonymous said...
It seems the Farrago Recent Comments hack blog is now a porn site... Might want to remove your link to it...

<    >
Blogger hockney said...
Does anyone know a way or hack to pin a post so it will not be buried when more posts are added and it will stay as the first post ? I have searched all over and cannot find an answer either way.

<    >
Blogger John said...
This is a "sticky post"... To do this on Beta, see Blogger Tricks. For old blogger see A Consuming Experience

<    >
Blogger hockney said...
Thank you John, this is more helpful than u know and so easy. I appreciate it :)

<    >
Blogger Ahaa said...
It's cool man....very useful stuff, i apriciate that...

<    >
Blogger Techno Dude said...
Check out this comment hack

http://technojuice.blogspot.com/2007/08/launching-comment-box-widget-for.html

thnx
Shyam

<    >
Blogger Milan said...
Really nice summery of hacks. Even if being pretty savvy info searcher, i came to know couple of useful hacks.

<    >
Excellent blog. We will have to refer to it for our blog section to AddYourFavorites.com.

<    >
Anonymous baby said...
This is great. I wonder if any of this upsets Blogger.com? I know Wordpress seems quite happy for you to do whatever you want, but Blogger.com seems far less open-minded about these sorts of things. To be honest, I still prefer Wordpress anyway, simply because of it's functionality and basic style. The WYSIWG editor is better than Blogger as well, and the site just runs better all round in my opinion.

<    >
this is the best every trick and info i ever read.. TQ for sharing..

<    >
Anonymous HackBlog said...
well, someone have changed posts at blogger's bd, do you know something about?

<    >
Blogger Jack Bravo said...
Question - can't find the answer.

I'm using NEO for blogger. At the same time, i'd like my posts to be alphabetized after I click on the labels. Any idea or direction how to do that?

Thanks!

nternetmoney@gmail.com

<    >
Blogger Jae Baeli said...
I've tried the TOC widget i got online somewhere, and while it worked very well, it doesn't really solve my problem, and it makes my page load much slower. I removed it.

Initially, (and still) I wanted to REPLACE the dated blog archive list with a list of JUST titles. I think the quadruple-nesting is cumbersome and does not encourage readers to click. (I write blogs frequently). Isn't there a way to replace the standard blog archive list with a list of titles, most recent on top? I did this in my previous blog (not hosted--my own) with just html. I know someone has to know how to do this, regardless of whether Blogger cares about it.
Thanks for any insight.
Jae Baeli
http://usedbythemuse.blogspot.com

<    >
Anonymous Fine art paintings said...
I’m sorry if I have no hack to add to your list or collection. I admit I am much more of a user from your site or collection than a contributor. I hope you won’t mind that.

<    >
Anonymous romeq.azza said...
I put my label in post as a frontpage, so it only appears if you click my first page(http://wallpapergirls.blogspot.com/) but dissappear ta another pages.

I add element label at post region and put this code

:if cond='data:blog.url == data:blog.homepageUrl'

in the label1 widget code,:



and closing with
:if

before :

and voila...., a have TOC

see my blog
http://wallpapergirls.blogspot.com/

<    >
nice article :)
by the way, keep writing on dude.. I'll follow you via Rss reader.

Regards
Crazy Bloggers

<    >
Anonymous sumit said...

<    >
Anonymous Navi arora said...
Thank you...
Navi Arora

<    >
Anonymous SATCscripts said...
good job! Keep on your work and efforts!

<    >
Anonymous doug said...
thanks for the hacks..

<    >
Blogger SmS said...
Cool Blogger Hacks to add three column on Blogspot ,However there are many other Blogger Hacking Guide tht help in increasing performance.

<    >
Blogger James Barbosa said...
More up-to-date hacks here...

http://www.blogpowered.net/search/label/Blogger%20Hacks

<    >
Anonymous Bank expert said...
Ya its really a nice collection and a good job. I already use some of this hacks and trying another some hacks.

<    >
Anonymous Web Design Quote said...
Thanks for the posting.The hacks are always cool and i have adopted some of them. Keep adding more and more good stuff.

<    >
another nice hack..thank bro.

<    >
Blogger Prashant said...
another nice hack...Thanks bro..
you rock man..

I have tried on my site: www.Prashsoft23.blogspot.com

<    >
Anonymous Tania said...
thanks for sharing the hacks with us. this is the best collection i have ever seen

<    >
Blogger Ian MacGregor said...
Hiding the navbar is not a violation of the Blogger TOS, please see this post for an explanation by a Blogger employee:
http://groups.google.com/group/blogger-help-customizing/browse_thread/thread/c7e3226fe35da11e?fwc=1&pli=1

<    >
Nice One......

<    >
Blogger anisplas said...
Thank you for the information. I am glad to read this....

<    >
Anonymous Kitchen Sinks said...
Thanks For the post......i am agree with you.....great share....i have read your blog and i saw that i have learn t new things from your blog....it is very interesting.

<    >
Anonymous gallery802 said...
Thanks for sharing this information.

<    >
Anonymous john said...
awesome work man.thanx for the this priceless tutorial,instructions.post.its so much useful to me.

Links to this post:

Create a Link


eXTReMe Tracker