Saturday, September 26, 2020
Home Blogging Tips & Tweaks Simple Drop Down Menu Widget With Go Button For Blogger

Simple Drop Down Menu Widget With Go Button For Blogger

One of the best ways to reduce a blog’s bounce rate is to create internal links which when clicked on, redirects users to other posts or pages on the same blog. Simply adding navigational menu doesn’t completely get the work done because sometimes you might want to link to a specific post or maybe just an announcement on the trending topics on your blog. There are so many ways to get this done but for the sake of space, it will be better to have a widget which will house all the links just in a specific part of your blog so that the blog’s visitors can access all the links and topics by clicking on a drop down button to bring them up.

So for today’s tutorial, I am going to be showing you guys how to add a drop down menu widget by the side of your blogger page which has a Go button so that when visitors select an option, they can visit it by clicking on the go button just like we do when entering a URL in our browser’s address bar. To add this widget to your blog’s sidebar, follow the steps below;

  • Once logged into your Blogger Dashboard, go to Layout >>> Add a Gadget.
  • From the pop-up page that will appear, scroll down and select HTML/JavaScript.
  • Copy the below HTML code and paste inside the HTML/JavaScript box.
<form name="jump">

<select name="menu">

<option value="URL link for TITLE 1">TITLE 1</option>

<option value="URL link for TITLE 2">TITLE 2</option>

<option value="URL link for TITLE 3">TITLE 3</option>

<option value="URL link for TITLE 4">TITLE 4</option>

</select>

<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

</form>

CHANGES TO MAKE:

There are basically two changes to make in the above code for it to function properly as you want it to. All you need to do is;

  • Replace URL link for TITLE 1, 2, 3, 4 with the respective URL links of the TITLE(s) 1, 2, 3, and 4.
  • Next replace TITLE(s) 1, 2, 3, and 4 with the titles of the of the posts or page you want to redirect your blog visitors to.

The value on the button which reads GO can also be changed to whatever you want.

Note: The number of links that can be displayed in the drop down menu widget is not limited to four. I just left it at four because of time but you can increase it to whatever number you so desire.

  • Finally click on Save and you are done.

With that done, you have simply added a drop down menu widget by the side of your Blogger page.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments