This hack was originally developed by Ramani of Hackosphere, though for this tutorial I have further simplified the process so there are only two steps required:
- First you should make a back-up of your existing template by going to Template>Edit HTML in your Blogger dashboard and clicking the "download full template" link which is near the top of the page. It is always good practise to back-up your template before making any modifications at all, just in case you make a mistake and later need to use your old template again.
- Next you will need to find the following line of code in your blog's template:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
To find this line, you do not need to tick the expand widget templates box. This is the un-expanded tag used to display the label widget in your blog template. Highlight all of this line, and replace this with the following section of code:
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br />
<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>
- Then save your template and take a look at your new drop-down menu!
Once installed, you can then move the label widget to other areas of your blog in the layouts section of your dashboard, just like any other widget.
I hope this tutorial has been useful to you. Please feel free to leave your comments and suggestions below.
If you enjoyed this post, make sure you subscribe as an Reader!
0 comments:
Post a Comment