The Coding Paparazzi

On many sites, the Google Friend Connect widget (and its counterpart the Followers gadget for Blogger) will not appear at all or rarely on Firefox.  A solution was published by Google (see "Why is my Google Friend Connect rarely displaying on my blog???" but it seems appropriate only for a group of sites using Prototype.js and remains without effect on other sites.

This article proposes another solution for this display problem of Google Friend Connect and of the Followers gadget on Firefox for those for whom the solution offered by Google is not appropriate.  It has been tested successfully with different types of templates - including those produced by Artisteer - and for sites hosted on Blogger or not.  A quick way for testing if this solution will be suitable for your site - without having to first modify it - is also provided along the way.

In parts 1 and 2 of this article on the sub-subMenus for Blogger with Artisteer (see "Sub-SubMenu for Blogger with Artisteer, part 1" and « Sub-SubMenu for Blogger with Artisteer, part 2 ») , we have seen how to extend the number of levels of sub menu items for the models ( "templates") created by Artisteer (version 2.3) for Blogger.  In this part 3, we will improve the visual appearance of these menus by adjusting their width ( "width ") to the size of the option titles they contain.  Note that even if you do not want to use multiple levels of submenus and stay in one, this visual adaptation may still be interesting for you.  It may also be for other users Artisteer using other types of template for Blogger, especially pure HTML templates.  Such alterations will also itself the subject of a future article in order 'clarify its use.

The revised artDisplayTopMenu() function that we have seen in the first part of this article (see "Sub-SubMenu for Blogger with Artisteer, part 1") is interesting but it still has its flaws: firstly, it is not recursive, so it cannot give us an unlimited number of levels: if you need access to a fourth level, you'll have to modify it. Also, it doesn't include any control error; for example if you make a mistake about the order of tags "-", "-+" and "-+=". However, these are moot points in comparaison to its main problem: the difficulty that we'll have to manage the long series of options for the menu by using the standard configuration dialog of Blogger. In effect, if you need a second or a third level, for your menus, it's because you have tens or even hundreds of options to put there. For example, although the demonstration site Sub-SubMenu for Blogger with Artisteer contains only a tiny fraction of a menu that I'm building for another blog, manage it already requires a very long long series of clicks for inserting a new option or moving them around:

The final menu will be tens of times longer than that, with around one hundred options for the french version and the same for the engligh version; making its management prohibitively time consuming. In this part 2 of this article about sub-menus, Blogger and Artisteer, we will see how to solve this problem.

A question that often comes back on sites about Blogger is how to encode (or "parse") the four special characters " <> & that will often be found in the JavaScript code for Ads like Google Adsense, AdBrite, Amazon, etc... in order to make them acceptable for the Blogger's XML storage tool. This article shows a new way easier and faster than the usual recommended way to accommodate these special characters for their storage in an XML document such as the one used with Blogger's XML templating tool.

Currently, we can get only one level of submenu with the standard templates for Blogger created with Artisteer, version 2.3;  Hopefully, the possibility of having second and third levels (sub-subMenu and sub-sub-subMenu) will be made in a future release of Artisteer but now, we are reduced to the obligation of doing the required modifications to the template ourselves if we want those. This is the object of this article and it can be made pretty well as you can see from the following figure illustrating an example of sub-menus expanding on three levels: