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 <> tag that start with 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 and ). Save the file.

<div id='newsidebar-wrapper'>

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 阿倫

Neo template is not just some CSS magic. It is an ultra-fast template with which one can navigate through your blog very quickly. As a result, your visitors would enjoy their stay in your blog. It employs the cutting edge technology called AJAX (in particular JSON) and makes best use of the advanced features of new Blogger such as Label feeds and Per-post comment feeds. And it's free too! To summarize it's features:

1. A visitor can navigate through your blog much faster because the entire page (all the sidebar stuff) won't be reloaded while viewing every post. When he selects a post from the list of recent posts (or posts under a particular label), the selected post and its comments are displayed instantly. When he selects a label, the list of posts under that label are loaded asynchronously too.

2. Newer comments are shown before older ones instead of the usual oldest to newest order. Also, comments are divided into pages with 10 comments in each page. Both these features make a big difference if your blog gets many comments.

3. Rounded corner boxes and pleasant colors add to the visual impact.

But, it does have some limitations. It doesn't go well with blogs that use Adsense/other ads because it results in fewer page impressions. Please go through the Neo FAQ to find out how to modify Neo (to show comments from oldest to newest order) and understand other limitations/requirements of Neo to work properly.

I am using a modified version of Neo in this blog. Check out the demo blog to get a feel of how Neo would work with your posts. To this basic template, you can add header image, change colors/fonts using the new Blogger's WYSIWYG interface etc. Various blogs using Neo are showcased in this page. You can see how people have customized the look and feel of Neo.

Neo template is available free of cost. More details in this post. Neo awaits you!