Absolute Zero: Blogger Hacks

Showing posts with label Blogger Hacks. Show all posts

July 26, 2007

Increase your subscriber count using feedburner redirection

This is old news but I thought I will write a small post informing about this new feature in Blogger for the benefit of those who may not know about it. Even if you burn your Blogger feed to Feedburner, some percentage of your visitors may still be reading the Blogger feed. This could happen if they had provided your blog URL (instead of your feedburner feed) to their feed reader and their feed reader auto-discovered Blogger feed. The side effect of this is that your subscriber count will not be accurate.

The first useful development of Google buying Feedburner happens to be the new "Feed redirection" feature. Using this, you can redirect your Blogger feed to Feedburner feed. You can do this by going to Settings->Site Feed and providing your feedburner feed URL for redirection (as shown below).

I did this sometime back and my subscriber count increased from 700+ to 800+ the next day. You could try this too!

Bonus news: Amit informs us of another new feature - Comment Form message with which you can show a message in the Blogger comments page. I made use of it immediately!

July 6, 2007

Special effects for Peekaboo posts!

Yesterday, I thought my most popular hack, Peekaboo posts, needs a makeover. A while back, I received a comment that the post expands too quickly when you click "Read more" link. I thought this could be something to improve upon. How about some special effect like Fade In/Fade Out? You got it! I have integrated the popular javascript effects library script.aculo.us with our peekaboo posts. You can see it in action in my test blog. If you click on "Read more", the full post appears gradually from nowhere and it fades in nicely if you click "Summary only".

You gotta have it in your blog, right? You can have it with very few changes to your template. I spent a few hours on this and surpassed some limitations of script.aculo.us and (bugridden) IE to get this working in Firefox, IE and Opera. Just follow these steps if you have already installed peekaboo posts in your blog.

Step 1: Add these lines before the /head tag.


<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/prototype.js'/>
<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = '#ffffff';
</script>

If your blog's background color is anything other than white, you need to change the peekaboo_bgcolor appropriately for it to work properly in IE. Since most blogs have white background, it should work as it is.

Step 2: Find this portion of code and remove the line shown in red.

   <div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
 <p><data:post.body/></p>

That's it! Go ahead and impress your readers. Scriptaculous has many more effects like slide down/up, drap/drop etc which I will try to make use of in the future. If you liked this, help me spread the word about bvibes.com (which has 170+ registered users now) by adding the bvibes button to your sidebar as described here.

June 27, 2007

Did your navbar re-appear suddenly?

Mine did! Looks like Blogger now adds the following line before /head tag all by itself.

#navbar-iframe {display:block}

As my display:none instruction was sitting before this line, it didn't come into effect. I had to move the line right after body tag as follows.


<body>
<style type='text/css'>
#navbar-iframe {display:none;}
</style>

You could use this method if you have the same problem. By the way, I am going by Amit's word that it is OK to hide the navbar :)

May 4, 2007

Installing Neo template in your blog

[Haven't heard about Neo before? Read this post.]

Neo in other languages:
Spanish (thanks to Ayreonauta): Demo blog, Translated javascript file
Chinese (thanks to Guradian, GG): Installation instructions, Translated template, Demo blog
French (thanks to Nym): Translated Template, Demo blog
Portuguese (thanks to Ricardo Santos): Translated Template, Demo blog
Indonesian (thanks to Bikin Blogger): Installation instructions
Vietnamese (thanks to YHT): Installation instructions, Dang's translation
Norwegian (thanks to Laila): Installation instructions, Demo blog

As I had announced earlier, I will now explain how to install Neo and move your widgets without losing them (sorry it got delayed a bit). I moved the widgets myself for those who paid for Neo but for the free version, you have to do it yourselves. Here's something you need to understand about new Blogger. For any widget in your blog, only the code for the widget is in your template. All the data belonging to that widget (for example, all the links in a link list widget) are not part of the template. So, if you just move the code from your old template to Neo, Neo will pickup the data and all your widgets will work as before.

Another nice feature of new Blogger that comes handy is the unexpanded template (the template code that shows up when "Expand widget templates" checkbox is not checked). Here is an example of how it looks.

In this example, any line that starts with b:widget refers to a widget and each widget has an id. Widgets are contained within sections (lines that start with b:section). They could be present within sidebar or footer sections as highlighted in the image. So, all we need to do is to pickup all the lines starting with b:widget and add them to Neo (I was quite happy when I got this working first time). Let me go through the steps for installation in detail :

Disclaimer: Please note that you are taking the responsibility to copy your widgets to Neo. If you follow these instructions, everything will be smooth. So, read these instructions twice before you start.

Step 1: Backup your current template (Very important)

Step 2: Goto Template tab and click on Edit HTML link. Copy all the lines after < body > tag that start with <b:widget (except the widget with id "Blog1" which is the main blog widget) and paste them to a file.

Step 3: Right click here and save the template code. Open this neo.xml and find the portion of code shown below. Copy/paste all your widgets to the place indicated below (between </b:widget> and </b:section>). Save the file.


<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
</div>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', '');</script>
</div>
</div>
</b:includable>
</b:widget>
Add all your widgets here...
</b:section>
</div>

Step 4: In Edit HTML tab, browse and upload this file to Blogger. When you do this, you should not get the error shown in this image.

If you get it, DO NOT click on Confirm & Save. If you do so, you will lose those widgets permanently. Instead, click "Cancel". This error indicates that you have missed some widgets from your old template. In this example, Label1, HTML1, HTML2 are the ids of the widgets that you missed. Go back to the unexpanded template and pick up these widgets. Once you add them to Neo, your template will be accepted without error.

Step 5: Now if you goto the Page elements tab, you will see 3 columns as shown below. Leftmost column has the Labels widget and the second column has the Posts widget at the top. These two widgets come with Neo by default. Though they are better placed at the top, you could move them wherever you want but if you delete them, you will lose the Neo functionality (asynchronous loading of posts). Rest of the widgets in second column are the ones you copied over. You can now drag and drop them wherever you want.

Step 6: There are some final settings to be in place for Neo to work properly. Goto Settings/Site Feed and if you are still in basic mode, switch to Advanced mode and save. Goto Formatting tab and set it to show 1 post in main page (Neo will just replace this post whenever you click on another post's title. If you have many posts in main page, it will be wierd if only the topmost one changes).

It is a good idea to add Archives widget to your blog while using Neo because Neo uses javascript links to make your blog faster and these links will not be indexed by search engines. But Archives widget will still use normal links in Neo too. Just having monthly archives will ensure that all your post pages are indexed. I have been using Neo for several months now and all my posts are indexed by Google.

Some possible modifications to Neo are described in the Neo FAQ. Make sure you read that too. Good luck for your transition to Neo!

Testimonials: by Bobby, by Paula, by Waz

Here are some Neo Mods (modified versions of Neo) available for you to try out!

Neo wears denim by Mosi, Rounders with Neo by arephyz

EboNeo and NeoColors by diddy

NeoKubrick and iNeogle by 阿倫

November 27, 2006

Create drop-down menus easily

Blogger Beta provides an easy way to create link lists even for those who don't know HTML. But, there is no such functionality for drop-down menus. I had a few people ask me how to create drop-down menus and where to add them in the template. I thought this is something which can be simplified using a third-party widget. I have created an interface, similar to that of Beta, with which you can easily create drop-down menus and add them to your blog with one-click!

Just goto my Drop-down menu creator page and add your menu items one by one by providing a name and URL for each item. The updated menu will be shown to you. Once you are happy with the menu that you created, click the button to add it to your blog. You will see a page (like the one shown below) where you can select the blog (if you have more than one), provide a title for your menu and then click "Add Widget". You will see the widget getting added to your sidebar which you can move around to wherever you want. All this can be done without touching the template code!

Selective Expandable posts

Translations by other bloggers: Chinese, Thai

Earlier, I had announced Peekaboo posts which shows post summaries in main page and expands them in the main page itself. But, some people would still like to use the classic way of expanding posts which takes the reader to the post page upon clicking "Read more" link. One of them asked me how to display the "read more" link only for some long posts and not others. I gave him a combination of peekaboo and non-peekaboo code that serves this purpose. As I started getting more such requests, I thought I will post the code for everyone who wants to use. Here's what you need to do.

1. Find the

</head>

tag in your template and add all the code from this page before it.

2. Find this div for the post-body and add the portion of code in red color.


   <div class='post-body'  expr:id='"post-" + data:post.id' >

     <b:if cond='data:blog.pageType == "item"'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
     <b:else/>
        <style>#fullpost{display:none;}</style>

        <p><data:post.body/></p>

       <span id='showlink'>
        <a expr:href='data:post.url'>Read More......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>

     <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

3. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings. (Please DON'T type these lines yourself because you might introduce some spaces that will break the functionality)

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. Please note that you could also divide some or all of your old posts into summary and full post by editing them. The "Read more" link will appear only for the posts that have been divided like this.

Note 1: If you are not able to find the lines to change, you may not have expanded the template. Select the checkbox named "Expand Widget Templates", which is right above the template code, to expand it into more code.
Note 2: If you click "Older posts" link, the "Read more" link may appear even for the posts which you haven't divided into summary and full post. This is a known problem which we haven't solved yet.

I hope you will link to Hackosphere in your sidebar. That's the only thing I expect in return ;)

November 22, 2006

Customizable recent comments widget (using JSON feed)

Translations by other bloggers: Spanish, Italian, French

Blogger announced that they support blog feeds in JSON format also. Soon, Hoctro found some sample code to use these JSON feeds and used it to come up with a recent posts/comments widget of his own. I realized that it is now possible to customize the recent comments widget further to anyone's needs. Earlier, I had given a method to use Blogger's feed widget to display recent comments. Using this method, we can only show very few words of the comment (too few to comprehend) and upto 5 comments only. I have developed a widget that allows the blog author to customize both these. You can see the new widget in my sidebar, showing entire comment mostly and significant portion of the comment in some cases.

With this widget,
1. You can specify how many comments you want to display in your blog (defaults to 10)
2. You can specify the maximum number of letters that should be displayed in each comment (defaults to 100).

Here is how you add this widget to your blog.

Step 1: Goto Template->Edit HTML tab. Find the

</head>

tag in your template and add all the code from this page before it and save the template.

Step 2: Goto Template->Page elements tab and click on "Add a page element" in your sidebar. Choose HTML/Javascript element. Give an appropriate title and copy/paste this code.


<br/><script language="javascript">
var numcomments = 10;
var numchars = 100;
</script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?
alt=json-in-script&callback=commentDisplay"></script>

You need to change the blog URL to yours. You could also change the number of comments/letters per comment to whatever fits your blog. Then, save the changes and move the widget to wherever you want. There, you have a customized recent comments widget!!

For those who are interested in the details, I am displaying the content of each entry in the comment feed instead of the title (after removing all the html tags). I display only the number of characters as specified and also control the number of entries displayed. All this is done in the callback function to which the JSON object is passed.

I wish all my readers in US, a happy Thanksgiving!

November 10, 2006

Random message widget (no Edit HTML!)

Phydeaux3 and Hoctro discovered the unannounced Blogger's feature that allows third party widgets to be added to your blog with just a click of a button! Only HTML/Javascript widgets can be added like this. Other type of widgets like Label etc don't seem to be supported (atleast as of now). I was thinking about how to make best use of this feature. This is mainly helpful for those who don't have much clue about HTML etc. I thought if the widget is customizable, it will make a big difference. I have developed one such widget with which you can display your choice of quotes/messages randomly (changes with every page view/refresh). I have the widget in my sidebar showing randomly chosen Einstein quotes.

While I was wondering what would be a good hack using this feature, I came across Annie's hack to generate random quotes. I thought this is a good hack that people would want to use, preferably without the hassle of editing HTML. Before trying it, I would suggest you to first go through Phydeaux3's post and familiarize yourself with this new Blogger feature.

Got the idea? Now, goto this widget creator page which allows you to specify your own choice of upto 10 messages. Click on "Generate code" button and then add the widget to your blog (If you understand what's going on, you can even edit the code). After you add the widget, it will appear in your blog sidebar (with the title that you specified). You can use the layout editor to move it wherever you want. As always, your feedback is most welcome.

By the way, Vivek has a few nice hack posts too - one that explains how to display widgets only on post pages (which have more free space than main page) and another to add a wider sidebar like the one I have. He has explained them both in much detail and so it will be easy to understand.

October 16, 2006

Peekaboo comments and Random banner hack

For KCA and all those who wanted Peekaboo comments in main page badly, Stephen has got it working! Avatar informed me about this and I thought I will inform my readers too. Instructions are in his post. There seems to be quite a few steps and so, apply the hack carefully.

Also, check out Gabriel Lau's nice hack to display a randomly chosen banner at the top in this post. This is one of the famous Wordpress plug-ins which is now doable with Blogger too!

October 10, 2006

Author comment highlighting and notification

After a break of a week or two, I am back again. I now have some hacks for the comments section - a hack to highlight your comments as the blog author and another to notify your readers when you respond to their comment. You might have noticed that my comments are displayed in red here in my blog and that's what I mean by "highlighting". I believe it helps my readers to identify my response to their questions amidst a long list of comments. Some of my readers asked me how to do this in their blog and here I am sharing what I did.

Author comment notification is another hack that I did for the old Blogger. When somebody posts a question/comment in your blog and you respond to him, the commenter may not see the response unless he checks your blog a few times. If (s)he landed in your blog through blog search or Blogger's next blog chain, (s)he may not even remember your blog's URL. Sometimes, you type a long response and it goes into blackhole. With this notification, you can send an automated email message to the commenter with just one click. This message will contain your name, your post’s title and its permanent link so that the commenter can easily come back and see your response. This hack is actually a service hosted in my website bvibes.com. [Please note that notification can be sent only to those who have shared their email address in their Blogger profile.]

Now, for the code changes. First find this class called comment-body, copy it to define another class comment-body-author and modify it for the way your comments should look like. For example, here I have set the color to what I want and made it bold.

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#CC3300;
text-decoration:bold;
}

Then, search for "id ='comments-block'" in your template to identify the portion of code in this page and add the new code shown in red and blue. The red one is for author comment highlighting and the blue one is for comment notification.

After you make those changes, goto any post page with comments and you will see the an image after every comment (NOT in the comments page where you type comments). As you can see in this example, there's an image below Richard's comment.

Once I respond to Richard, if I click that image, an email similar to the following one will be sent to the email address in his profile. [If the person has not shared an email address, no email will be sent.]

Subject: Response to your comment has been posted
"Ramani has responded to your comment on Peekaboo posts improved again. Please click this link to see the response."

As a security feature, this image will be shown ONLY when the blog author is logged into Blogger. Visitors to your blog won't see this image and so they won't be able to use this feature. Also, be judicious in using this service (if you send emails for trivial responses, your readers may not like it).

September 26, 2006

Hacked templates with 3 columns, Peekaboo posts

Over the past few weeks, I came up with hacks for Blogger Beta that have been liked by many. My hacks were easy to apply for most of my readers. But, I realized that some people still find it difficult to make the correct changes in the template. For such bloggers, it would be easy to just pickup a template with all my hacks built-in. At first, I thought I will come up with my own design for the templates. But, due to lack of time, I decided to just add the hacks to some of Blogger's templates.

Here are the list of hacks that were built-in:

1. 3-column conversion with additional sidebar

I decided to make the sidebar on the right wider than the left sidebar. Your Profile, archive in hierarchy format, recent comments etc will benefit from a wide sidebar (or widebar :)).

2. Peekaboo posts with summary in main page

This hack displays only post summaries in main page which expand inline upon clicking a "Read more" link. You can choose which posts are divided into summary and full post by using the post template described in step 3 of this post.

3. Peekaboo posts in label/archive pages

Only post titles will be shown in such pages so that the reader can quickly find what he wants to read amidst a long list of posts. A [+/-] toggler can be used to expand/collapse the posts. (Read more about this)

4. Multi-style Labels widget

Labels shown in multiple styles - Drop-down menu(default), zoom style and flat list (read more).

5. Del.icio.us and Digg hotlinks in post footer

6. Author comment notification (read more about this)

Check-out these hacks in action in the following Live demo blogs. If you like one of them, right-click the "Download template" link, save the code for the template and upload it to Blogger (Don't copy/paste, you might miss some lines). I will come up with more hacked templates as and when I get more free time.

Hacked-scribe Live (Download template)

Hacked-minima Live (Download template)

Get Hacked!

September 25, 2006

Displaying recent comments in sidebar

UPDATE: I came up with a customizable version of Recent comments widget later. Please try it instead of this.

The much-awaited comments feed is completely functional now! I saw Hoctro's post on this topic and found my blog's comments feed also working great. Blogger team seems to have fixed the stale comments issue on Friday. It's very easy to show recent comments in sidebar now (as I have done in my widebar - the wide sidebar). Just goto Page Elements tab, add a page element of type Feed to sidebar and give the following as the Feed URL.
http://yourblogname.blogspot.com/feeds/comments/default. You could select to show the date and comment author if you want.

Notice that they have changed the feed URL not to contain any blog ID etc. This makes it easy to play with any blog's post and comment feed URL programmatically.

UPDATE: Many readers asked me why comments are not immediately shown after published. It is because it takes some time for the new comments to be added to the comment feed. Just wait for some time and it will show up. Yes, this is a limitation of using feed to show recent comments.

September 16, 2006

Blogger hack: Expandable posts with Peekaboo view

Translations by other bloggers: Spanish, Indonesian, Chinese, Malaysian

Your blog's main page usually shows the entire content of each post. If your posts are usually more than 2 paragraphs, then your visitor will find it difficult to quickly find the topic of interest to him because he needs to scroll down a lot. This is where expandable post summaries helped in the old Blogger. This hack serves the same purpose for the new Blogger and more! That is, main page will show only post summaries and when you click "Read more", the full post appears in the main page itself (Peekaboo view)!! I got some requests to do such a hack and I managed to get it working. Later, Hans improved it by adding a "Summary only" link with which you can collapse the post back to summary. Together, we also made the "Read more" link to show up only for the posts that have a summary. This is an amazing hack but you need to be careful while changing your template. If you are not familiar with HTML, I strongly suggest you to get help from somebody who knows HTML while applying this hack. Here are the steps to follow.

Step 0: Download and save your template so that you can go back to it if there is any problem with this hack (Important!)

Step 1: Find the

</head>

tag in your template and add all the code from this page before it.

Step 2: Find the includable called 'post' and copy/paste the changes highlighted in red in this page (Be very careful and avoid mistakes. Note that the word "uncustomized-post-template" may not appear in your template but that's fine.). To find the includable, you could search for the term id='post'. If you are not able to find it, you may not have expanded the template. Select the checkbox named "Expand Widget Templates", which is right above the template code, to expand it into more code.

Step 3. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings. (Please DON'T type these lines yourself because you might introduce some spaces that will break the functionality)

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. It is important to make sure that the /span tag above is at the end of the post. To ensure this, use Edit Html tab instead of Compose tab while typing the post. After typing, you can go to compose mode and change fonts/colors etc. Please note that you could also divide some (or all) of your old posts into summary and full post by editing them. The "Read more" link will appear only for the posts that have been divided like this.

[If you are visiting my blog for the first time, don't miss these other nice things I offer:
1. A Digg-like blog sharing website to promote your blog - bvibes.com.
2. AJAX-driven fast template - Neo ]

Important notes:
Note 1: Please don't forget to add a link to Hackosphere in your sidebar. That's the only thing I am expecting in return :)
Note 2: If you would like some fade in/fade out special effect for this hack, you can have it by making the few changes described in this other post.
Note 3: If you would like the "Read more" link to take you to the post page instead of expanding in the main page itself, use this other hack.
Note 4: If you click "Older posts" link, the "Read more" link may appear even for the posts which you haven't divided into summary and full post. This is a known problem which we haven't solved yet.

September 14, 2006

Tweak your label tabs

Translations by other bloggers: Chinese

Here I have an improved version of Hoctro's labels as tabs hack. Quite a few people have more than 10 labels and I am sure they wouldn't want to show all their labels as tabs. I have a modified version which will allow you to show only the top 5 labels (based on frequency of their usage) as tabs. I also made two other changes to the code:
1. Show a "Home" tab that points to your main page
2. Modify the label URL such that the label page will show upto 100 results (remember my previous hack?).

If you would like to use this updated version, first install Hoctro's original hack if you haven't already. Then, goto 'Page elements' tab, click "edit" for the label-as-tabs widget and change the sorting order to "By frequency". Then, find and replace Hoctro's widget code (his step 5) with this code.


<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <div id='tabsF'>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'><span>Home
         </span></a></li>
      <script type='text/javascript'>
        var labelnum = 0;
        <b:loop values='data:labels' var='label'>
        if (labelnum++ &lt; 5) {
           document.write("<li><a expr:href='data:label.url + 
"?max-results=100"'><span><data:label.name/></span></a></li>");
        }
        </b:loop>
      </script>
    </ul>
  </div>
</b:includable>
</b:widget>

Save the changes and check it out! As always, you could tweak the limit of 5 to any other number you like. I guess you can easily find the line to change. You will, if you have been taking the journey of hacks with me ;-)

Also, check out Ricardo & Vivek's nice trick to make your links in sidebar open in a new window. This is a good idea to keep your blog open even after the reader clicks one of your links.

September 10, 2006

Hoctro's tabbed label pages

Hoctro has come up with an amazing hack to display multiple tabs for label pages under the header. If you consider labels as the mechanism by which you subdivide your blog, this hack helps you to present the various topics as tabs to the visitor. He has also found a nice set of tab images to select from. I have used his hack in my blog as you can see. I think it doesn't get any better than this as far as labels go - we have hacks to present labels as drop-down, zoom, cloud and now tab styles!!

Some notes about this hack:
1. I am hosting all the free tab images provided by Exploding-boy.com in my website. Hoctro has described how to use these hosted images in your CSS.
2. It is possible to have multiple label widgets in your blog. So, you don't have to remove your existing multi-style or cloud widget for adding this tab style. Just add a new Label page element with hoctro's code.

Go ahead and jazz up your blog with tabs! If you like what Hoctro has done, leave a comment in his post.

September 8, 2006

Peek-A-Boo view of posts in label/archive pages

Building upon my earlier hacks for label/archive pages, here is a hack that significantly improves visitor experience. The idea is to show only post titles to start with but also provide a [+/-] toggler for each post. If the visitor clicks the toggler, "Peek-a-boo", (s)he sees the post contents also. He/she can select the posts for peek-a-boo view and read many posts without ever leaving the page. You could present all your posts in the same page for peek-a-booing by increasing the max-results.

Here's an image showing one post expanded and two other collapsed. Note that [+/-] toggler is used for both expanding and collapsing.

Would you like Peek-A-Boo in your blog? Then, search for the term "blog-posts" in your template to find the portion of code shown here in black and insert the lines highlighted in red at appropriate places.

Once you save the changes, you will be able to expand/collapse posts in label/archive pages. It works for the search results page also. Ain't it cool? Have a good weekend!

September 6, 2006

How to control the number of posts in label pages

Blogger defaults to 20 posts per page in label pages and provides a link called "Older posts" to view other posts. If you are using my hack to display only the page titles in these pages, you will agree that the display is too short and we could show many more posts. Michael identified this possible improvement and I thought it's a good idea. I found that the parameter that controls the number of posts is "max-results". For example, the URL "http://hackosphere.blogspot.com/search/label/beta%20hacks?max-results=100" will show a maximum of 100 posts with the specified label.

Here's what you need to do to increase the number of posts. Download your template, save a backup copy and use your editor to replace all occurances of
data:label.url
with
data:label.url + "?max-results=100"

Then, upload your new version and check to see if it works. This will work irrespective of the kind of labels widget you have (Blogger default, drop-down or multi-style version). Also, you could use some other number instead of 100. I thought 100 is a good number but it may not work for you.

Did you check out the section called "Beta hacks from neighborhood" in my sidebar? It has links to some cool hacks from others such as
1. Phydeaux3's Label clouds
2. Vivek's hotlinks to most of the social bookmarking sites and google translate utility.

Update: If you are using label clouds and you want to set max-results, replace this line in Phydeaux3's code
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
with this.
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t) +'?max-results=100';

September 4, 2006

Multi-style labels widget for Blogger Beta

Multi-style labels widget is my first complete widget for Blogger Beta. It supports 2 custom styles (zoom style!, menu style) and the default list style provided by Blogger. The idea is to allow your blog's visitors to choose the style that they like instead of you fixing one particular style. I am also introducing zoom style that displays labels with font size proportionate to their usage! (sorta like a cloud but not exactly).

Interested in a hands-on experience of how this works? Check out the Multi-style labels widget in my sidebar. There are three icons one for each style - just click any icon and you will see the labels in that style. I have set zoom style as the default style.

- Icon for list style

- Icon for menu style

- Icon for zoom style

Excited about this? Try it in your blog. First, goto Template->Page elements tab and remove your label element IF you have one. Then, goto Edit HTML tab (no need to expand widgets) and identify the start of the sidebar section by looking for this line.


<b:section class='sidebar' id='sidebar' preferred='yes'>

Insert the code from here after that line (right-click, save it and copy/paste). Once you have inserted, you could goto Page elements tab and move this new Labels element. If you don't want the combo, you could use the zoom style alone by inserting the widget code from here.

I hope this widget will encourage many bloggers to switch to Beta and take the hit of labelling all their posts. This also proves how effectively we could combine Javascript with Bloggerscript (the new template language :)) and develop some cool widgets!

September 2, 2006

Del.icio.us and Digg hotlinks for your Beta blog

[Translations by other bloggers: Chinese]

Quite a few bloggers have hotlinks to social bookmarking websites such as Delicious and Digg so that visitors to their blog can quickly submit their posts. Vivek Sanghi identified that the method described in this post will not work for Beta blogs and also suggested that I could look into it. I did and got them working with this blog. You can find these links below any of my posts, next to the Labels.

If you want these hotlinks for your Beta blog, expand your template widgets and search for "post-labels". You will find the portion of code shown below. Insert the code in red before the /span tag.


<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'>
          <data:label.name/>
        </a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>

  <a expr:href='"http://digg.com/submit?phase=2&amp;url=" + 
      data:post.url + "&amp;title=" + data:post.title' 
       target='_blank'>DiggIt!</a>
  <a expr:href='"http://del.icio.us/post?url=" + 
      data:post.url + "&amp;title=" + data:post.title'  
        target='_blank'>Del.icio.us</a>

</span>

If you are familiar with the classic Blogger tags $BlogItemPermalinkUrl$ and $BlogItemTitle$, I have used their equivalents data:post.url and data:post.title here. You could hotlink to other bookmarking sites also using these.

September 1, 2006

Latest Posts display in sidebar

Do you miss the Previous posts section after migrating to Beta? As you might remember, classic Blogger used to show previous 10 posts in any page. When somebody visits your latest blog post following a link from another blog, he had a chance to look at the titles of previous posts and read them if he likes. Good news is that it is still possible with Beta to display upto 5 latest posts from your blog in your sidebar. Here's what you need to do.

Blogger Beta supports showing items from any feed as a page element. So, you could show the post titles from your blog's feed in your blog itself! The URL of your blog's feed is
http://yourblogname.blogspot.com/feeds/posts/full.
Goto your dashboard, Template->Page Elements and click "Add a Page element". Choose the Feed element and provide the URL that you collected in previous step. In "Configure feed" window, give an appropriate title (I gave "Latest Posts"). Save the changes and drag/drop your new element to wherever you want.

By the way, I am working on getting my pre-Beta hacks to work with Beta blogs. If you are new to my blog, you can expect a few more hack announcements in the coming days. If you would like to have a peek at my pre-Beta hacks, check out "Goodies to promote your blog" and "Related posts from your blog".