Notes on General Blogger Customization (Theme-Independent)

Quick Info

Pages Gadget vs Link List Gadget

For Blogger menu for this blog, I found that the Pages gadget does not reliably preserve custom menu labels. When a page linked via the Pages gadget was updated or republished, at least at times, if not all times, Blogger automatically reset the menu entry text to the page title, overriding any custom label previously set. I use custom labels that are shorter than the longish page titles for this blog's menu. So this auto reset by Blogger of these custom labels was a problem.

To avoid this issue, I switched to using a Link List gadget for this blog's menu. That is not altered when the linked page is edited or saved.

Menu Spacing Workaround Using a Dummy Entry

Blogger menus created using either the Pages or Link List gadgets can render menu items with very little vertical spacing, making it difficult to visually distinguish between multi-line and single-line menu entries.

Since Blogger does not provide a built-in option to control vertical spacing between menu items, I used a simple workaround: adding a dummy menu entry with the title set to   and the URL set to /.

This creates a visible vertical gap between menu items without requiring any theme-specific CSS changes. The link is not broken; / resolves to the blog home page. The clickable area is minimal, and even if clicked, the behavior is benign.

This approach avoids reliance on undocumented theme CSS classes and remains stable across themes and future theme changes.

Accessibility note:
Using a dummy menu entry with a non-descriptive title (such as  ) may not be ideal for screen readers or keyboard navigation, as it introduces a focusable item without meaningful text. In this case, the impact is limited because the entry is visually minimal and points to the blog home page, but it is still a trade-off made in the absence of a built-in spacing control in Blogger.

==========================================================

==========================================================

Details

Related ChatGPT (CG) chat: MERN Stack Training & Dev

Me: One odd issue I am facing with Blogger is that update of a page that is on the Blogger menu, leads to the menu entry text change to page title.

CG: ...

👉 Use a Link List gadget for important menu items

Keep:

• Page title → fully descriptive

• Menu label → exactly what you want

• Zero surprises on updates

...

Me: Are there any downsides with Links gadget as compared to Pages gadget

[CG response indicated that for my case, there would not be significant downsides.]

-----

Me: The blog menu links are too close vertically making it hard to distinguish where a two line menu entry ends and where a single line menu entry starts after that. This is common to Pages as well as Links gadgets. A workaround I am using is a dummy entry with   as the title and / as the URL. That works well. What's ur view

[CG agreed in general but gave a CSS change suggestion.]

...

Me: .PageList li,

.LinkList li {

  margin-bottom: 0.6em;

}

will be specific to a theme, won't it? 

I mean, I don't think it is clearly documented that above CSS classes are used by Blogger themes for these gadgets.

...

Me: Regarding broken link point for dummy entry - it is not broken. It simply takes user to blog home page. For mouse usage, the pointer changes to hand symbol only when mouse is positioned exactly at the space that   creates. Even that is not an issue as click there takes to blog home page.

...

Me: I created an alternative Links List gadget (manually as I guess auto create from Pages gadget would be non trivial effort).

I have disabled Pages gadget. I wanted to comment why I disabled it. So I used hack of changing its title to: Disabled as it updates title on page/post save; Using Link list instead

Any other easy way to comment?

[CG was not able to provide any other way to easily comment this issue.]

-----------