How to show labels widget expanded instead of collapsed in new Blogger theme 2017?

Google released new themes for Blogger in 2017 and they are great! If you haven't seen them, check them out here - Check out new responsive Blogger themes released by Google! They are modern and elegant design.  I have already blogged on some posts related to the new Blogger themes which you can find from this link - Blogger Themes 2017.

Now, one thing I wanted to change in the new Blogger theme I have applied on this site was to display labels expanded. Yes, the new Blogger theme show all the labels collapsed. So, a user has to click on the title or drop down to see first few labels and then click on "Show More" to see all the labels selected during the widget setup. I wanted to display at least the first few labels at least.


I posted a question on Blogger Help Forums (Topic Link-How to show labels expanded instead of collapsed in the new Blogger theme 2017 (Emporio) ?) and someone was kind enough to let me know how to do it. So, I wanted to share the knowledge shared to me if someone wants to do the same thing.

How to show labels widget expanded instead of collapsed in the new Blogger theme 2017 ?

Watch this video tutorial or read on:


 

Add a Label Gadget/Widget if not already added

• Login to Blogger Dashboard
• Add a Label gadget / widget if not already added
• Setup the label widget to display all labels or just a few selected labels
• Set a title if desired.
• Save and place the widget wherever desired.
• Save arrangement

Edit Blogger HTML code

• Go to Theme
• Backup Theme
• Now click on EDIT HTML
• Click on "Jump To Widget" and select the Label widget
• The Label widget will have code something like this-

<b:widget id='Label3' locked='false' title='TITLE SET FOR THE WIDGET' type='Label' visible='true'>

• In the code for the Label Widget, look for "Main" or "collapsible extendable".

<b:includable id='main' var='this'>

<details class='collapsible extendable'>

• Expand this by clicking on the black arrow on the left
• Now look for <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
• Remove-     cond='data:view.isLabelSearch' from the above line

Before:

<details class='collapsible extendable'>
            <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>

After:

<details class='collapsible extendable'>
            <b:attr name='open' value='open'/>

• Save Theme

Now the Label widget will display the first few labels expanded with a "Show More" link. On clicking "Show More" the rest of the labels will be displayed.