Recently I've been... attempting... to spice up my blog design and add in some new features and one of my new features is a drop down label menu. Let me show you how to do it!
Note: This only works in Blogger.
Step One: Firstly add in the labels widget into your blog. Start by logging into your account and then go to your dashboard, select your blog, go to the 'Layout' section which is in the left sidebar and then click on 'Add A Gadget' and the 'Labels' gadget wherever you want it to be, I want it to be in my sidebar so I am adding it there!
This was a different type of post in which I am normally used to posting, if you like these sorts of helpful, how-to posts let me know so I can create more!
Step Two: Look at the left sidebar and find 'Template' which should be directly underneath the 'Layout' tab. Click on 'Edit HTML'. Now click anywhere inside your template editor where all the HTML codes are and then press Ctrl + F if you are using a Windows computer, if you are using a Mac then do Command + F, search for Label1 in your template. You will now see a line of code which should look like the code below in bold.
<b:widget id='Label1' locked='false' title= 'Labels' type= 'Label'/>
Step Three: Replace that code with the code below in bold.
<b:widget id='Label1' locked='false' title='Search With The Label...' type='Label'>
<b:includable id='main'>
<b: if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%'onchange='location=this.options[this.selectedIndex].value;'>
<option>Pick A Label</option>
<b:loop values= 'data:labels' var='label'>
<option expr:value= '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>
Customization
If you'd like you could easily customize your drop down label widget!
- You could replace the RED colour 'Search With The Label...' with your desired title for the drop down menu.
- You could change the width of the the drop down menu by changing the PURPLE colour that says 'width:100%' with whatever percentage you want the width to be.
- You could change the title of the drop down menu which is in the colour GREEN which says 'Pick A Label' with the title of the drop down menu instead.
- If you do not want to display the number of posts go under the label category you can remove (<data:label.count/>) which is in ORANGE.
So my final code for me is going to be:
<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Search With The Label...</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop> </select> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>
I hoped this helped any of you! If you enjoy reading these posts, let me know so I can post more of these helpful 'how to's'!
