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 ;)

Resizr and 3-column conversion

Though I had converted my blog to 3 columns, I couldn't widen the background images used in this scribe template because I don't have access to any image processing software. So, I just set the CSS to repeat the image for the extra width. This resulted in a vertical stripe in the middle of my sidebar that some of you might have noticed. I just left it as it is and it added more to the antique look (or i thought it did :)) .

But today, one of my readers David Finberg suggested that I could use the online tool called ResizR to resize any image. I used it and successfully resized the 3 background images to my blog's new width! If you have followed my 3-column conversion instructions and have a similar problem, you could try this tool too. You have to find the URL of one or more images that form the background, resize all of them and host them somewhere so that you can use them in your template.

(I have updated my Hacked Scribe template with resized images. So, if you are using Hacked Scribe, you can download the new version from here.)

Hans customizes recent comments further

Hans at Beautiful Beta took my customizable recent comments widget and added the date and the title of the post on which the comment was made! Not only that, he made it into an easily addable widget. I liked it very much and so I have used it in my sidebar. I would encourage you to try it as well. You can get it here.

He also has a customizable latest posts widget based on the same hack. In addition to the title, it shows a summary of each post. That's a nice idea too.

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!

Author comment notification takes one more click!

Some of you might have noticed that I had stopped this service yesterday. The reason is that I wanted to make some changes for proper usage. Here's what I have done:

1. Some utility might prefetch the notification URL causing a bogus notification to be sent. So, I have added a confirmation button in this service, so you need to confirm before the notification is sent.
2. If the notifier button ever shows up in your blog for your readers (which should never happen as far my understanding of Blogger code goes) and if he clicks it out of curiosity, I also have a notice that this service should only be used by the blog author. Well-mannered people will respect this and avoid clicking the confirmation button.

I have reactivated the service. Note that you don't have to make any changes to your template because these changes have been made in my website (Anniyalogam.com). I hope that this service is helpful for the 150 odd bloggers who have installed it in their blog.

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.