May 4, 2007

Installing Neo template in your blog

[Haven't heard about Neo before? Read this post.]

Neo in other languages:
Spanish (thanks to Ayreonauta): Demo blog, Translated javascript file
Chinese (thanks to Guradian, GG): Installation instructions, Translated template, Demo blog
French (thanks to Nym): Translated Template, Demo blog
Portuguese (thanks to Ricardo Santos): Translated Template, Demo blog
Indonesian (thanks to Bikin Blogger): Installation instructions
Vietnamese (thanks to YHT): Installation instructions, Dang's translation
Norwegian (thanks to Laila): Installation instructions, Demo blog

As I had announced earlier, I will now explain how to install Neo and move your widgets without losing them (sorry it got delayed a bit). I moved the widgets myself for those who paid for Neo but for the free version, you have to do it yourselves. Here's something you need to understand about new Blogger. For any widget in your blog, only the code for the widget is in your template. All the data belonging to that widget (for example, all the links in a link list widget) are not part of the template. So, if you just move the code from your old template to Neo, Neo will pickup the data and all your widgets will work as before.

Another nice feature of new Blogger that comes handy is the unexpanded template (the template code that shows up when "Expand widget templates" checkbox is not checked). Here is an example of how it looks.

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 < body > tag that start with <b:widget (except the widget with id "Blog1" which is the main blog widget) and paste them to a file.

Step 3: 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 </b:widget> and </b:section>). Save the file.

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', '');</script>
Add all your widgets here...

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


Bibliophile said...

great work buddy.... People like you are a boon to blogosphere


Hi Ramani,

thank you for your post, info & email. I'll give it a try!!

migz said...

Wow, Ramani! Very nice, i'm using your hacked minima template, can you list here your hacks and how to add it on your new template? Thanks :)

shironeko said...

Finally, transition to Neo complete
-My Blog

waz said...

wazup Ramani,
thanks for making the code free!
but why the change of heart?

Unknown said...

It looks coool!! Nice images.

Ken Lai said...

"Installing Neo template in your blog" in Chinese

Unknown said...


I did sell a few copies as I had planned originally. But, later I realized that I would be happier if many bloggers all over the world start using Neo. Also, I was having less and less time to support the people who are ready to buy Neo. Gotta spend more time at work which pays me $$$.

waz said...

Ramani did you read this?
wat you think of it?

Unknown said...


I have a simple answer. He compares Neo to Google homepage. If this behaviour is not good UI, do you think Google would have adopted it? Some people are still stuck in the traditional "show all/reload" paradigm. But the future is "show only what's asked for and do so asynchronously" - in short, AJAX.

Unknown said...

Migz, I forgot to reply you. Neo comes with it's own version of peekaboo posts and it has 3 columns. I think recent comments widget will work. Some other hacks may not work with Neo. If you like to have a faster blog, switch to Neo. If you like to keep other hacks, you can stay with hacked minima.

migz said...

Nice, How do i change the post a comment to pop-up (default pop-up for blogger? Thanks.

Cyber-Buff said...

hmm...thank you very much for the article.
3 days with neo now. I gound a few things:
1. Slimbox isn't working properly.
2. Cant post from scribefire.
3. One post in the main page. (I may be wrong in this matter. But more than one post on the main page brings the comments in the end.) But that's not an issue. Coz, it's too fast.
Thanks again!

Cyber-Buff said...

one more thing: aditya's smiley hack is nt working for me. Is there some other code to add?

SwordMouth said...

hey Ramani,

~~ Peace Out ~~
Well, the post was just a plain thought about how the Neo UI is cool and not cool as well.

I would only want your Neo to be a better UI, by the Criticisms. Hope you will think before brushing it all away.

"Some people are still stuck in the traditional "show all/reload" paradigm" -

It's not like we are all stuck, we wish things got better. There is something about the Google Bot or any Site Search Bit we should consider.

Bots expect the content to be available as "the old style load/reload"!!

Do we consider the search engines or not is the question.


Jayashree Bhat said...

I always loved neo but I find that I'm unable to install it :(
I get the error message: The document type declaration for root element type "html" must end with '>'.
Could you tell me how to go about it?

Unknown said...

Cyberbuff, I am not aware of slimbox, scribefire etc. As I said, some things may not work with Neo.

Migz, that should be possible. I will get back to you if I can get it working.

Jayashree, did you upload the file to Blogger or tried to copy/paste? copy/paste might cause problems. As you can see, others have got it working when they uploaded the file.

Unknown said...


Yes, I agree that search engines don't index javascript links (but that's not an UI issue). That's why I have asked everybody to add Archives widget in my Neo installation instructions (Archive links are not javascript links in Neo). When search engines follow the archive links recursively, all the pages of the blog will be indexed. Here's the proof:

I have been running Neo in my blog since January. You can search Google with the title of any of my post after January. You will see that Google brings it up as the first result.

Sinkiss said...

great theme, but my comment won't show up, i have all feed turn on it load them while the blog is loading then tthey disappear once the blog is fully loaded.

how can i fix this

Cyber-Buff said...

something i would like to add. since we are not moving from a page to another, clicking on one link leaves an outline on the link clicked. but a {outline: none;} would sort out this 'problem'

Jayashree Bhat said...

Yes, I did that and it's working fine.
Thank you so much for giving us Neo!
How can I change the header image?

Unknown said...

hello Ramani,

just installed neo, looks great so far ! 2 questions: 1) when I add page elements for feeds, it does not show up. why ?
2) Is there a way to limit the number of labels displayed by label frequency ?

Thank you

migz said...

Thanks so much for the template bro! Another question, how do you add the comment counter? Like these "Post a comment(number of comments) and when you changed your template to neo, did you adsense/etc decreased? I'm planning to add kontera. :)

Unknown said...

Sinkiss, which blog is this problem happening in?

Jayashree, that's answered in the neo faq at

Lova, Does it gets stuck in "Retrieving feed..."? It's not a problem with Neo. I just checked and it happens in other templates too. Looks like Blogger has broken this feature. And you can try to apply the label limiting hack for Neo but it may be a bit tricky.

Migz, I had explained in my original post about Neo that it will reduce the number of hits in ads because it doesn't reload the page for every post (naturally).

migz said...

Yeah, but how about yours? Did it really decrease? Thanks

Unknown said...

yes it did. But I am not bothered about it much.

migz said...

I see, you should add donation logo! :)

Unknown said...


absolutely right ! I did not notice that it bugged for other blogs as well. Neo is really quite awesome, thank you for this !

LOUI$$ said...

Bro, put a donation button, it's will help you get some money. maybe you can get all the money who donation to charity? Just my ideas. :D

Unknown said...

Loui, sure I can put up a donation button. But, I don't think I will get much from donations, frankly :) Also, I get paid 6 digits $$$ salary at my work. I do these hacks mainly for fun and personal satisfaction.

Unknown said...

oh, did you suggest me to donate all the money to charity? I didn't understand it first time. Yeah maybe I can do that.

migz said...

Ramani, about ads, i think you can do a quick reload in the page when clicking the recent posts, or just reload the ads itself, so the ads will be based on the keywords of the post.
And how do you change the rss beside the address bar(in firefox) to feedburner address in blogger? Thanks.

siu said...

Hi Ramani,
I can't do this comments, would you please help me to solved the problems? said...

Hello Mr Ramani,

The process you've shown to configured NEO template is not working.
Template's getting saved, but while veiwing blog t shows error 'bX-kkoal'

Unknown said...

It seems to be working now? is it?

Jayashree Bhat said...

Thanks... But the header image I had earlier was larger. How can I make the whole image appear without part of it being cut off?

Unknown said...

Jayashree, you can try changing the widths of #header-wrapper. Is height an issue? I believe you have installed Neo on your blog named Musings. Can you put up the image and tell me what's wrong? said...

Hey ramani, HUUreeeeeeyyyyyyy its working now. see my blog said...

hey ramani, i wanna know about you.
i too wanna be master in programing. tell me who are you? where u from? where do u stay? where did get your academic qualification from? what are you doing nowadays? do u have an orkut account? tell me your email id. well mine is and 'Milan Parmar' in orkut.

Explorer said...

Jayashree bhat, to correct this error change HTML to html(which comes in the begining of the code and above the variable declaration). This error is because Mr.Ramani has provided this code into capital letters. you can see that DIV and BODY as well.

Unknown said...

Kishor, that's a lot of personal questions :) Just look into my Blogger profile and you will get some info.

Unknown said...

Thx Ramani! U inspire me, I've hack your Neo Template into my own blog!! It works great..^_^, and I modify a little of the code to fit my theme..anyway Thx a lot!
For Chinese Users: click to see the demo

Unknown said...

Tsung-Kai Chen,

I love the way it scrolls down in your blog. It's a nice rearrangement of the widgets.

Heidi said...

Hi Ramani -- I really like your blog. I have a question -- how about installing NeoCounter onto a Wordpress blog?

migz said...

Ramani, can you make a script to reload the ads (i have kontera in-text ads) when clicking posts? Thank you so much..

Unknown said...


I don't want to do that because it maybe against the rules of the ad provider.

migz said...

It's not against the tos because you're not modifying their code..

Unknown said...


Even if I don't change their code, calling their function when the page doesn't reload will be considered as forced impressions. I am not sure if it will even work that way.

diddy47 said...


i have installed neo..but it does not quite look like yours....your +++Labels+++
+++Posts labelled "New Template Hacks"+++
display and it their functions are really du u get that kind of display. The instruction i find here refer t editing sections of CSS that are not present in my templete....

Is it possible to rip a templete from the page source?

Unknown said...


For labels, I am using Hoctro's vertical tabs hack. I didn't want to include others' hacks by default in Neo. But, there's no difference with second column, right? If you are referring to the Older>> link at the bottom, it will automatically appear when you have more than 10 posts.

Unknown said...

Hi Ramani! I have seen your template, It is very nice. But I think the total no. of blog hits or page views will fall by using Neo template. What do you say, Plz reply to

migz said...

I see, Ramani. Thanks anyway.. How do you place the blog posts on the left and the labels on the right?

Unknown said...


you can do that by moving around the widgets and sections.

Explorer said...

See denim template configured with NEO and widebar. 'wIdBEar'

Apple iPhone said...

Hi. I am the owner of
I have installed Neo template on both blogs exactly from your instructions.
But not Recent posts, not posts from Labels are shown in "Posts" widget. I have tried to reapply all labels to posts, it doesn't helped.
Any ideas???

Amy said...

thanks for the neo template ramani,
but it seems that something's wrong with mine. the comments don't show up in firefox but only in IE! How can i fix that??

Unknown said...


I will get back to you soon. maybe tomorrow.

FL Sam said...

Hi Ramani,

I am using the Neo template at my below blog:

But I wanted to add an image behind the description but the picture will not appear even though I have done the add image at the Blog Edit.

How can I make the picture appear behind the description. Tks

ayreonauta said...

Hi, thank you very very much for Neo!!! I'm wondering if you could tell me how to translate small parts of the template, just like the Labels' box title ("Etiquetas", in spanish) and the "post labeled..." (by "Entradas con la etiqueta...") . I've tried to do it, but Neo stop response. Is posible to do what I want?

Unknown said...

Ayreonauta, you can take the neo.js itself and translate the english words to spanish and host it somewhere. Others have done like this for other languages.

ayreonauta said...

Thanks Ramani, I will try. If I can make it, I will tell you. Thanks again.

ayreonauta said...

Ready! You can check my (our) spanish version of Neo:

Demo blog:


ayreonauta said...

pst! you post the links inverted, demo and js file. Do not publish this commentary, thanks!

Jean said...

i tried the method u taught in this post,but i still couldn't make it!
i pasted my widget lines in where u told but when i upload the xml file to my blog, the msg below appeared..
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog."
so what can i do?>.<

Anonymous said...

i'm currently usin ur neo template...
its great...

Nirazo Malla said...

Dear RAmani, i had used urs this one as u Xplain...

Add all your widgets here...
In the place of Add all your widgets i kept all of mine widgets
b:widgets to its end />
P.S. i removed here < and > sign because it gave error over here

but there i got this kind msg:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog.

Could u plz figure out what is mine mistake.i would be glad to get solution from u

Erin said...

Hi Ramani Thanks for making Neo free. I went through the comments looking for these answers - sorry if I missed them.

Was wondering how to make the comments oldest to newest order. Also how to make the total number of comments to greater than 10 per page.


Erin said...

Hehe just found the FAQ's. Got the comments in the order I want, but can I change the number of comments to greater than 10?

Unknown said...


Right now I have fixed the number of comments per page to 10. You are the first person who wanted more. If I make it configurable, I will let you know (need to check if it is possible). I will leave a comment in your blog if I change it.

Unknown said...

Jean and Mea,

This instructions has worked for so many people as you can see in the comments. Can you please check if you pasted your widgets to the right place and if all the lines end with />.

Erin said...

Thanks! Since I rarely have more than 15-20 comments per post I would like all the comments to be on one page, ideally. But it's not a big deal, just let me know if I can ever change that.

Unknown said...


Somebody had reported this problem with Opera earlier and when I asked them to upgrade to the latest version of opera, the problem went away. Can you please try it too?

Nirazo Malla said...

Dear Ramani i got this notice:
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The document type declaration for root element type "html" must end with '>'.

but in the html section there is this line:

there is begging < and ending > but still...

好倫 said...

Hi Mr.Ramani

I'm a big fan of your neo template hehe...but my english is poor >_<

I wanna report some bug with your template...

for example

if i enter this URL ...

but it still "Pownce review: Messaging for web 2.0 era" (your latest post)...


and here are some problem with my Neo template...

if I move "main-wrapper" from right to left .... then the "comment" disappeared...I don't know how to fix it ...can you help me??

Unknown said...

Thanks a lot for informing this. I made some change yesterday and that caused this issue. I have reverted back the change. This problem is not there in the neo template but only my blog.

In which blog do you have the comment problem?

好倫 said...


my blog is

(sorry. it is a chinese blog...)

comment doesn't show up...

but if I read the latest post by ajax-json method....comments show up again...(weird..)

and if i put the "main-wrapper" in the middle or right side ... comment works...

only in the left side....

comment disappear...-_-

it is so weird...

sorry for my bad english explaination....hahah...

Unknown said...


There used to be a timing issue but I had fixed it. This looks similar to that. I will check it later in the day.

Btw, your english is not bad at all :)

Storyteller said...


I am a fan of your template and love the speed to access all posts...
But today nothing was working... and checking noticed that where you have the javascript the account was suspended!!

Is there another place where you have this file??


Please let us know. Thanks!

Storyteller said...

Hi Ramani,

found the new location, please elimate my comments!!!! Thanks for your extremely good work!!

好倫 said...

dear ramani

i have fixed my template up..hehe

you're right it's a "timing issue"

and by the way

I combine Neo and kubrick into


and Neo and engadget into



maybe i'll translate them into English someday..

but now it's still tranditional chinese...

Unknown said...

Awesome work 阿倫! If you have written posts about how to install these mods, can you send me the links to those posts? I will add links in this post.

Laila said...

I too fell for the Neo template. It's great!
You may have a look at my blog here (it's in Norwegian).
Thank you for your wonderful work!

好倫 said...

dear Ramani

I have translate my posts, template and your Neo.js back into "english"

here is the url



hope you'll like it ^_^

YHT said...

Thanks very much.

好倫 said...

dear Ramani

I made an template that i call it

" iNeoogle "

.Main Features of this iNeoogle-Template :

* postPermalink and label added.
* Prototype and scriptaculous build-in for cool new scrollto and highlight effect.
* More Column space for you to put all widget you want ^_^

that demo blog and instruction.

hope you like it ^_^

Unknown said...

That's quite cool! I was planing to do something similar but didn't get the time. You did it! I will add a link to this mod.

YHT said...

I've just applied your Neo template in my blog
Evething is so good, thank you again.
I've also added your site to my link list, can u add my blog to your Neo Power list? Thanks!
With warm regards,
Ps: I can't see the "rounder" when view my blog in IE, do you know why?

YHT said...

Hi Ramani,
I've just translated your post into Vietnamese. Can you add my post to your tranlated list
Here is the post:
Thank you.

Unknown said...

I have added the link, YHT. Thanks for translating.

Bill Graber said...

Hi Ramani

I hate bothering you, but I’m have a bit of a problem when my template loads in IE….seems it sometimes crashed IE browsers… can you take a look and see if I have something wrong? Also it seems load backwards of yours with the sidebars coming on line before the main post…. I don’t think it did that before I made the template fix after your site went down…

As long as I’m here I was also wondering if you have had time to see what is going on with the comment notification?

Thank you,


Unknown said...

Paula, I just loaded up your blog with IE6 and it came up fine. Do you know if it fails only with IE7?

And yeah, I haven't yet figured out the deal with comment notification. lazy me :)

Laila said...

It seems I am having the same problem as the Chinese commenter 阿倫. My comments box says "No comments yet" although there are comments. This applies to the main page and also to each separate item page.

In order to see the comments in the comments box I have to find the post link in the "Recent posts" list and click it.

(My blog is at

Laila said...

Hi Ramani,
For your information, I have translated both the Neo template and the Neo installation instructions into Norwegian:

Installation instructions in Norwegian: Hvordan installere Blogger-malen Neo (norsk versjon)

Unknown said...

Wow Norwegian!! Thanks Laila. I added links to your post and demo blog.

Gonzalo said...

I was having the same problem as Leila and 阿倫. The only thing I did to solve this problem was:
In Template - Edit HTML (without clicking Expand Widget Templates), I put the sidebar-wrapper before the main-wrapper. Dunno why it worked...

Great work Ramani!! I'm using Neo in my blog I made same adjustments and corrections to the spanish translations.
Regards from Argentina

Rick Warren said...

I just installed your neo template on my website

I clicked on the 2nd post in my recent post and the the e-mail button. It uses the first post information not the current post.

Rick Warren

Laila said...

Aha, I see! Thank you //G\\.

Unknown said...


Email post feature of blogger may not work with Neo because of its asynchronous nature.

SaTiSh MeDoS said...

Thanks Ramani Neo is awesome &especially time saving.....

I have applied Neo to my blog

Tarry Singh said...


You have done an excellent job. I am currently trying to deploy your template on my blog.

Excellent job,

Tarry Singh

Jaloee said...

hi ramani

thanks you
my blog

Admin said...

Hi Ramani
I try Install This Template to my blog but comment not appear at my blog:
i have tried to test post comment but didn't show up what wrong with my blog.


Fresh Tecno

Unknown said...


I just posted a test comment in your blog and it seems to show up.

Admin said...

Thanks for your concern Ramani. I am very glad that you have time to check My First Blog. i find out that when i move main wrapper in the middle and and newsidebar on the right position, my post list show nothing. so i get it back to original structure widget.
may be you can tell us if you don't mind how to re arrange widget structure and comment box. the example of not working comment bos is

Thankyou for your sharing

Fresh Techno

Kiubrubik said...

terima kasih atas template neo itu, saya suka kan nya


thank you for neo template, i like it


m said...

thank you very much :)

Milan said...

Hi Ramani,

For blogspot-user visitors, I have configured Deepak's (one of your blog fellow) Ajax label hack with's elegant blogger templates

Alvin S. C. Lee said...

Namaste Ramani,
I want to thank you for your wonderful work on the Neo template. I like it very much :)

I have taken the liberty to improve on a small section of the original code , as described below...

Problem: I noted that every time I use the navigator (in the 2nd column) to page for older posts (by clicking the "Older>>" link), the label title remained as "Recent Comments"... even though these archived posts had been written long ago.

Solution: The following code changes makes the label title reflect properly "Recent Posts", "Archived Posts" and "Oldest Posts" (please change "[" to "<" and "]" to ">" when installing back into the original code):

if (startIndex != 1) {
labeltitle.innerHTML = '[center][h2]Archived Posts[/h2][/center][hr/]';
disp = disp + '[a href="javascript:fetchNewerPosts(\'' + label + '\');"]<< Newer[/a]';

disp = disp + '      ';

if (json.feed.entry.length == numPosts) {
disp = disp + '[a href="javascript:fetchOlderPosts(\'' + label + '\');"]Older >>[/a]';
} else {labeltitle.innerHTML = '[center][h2]Oldest Posts[/h2][/center][hr/]';
disp = disp + '[/p]';
labelposts.innerHTML = disp;

Kislay Chaudhary said...

Nice Template Ramni

DarKAleX said...

Can u please tell me how to modify the neo template to make it like yours.If you want to email me at

Martin Hermosilla said...

How do you edit the XML templates? do you use a Visual Editor?

DarKAleX said...

Can u also tell me how to put peekabo post on the same page like ur You know it updates itself and if u click on blogger hacks or something it immediatly updates on the same page etc.I want to implement that technology onto my blog,
Thank you