How to create simple | stylish drop down navigation menu in blogger widget WITH ( HTML/CSS)

 Following an email request, I will explain how to create a drop-down menu with the Labels gadget . The Blogger labels gadget is presented as a vertical list of links or as a cloud.

Turn the Labels Gadget into a drop-down menu on Blogger

   

To see an example of the wording gadget transformed into a drop-down menu click HERE

Here's how to turn the Labels Gadget into a drop-down menu on Blogger :

1. Go to your Blogger dashboard.
2. Go to Template and click on " Edit HTML code "
3. Replace the code below (Ctrl + F and type Label1 to help you or the name given to the labels gadget ):

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

Up to

</ b: widget>

4. Replace the previous line with the following code:

<b: widget id = 'Label99' 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'>

<br/> <select onchange = 'location = this.options [this.selectedIndex] .value;' style = 'width: 200px'> <option> Labels </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' />

- Note : The text in Blue is the text that will be displayed on the drop-down list. You can modify it with Labels, Categories, etc ...

And save your model.

Create a drop-down menu with grouping items on Blogger

   

 

According to your possibilities you can create real MENU on Blogger more or less sophisticated.

Create a drop-down menu with grouping items on Blogger

Reminder, via links and labels you can show your keywords, this may be sufficient for some blogs.

The basics for beginners : Notion of link

When editing an article or a page, it is easy to make a link using the "Associate" menu

Link in an article on Blogger

This link points to an article or page for which you have memorized the URL.

In HTML mode , here is the HTML code:

Single link:

<a href="link address"> link title </a>

To obtain : click HERE

you need this code: click <a href="https://techno-ahmad.blogspot.com"> here </a>

Link opening in a new window

<a href="link address" target="blank"> link title </a>

To obtain : click there and a new window opens,

you need this code: click <a href="https://techno-ahmad.blogspot.com" target="_blank"> there </a>

and a new window s' open

1- Design a simple "classic" Menu

 

You must have the necessary skills for this realization which requires adapting the code or, at least, respecting the instructions.

PRINCIPLE :

Go to " Page Layout " and, below the header of your blog, click on " Add A Gadget ".

Choose the " HTML / JavaScript " gadget , paste the code from the menu in the window that opens and click "Save".

 

Here is an example of a relatively simple Drop-down List Menu with Item Grouping:

See example Drop-down menu with Item Grouping on Blogger :

Create a drop-down menu with grouping items on Blogger

Code to copy / paste :

-------------------------------------------------- -----------------------------------------

<script language = "JavaScript">

function ChangeUrl (form)

   {

   if ( form.ListUrl.selectedIndex ! = 0)

      {

     var url;

     url = form.ListUrl.options [form.ListUrl.selectedIndex] .value;

     window.open (url, '_ blank');

       }

   }

</script>

<FORM>

<SELECT NAME = "ListUrl" SIZE = 1 onChange = "ChangeUrl (this.form)">

<OPTION SELECTED VALUE = ""> -Links drop-down menu - </option>

<optgroup label = " Group 1 ">

  <option value = " Link 1 "> Title1 </option>

  <option value = " Link 2 "> Title 2 </option>

</optgroup>

<optgroup label = " Group 2 ">

  <option value = " Link 3 "> Title 3 </option>

  <option value = " Link 4 "> Title 4 </option> 

<option value = " Link 5 "> Title 5 </option>

</optgroup>

<optgroup label = " Group 3 ">

<option value = " Link 6 "> Title 6 </option>

  <option value = " Link 7 "> Title 7 </option> 

</optgroup>

</SELECT>

</FORM>

-------------------------------------------------- -------------------------------------------------- ---

Configuration :

This HTML code above is to be copied as is : it will only be necessary to change what is in color:

The title of the menu : Drop-down menu of links 

Groups : Group 1  

The links :  link 1 

The title of the link : Title 1  

Drop Down From Links : This is the title to display on the lite, you can modify it with a title of your choice. - Link 1, Link2, Link 3 and Link 4  are the addresses (URLs) of the pages to which the entries Title1, Title 2, Title 3 and Title 4 will point  

➯You must make the necessary changes.

How to add this Dropdown Menu in Blogger

Copy the HTML code from the drop-down list of your choice (without or with grouping of elements) 

And go to: " Page Layout "> " Add Gadget "> " HTML / JavaScript "

Paste the code in the small window that opens, modify it 

And finally click on "Save".

If this article like you so please comment !