Make any Blogger widget adopt the drop-down style menu of "Archive" and "Labels" in new Blogger themes

Here is a simple way to make all of your Blogger sidebar widgets adopt your blog theme's new standard "drop down" widget style.

This will enclose your widget in the same "click to open" dropdown style that the Archive and Label widgets natively use in Blogger's newer Contempo, Soho, Emporio, and Notable themes. This has been a highly desired change, and you can easily apply the style to any widget with a small code change.

Modified Blogger widget in Emporio theme.
Left: standard widget with full content displayed, no drop-down styling.
Right: Same widget now using the theme's standard dropdown styling. 

Background

One frustration you may have experienced when switching to these newer (2017) themes is that your sidebar widgets do not fit the style of the new theme. The Archive and Label widgets were redesigned to smoothly match with these new themes with a sleek dropdown menu look that displays the widget title and expands to show widget content when clicked by users.

But this meant that other or custom widgets added to the new "pop-out" sidebar ended up looking ugly or out of place. This is true even for other common Blogger-made widgets like adding plain text, images, link lists, or of course especially the custom HTML/Javascript widget.

Luckily, we can apply the same basic native style to any widget, so that any can adopt this drop-down style and blend well with the rest of the theme. Since we're only applying Blogger's own native code to the widgets instead of picky CSS code, this should work no matter what customization you've made to the theme design, and will look professional.

How to apply the dropdown style to any widget

1. Find your widget

Go to the template editor (Theme -> Edit HTML) and from the "Jump to widget" drop-down menu find your widget.

2. Locate the line to add code

Find the end of the widget-settings code. It looks like this.

 </b:widget-settings>

You may need to expand the code with the side-arrow or the three-dots button.

3. Add the code

Just below the </b:widget-settings> code, paste the following:

 <b:includable id='main' var='this'>
          <details class='collapsible extendable'>       
            <b:with value='true' var='renderAsDetails'>
              <b:include name='super.main'/>
            </b:with>
          </details>
        </b:includable>

4. Replace the original includable

Your widget already had a "main" includable ID. But after pasting the code above, now there are two, and if you save you'll get a template error. Simply find the original main, which should be just below your newly-pasted code. It looks like this:

<b:includable id='main'>

And change it to a different ID, such as:

<b:includable id='main2'>

5. Done!

So, for comparison, the overall widget code for my plain text widget example in the image above will look like this:

<b:widget id='Text1' locked='false' title='Widget Test' type='Text' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look.</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<details class='collapsible extendable'><b:with value='true' var='renderAsDetails'><b:include name='super.main'/></b:with></details>
</b:includable>
<b:includable id='main2'>
<b:include name='widget-title'/>
<div class='widget-content'><data:content/></div>
</b:includable></b:widget>

Hopefully this will help your blog look smoother, more professional, and still utilize widgets in the sidebar. And since this is done per-widget, you can still choose to have some display their content not hidden behind the dropdown arrow.