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