How to create posts labels drop-down menu in blogger

In my last article, I talked about how to grow your salary as an employee. In today’s blog post, I’m going to talk about creating blogspot and Blogger posts labels drop down navigation menu.

In BlogSpot or blogger’s blog, it is almost impossible to create a drop-down menu for your post label unlike it is quite easy in Wordpress. 
In most cases, even though you take advantage of the blogger’s label java script and html gadget to make labels (categories) for your blog post, there are not always possible to be arranged in drop-down navigation menu, but are often directly displays in either horizontal, list or grid functions. 

However, this often makes bloggers posts labels to become cluttered on the sidebar especially if you have a long list of labels (also know as called categories in wordpress), and could also contributed to site slow scrolling and unprofessional sidebar looking.

Most bloggers including me in particular prefers using a drop–down list to present their long list posts labels that equally minimizes clutter and also enables information to be displays neatly in a dedicated drop-down navigation menu.

Google Blogger however offers a gadget for drop-down menu options for archives posts, but quite unfortunate however that same drop-down option is not available for posts labels

In this tutorial therefore, I’m going to help you solve blogspot and blogger’s drop-down navigation menu's problem, by providing you with a simple method you can use to turn your regular cluttered posts labels lists into a drop-down navigation menu that offers you a neatly, concise and professional drop-down menu for your blogspot or blogger sidebar

The customization process is such that can be achieved with just a simple step, with minor adjustment into your Blogspot or Blogger template codes.

Creating Blogspot/Blogger drop down menu for posts labels.

Here are step by step guidelines of creating a drop-down menu for your blogspot or blogger posts labels. 

1.     First, you’ll need to make a complete back up of your existing template. This is not necessarily mandatory but worth doing in order to ensure restoring your content and working template should in case you make a mistake.

To make a back up of your current template, simple log into your Blogspot or Blogger Dashboard>>Layout>>Edit HTML>> then click on the top right of the page that says "Backup/Restore". See image below.

A pop up page will appear with another instruction that says  “Download Full Template”, which offers you the privilege to download you full Blogger template as an XML file into your local computer. Ensure you save the file in location you can easily locate later if need arises. See the both image below.

As soon as you’ve made a complete back up of your existing template and ensure the file is saved, you can then proceed on the process of creating post labels drop-down navigation menu for your sidebar, which is about integrating certain codes I’ll provide you below into your template codes.

Note: to attain this goal, you must ensure that you already have a “LABELS” widget/gadget present in your Blogspot or blogger template. If you do not have Label widget/gadget already in your template, simple go to your Layout>>Add a Gadget Link>> scroll down and Add a Label gadget in a pop up window list of other gadgets.

2.     Now, to provide certain adjustment code for the post labels drop-down menu to work, from your dashboard click on Layout>>Edit HTML. A template codes window will open. So, you are going to search for a particular code. Therefore, place your cursor in any of those pop up template codes by a click of mouse. In your keyboard, press ctrl F for a search box to open. In the opened search box, copy and paste this codes:  

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

Search for the copied and pasted code by pressing your Keyboard Enter Key. Now, when you find the codes right inside your template codes, simply highlight it, delete it, and replace it with the following codes:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
 <div class='widget-content'>

<br />
<select 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'><>

   <b:include name='quickedit'/>

Thereafter, click on “preview template” to see the preview of the changes you’ve made to your template. If it works, you can then proceed to save the adjustment to your template by clicking “save template”. 

Adjusting your posts labels drop-down menu.

Hence your posts labels drop-down navigation menu is successfully created, however you can make an adjustment to this widget by moving the widget to a different position of your choice like sidebar, footer or even header page tab through Blogger Dashboard>>Layout>>then move widget to preferred page element section of your blog by dragging and dropping.

You can as well edit the properties of the widget to change the order in which the widget is displayed by clicking on “edit” link of the Label widget. You can choose to display your label in alphabetical order, or by their frequency (label link with highest number of posts in the descending manner).

You can also choose to remove the label widget entirely from your layout dashboard. Remember, if you remove it, it means, it get the drop-down menu next time, you’ll have to follow the stated customization processes afresh in order to get it drop-down again.

To make changes the phrase “Click to Choose a Category” as appeared in the above codes, which would be visible when the drop down menu is embedded and created successfully, you’ll need to go to the Layout>>Edit HTML page of your blogspot or blogger dashboard to search for the “Click to Choose a Category’ through crlt + F as earlier explained; and make sure not to alter any close and surrounding codes.

Upon finding the “Click to Choose a Category” you can then alter the words to something more preferable and suitable to you. And, let assume you what to change from “Click to Choose a Category” to “Select Post Label To View”. For clarity purpose, here is the simple code line where the adjustment can be made.

<select onchange='location=this.options[this.selectedIndex].value;'>
   <option>Select Post Label To View</option>
   <b:loop values='data:labels' var='label'>

This therefore means that you are searching for “Click to Choose a Category” right inside your Edit HTML in order to integrate “Select Post Label To View”, of which thereafter, you simple save the change.

Finally, I hope you have found this blogging tips useful for solving the problem associating with creating blogspot and blogger posts labels drop-down navigation menu, and that this information and detail explanation has also help you create your bloggers posts labels without stress? If truly, then, I’ll love to your comment using the moment box below. 

To your posts label drop-down navigation menus success.

No comments:

Post a Comment

Any promoted links in comments will be deleted. Only relevance links in comment (if at all) will be approved.