Weekend Project: Move the search form to the navigation bar

We're calling this a Weekend Project because there's a bit of code involved but you'll be amazed how easy this is to do. This project can be used on blogs using Basic Templates at any of the Pro subscription levels.

First, you'll need the code for your blog's search form. The code is different for each individual blog so to make it easy, we'll just grab the code directly from the blog's HTML source. Make sure the search form module is enabled in Blogs > Design > Content and then open your blog in your browser.

View the source of the page (View > Page Source on Mac, View > Source on PC) and look for the Search header in the sidebar code. You'll copy just the <form> code. Below is a screenshot of what to look for and copy.

Next, go back to the Design > Content page and open the Navigation Bar. Here, select the Advanced option and paste the code in the list item (<li> in code) for the last item in the list. You will also add a bit of code to the float the form to the right in the nav bar. It will look like this:

 <li class=”last-nav-list-item nav-list-item” style=”float: right;”><form id="search-blog" method="get" action="http://example.typepad.com/.services/blog/6a00e550196b118834013486aabf34970c/search">
            <input type="search" name="filter.q" results="5" value="" />
            <input type="submit" value="Search" />
        </form>
   </li>

Here's an example screenshot:

When you save and view your blog, it should look something like this:

The final step is to remove the search module from your sidebar in Design > Content. That's it! You're all done. Have a great weekend of relaxing and blogging, folks!