August 30, 2017

How to Make A Drop-down Menu for Labels in Blogger

Many Bloggers love to dispaly their Labels in drop-down style, the Blogger labels gadget is actually at the sidebar by default which display either a list format or cloud format, it depends on the style you choose when you are editing your blog. It does not include an option for configuring the display of Labels in a drop-down format. 
Today am going to show you how you can change your Labels to drop-down format by editing the HTML of your blog. It is very simple and it won't take you more that a minute to achieve it, follow the steps below. 
  • Login to your account.
  • Click the account drop-down menu and select "Layout."
  • If the "Labels" gadget is not already include in your layout, click the "Add a Gadget" link in the location where you want the categories menu to appear and then click the "+" icon beside "Labels."
  • Select "Template" from the left sidebar.
  • Click "Edit HTML.


  • Click the check box beside "Expand Widget Templates."
  • Press Ctrl+F to Find the codes below. 
"<b:widget id='Label1' locked='false' title='Labels' type='Label'/>"
  • Replace the above code with the codes below: 
<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <select onchange='location=this.options[this.selectedIndex].value;'> <option>Select a label</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>) </option> </b:loop> </select> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
  • Click "Save Template." 

Now check you blog and see the change. don't forget to share you experience by using the comment box below. 


Previous Post
Next Post

post written by:

0 comments: