Book Blogging Newbie: Add a Responsive Drop Down Menu to Blogger


Step by Step Tutorial: How to Add a Responsive Menu to Blogger using CSS Menu Maker

If you read part one, you know I have very little coding skills and this tutorial is for people like me! If you don't have these skills, you will likely have to purchase a service. If you buy a premade template, you can buy ones that already have responsive drop down menus. If you don't have such a template, here is what you can do. I have found no other way, personally! (If you have, please link it in the comments!)

CSS Menu Maker

1) Go to cssmenumaker.com and purchase a yearly online account ($14 USD). This is the best value I have found.


2) Once you've gotten set up and logged in, it's time to create your menu. First browse the responsive menu templates. 


3) Once you've chosen a template, customize it with different colours and your own menu items. (Tip: Make sure to hit enter after typing in your Menu item and link under "Edit Item." If you click away, what you've input will disappear).


4) When you've finished your customization, save and download.  Inside your file you will find three items: the HTML, the JQuery, and the CSS. 


5) Before you begin making any changes to your blog, navigate to the "Template" page and hit "Backup/Restore." Always do this before you make any changes to your blog. Once you've done this, hit "Edit HTML."


Let's add a JQuery reference to our html. We must add this so that when the code for our menu references JQuery, there is something there for it to refer to! 
6) Add the following code below the < head > tag in your html.


Now let's add some CSS! This is what makes the menu look pretty. 
7) Go back to your menu online. Click "CSS" then highlight and copy the code that will appear below.


8) Go back to Blogger. Go to "Template" and hit "Customize."



8) Hit "Advanced," then "Add CSS." In the text box below "Add custom CSS," paste the code you copied. 


Let's add the HTML! This is the skeleton of your menu.
9) Now go back to your menu online and hit "HTML." Copy the code that will appear below.


10) Go back to Blogger. Hit "Layout," then "Add a Gadget." Scroll through the list of gadgets until you find "HTML/JavaScript." Select this option. In the window that opens, paste the code that you copied. Do not title this gadget. If you do, the name will be visible on your blog. Hit "Save."  The gadget will be called "HTML/JavaScript" in your layout. 


11) Wherever you move this gadget, that's where your menu will appear on your blog. I have mine located above my header. Therefore, when someone visits my blog, that's where they will find the menu!


Now we will add the JQuery. This is the part I had the most trouble figuring out! JQuery is what makes the menu responsive!
12) Open the folder you downloaded from cssmenumaker.com. It will likely be in your downloads titled "cssmenu." Once you've done that, open the file titled script.js. This will open in your web browser. Highlight the code and copy it.


13) Again, go back to Blogger. Hit "Layout," then "Add a Gadget." Scroll through the list of gadgets until you find "HTML/JavaScript." Select this option.


14) We need to tell the gadget what it's looking at. To do so we must add some tags. Add the following code to the gadget.


15) Once you've done this, replace the "..." with the text you have copied from your file titled script.js. Hit "Save." This gadget will also be titled "HTML/JavaScript." Do not title this gadget either because, again, the title will appear on your blog. The location of this gadget does not matter. It won't be visible on your blog. Hit "Save Arrangement." 

Now, check to make sure everything is working properly. Open your blog page. Is your menu where you want it? If not, move it. Are the drop downs functioning? Do all your links work? 
Then try accessing your blog on a mobile device. How does the menu appear? How does it look?

This is how it should look (of course, it will vary by menu template, but you get the idea). 
Desktop:

Mobile:


There you have it! A responsive drop down menu in Blogger! I hope this was helpful to someone somewhere. 
**Update: A week after I wrote this, Drop Down Menu Generator enabled responsive menus... And theirs are way easier to install. #THESTRUGGLEISREAL** 

If you have any comments or questions, please post them in the comment section below! Like I said, I am not skilled at coding, but I'll try my best to answer any questions. If you've found a different and/or better way to add a responsive drop down menu to Blogger, let me know!

No comments