Blogger Edit

http://swimbi.com/tutorials/custom-blogger-menu/

Add dropdown menu in Blogger (blogspot) blog

A quick tutorial on how to add drop down menu with icons and search (like this) in your blog.

1. Add new layout section in template

Go to Template page ==> Edit HTML.
Find the insertion point, right after the <body> tag.

Copy and insert the following code:

  <b:section id='Swimbi-section' maxwidgets='1'>
    <b:widget id='HTML1' locked='true' title='Swimbi widget' type='HTML'>
      <b:includable id='main'>
        <data:content/>
        <br/>
        <b:include name='quickedit'/>
      </b:includable>
    </b:widget>
  </b:section>                

Save template, then switch to Layout page.

Here you can click the "Edit" and insert a menu code into the Swimbi widget.
Or do it directly on your blog page using the Quick Edit wrench icon in the top right corner.

2. Generate Blogger compatible code

Install Swimbi App (desktop version for Mac or Windows), if it's not already installed.
Go to Publication tab ==> Source Code:

• Enable CSS minification
• Choose embedding - CSS and JS into HTML
• Enable automatic copy of the code to the clipboard during publication.

Publication tab ==> Position:

• Position Type - Absolute
• Align and Paddings according to your blog design.
• Z-index - 9. Otherwise the Quick Edit icon (that has z-index=10) will not be available.

Navigation tab ==> Link (of the Search button, which should be selected):

• Search URL - "//YourBlog.blogspot.com/search?q=". If you don't have a search field in your menu, click "+Search" button. Example of blogspot search URL:

    //webdevtipsntricks.blogspot.com/search?q=

3. Action

• Click the Publish button in the Swimbi app.
• Insert the code into the widget.

The small video demonstrates how easy to update your Blogger menu with Swimbi.



That's all, enjoy! Test the live example.

P.S.
And the last advice. If you want to use a free (unregistered) menu, as you may know, you have to add a backlink to your homepage. But anything you add to the blog template appears on every page. The following code allows to insert any content only on home page.

  <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <!-- Homepage content -->
        <!-- add backlink here -->
  </b:if>                  

Download the latest version of Swimbi app