Show Hidden Buttons in Blogger Editor Toolbar
Preface
Continuing from the previous article, we have already hidden the right sidebar of the Blogger editorBut when there is enough space, the toolbar still produces a collapsed split bar.
This article aims to solve this problem.
Analysis
Using the F12 developer tools, analyze the HTML content of the toolbar
It is found that within this toolbar, some buttons are hidden. That is, they exist in the HTML content, but are not displayed on the page.
Developing with GPT
Because of the text input word limit of GPT, we need to save the HTML content of the toolbar as a file and then upload it to GPT.
HTML Environment
I have a toolbar. The HTML content is in the file
The toolbar contains some buttons
The toolbar contains some buttons
Some buttons are displayed, some are hidden
Now I need to set all buttons under the toolbar to be displayed
Require to use CSS for setting page elements
Require to use CSS for setting page elements
Buttons may be dynamic, so do not specify the button's class; instead, analyze based on the HTML hierarchy between the button and the toolbar.
Sending the above requirements to GPT, we get
.Qy5T6b.O3LMFb.QduVPe * {
/* Force the element to display. display: initial tries to restore the element's default display type, usually safer than forcing display: block. */
display: initial !important;
/* Ensure the element is visible (override visibility: hidden) */
visibility: visible !important;
/* Ensure the element is opaque (override opacity: 0) */
opacity: 1 !important;
/* Remove filter effects that may cause the element to be grayed out or hidden */
filter: none !important;
}
Practice and Debugging
Set the result just given by GPT in Stylebot, and we get
Continue with a simple analysis in F12 mode.
You can see that dropdown menu options, description text, etc. are all displayed.
What would the effect be if we limit the display to only the button level?Asked GPT about CSS syntax, change it to this
.Qy5T6b.O3LMFb.QduVPe > * > * {
display: initial !important;
visibility: visible !important;
opacity: 1 !important;
filter: none !important;
}
The effect has improved; there is no extra text or dropdown menu items, but the arrangement is a bit off.
Found that the original display method of these button elements is
display: flex;
So we continue to optimize to
.Qy5T6b.O3LMFb.QduVPe > * > * {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
filter: none !important;
}
Now it's normal.
Github
========
Postscript
In this (2025-11-13) development process with GPT, I used
At first, my idea was to "migrate" the buttons in the collapsed split bar to the main toolbar. I developed this with GPT for a while and got an initial effect, but the position was wrong and needed optimization.
During the optimization analysis, I found that the main toolbar actually contains all the buttons, but some are hidden. Therefore, the "migration" button plan was overturned.
========
Posts
