Creating A Stylish Drop-Down Menu For Blogger Labels Or Categories

Creating A Stylish Drop-Down Menu For Blogger Labels Or Categories

In this post we will learn to create a stylish drop-down menu for the categories, just for example, you have over 100 posts on your blog live, but it is a bit harder for the visitors to browse over all of your site and search for the post exactly they need. So you need to create a parent category for your posts so that it will be easy to search. Blogger provides only list and cloud for labels or categories, but drop-down will will save much space of your blog/site and also you can see the drop-down menu just on the right side of this blog  which is titled as "Category Search". You can rename it as you wish. And if you want to view and compare the both then visit my test blog which I have created for you all to go through a practical visit to Beginners Blogger Tutorial. Both listed and dropdown-menu for labels you can see there.

First of all sign in to your blogger dashboard-layout-add a gadget (Sidebar left or right anywhere you want to show)-a new window will open with a list of gadgets you want to add-choose "Labels" and rename it as "ZZZZZZ" TO do the coding easily.Now, you have to edit the HTML of the theme of your blog to do so.Now go to the blogger dashboard, select "Theme" and then select "Edit HTML" as shown in the picture below marked with red border.

Creating A Stylish Drop-Down Menu For Blogger Labels Or Categories

A new page will open where you can see the HTML of your site/blog, click the left mouse button on the HTML box and press "Ctrl + F" at a time, a small search box will appear, search for "ZZZZZZ".

When you are searching for "ZZZZZZ" it will appear within a section like this code given below

<b:widget id='Label1' locked='false' title='ZZZZZZ' type='Label'/>

Now delete this line of code with "ZZZZZZ" and replace it with the entire lines of code given below in the box.

<b:widget id='Label1' locked='false' title='Categories' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/></h2> </b:if> <div class='widget-content'> <select style='width:200px' onchange='location=this.options[this.selectedIndex].value;'> <option>Click To Choose a Category</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>

Now hit the "Save Theme" button and just view your blog. Another important thing is that here in this code the width of the drop-down menu is 200 px (pixels), you can adjust it of your own. Also don't forget to back-up your theme before performing this action.