Adding Tabs and Drop Down Menus in Blogger

1. Log into Blogger
2. Create gadget code to customize your tabs and drop down menu
1. Copy the text below into a text program like Microsoft Notepad.
   The code is provided by Dana in her blog http://icanbuildablog.com In the article http://icanbuildablog.com/2015/08/how-to-add-a-drop-down-menu-to-a-blogger-blog-without-javascript/
   
   <ul id="icbabdrop">
       <li><a href=”LINK”>Tab Name 1</a></li>
         <ul>
             <li><a href=”LINK”>Drop Down Name 1.1</a></li>
             <li><a href=”LINK”'>Drop Down Name 1.2</a></li>
             <li><a href='”LINK”'>Drop Down Name 1.3</a></li>
          </ul>
        <li><a href=”LINK”>Tab Name 2</a></li>
          <ul>
              <li><a href=”LINK”>Drop Down Name 2.1</a></li>
             <li><a href=”LINK”>Drop Down Name 2.2</a></li>
           </ul>
        <li><a href=”LINK”>Tab Name 3</a></li>
   <ul>
             <li><a href=”LINK”>Drop Down Name 3.1</a></li>
           </ul>
        <li><a href=”LINK”>Tab Name 4</a></li>
     </ul>
   
   
2. Edit the text to meet your needs
1. You can add as many or as few tabs and dropdowns as you need
2. Change “Tab Name..” and “Drop Down Name ….” to meet your needs
3. Replace ‘LINK’ with the URL that you want to see when you click that menu item
   For example, if you want to see posts with a specific label replace LINK with that label's URL
   
4. If you would like your Menu item not to have an action remove the following lines
1. To the left of the name remove <a href=”LINK”>
2. To the right of the name remove </a></li>
5. Below is an example from my own blog:
   
   <li><a href='https://pinkpenglife.blogspot.com/'>Home</a></li>  (a tab with a link)
   <li>Hobbies (a tab with no link)
   <ul>  (two sub-menus with pointing to a page on the blog)                 
    <li><ahref="https://pinkpenglife.blogspot.com/p/under-construction.html">Gardening</a></li>
    <li><ahref="https://pinkpenglife.blogspot.com/p/under-construction.html'>Sewing</a></li>
   </ul>
   The above is a subset of the code to illustrate changes that can be made to the code
   
   
3. Create a Gadget on your blog  
1. On the left-hand side menu select Layout
2. On the blog lay-out sections Click “+ Add a Gadget”
3. On the pop-up menu select “HTML / Java Script”
4. On the pop-up window use “Title” to name you gadget. (I chose Drop Down Menus)
5. On the pop-up window to paste the code you created
6. Click “Save”
7. To show the tabs and dropdowns horizontally on your blog move the gadget to a “Cross-Column” section. In other words place it near the header to have it switch to a horizontal page.
8. NOTE - you are not done; if you look at your blog now you will see many tabs and no dropdowns
   
4. Create CSS code to customize your menu
1. Copy the text below into a text program like Microsoft Notepad.
   The code is provided by Dana in her blog http://icanbuildablog.com in the article http://icanbuildablog.com/2015/08/how-to-add-a-drop-down-menu-to-a-blogger-blog-without-javascript/
   
   /* --------------------------------------- START DROPDOWN MENU CSS BY icanbuildablog.com  --------------------------- */
   
   .tabs-inner .widget ul#icbabdrop {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
    border:none;
   }
   .tabs-inner .widget ul#icbabdrop li {
    font-size: 16px; /* <---------------- Font size for the menu */
    font-family: arial;        /* <---------------- Font style for the menu */
    color: #fff;                  /* <---------------- Font color for the menu */
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #transparent;  /* <---------------- background colour of the main menu */
    float:none;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
   }
   .tabs-inner .widget ul#icbabdrop li a {
   padding:0;
   font-family: arial;         /* <---------------- Font for the menu links */
   border:0;
   }
   .tabs-inner .widget ul#icbabdrop li:hover {
    background: #555;  /* <---------------- background colour when you roll over a menu title */
    color: #fff;                /* <---------------- font colour when you roll over a menu title */
   }
   .tabs-inner .widget ul#icbabdrop li:hover a {
    background: transparent;
    color: #fff;               /* <---------------- font colour when you roll over a menu title link */
   }
   .tabs-inner .widget ul#icbabdrop li ul {
    z-index:1000;
    border:none;
    padding: 0;
    position: absolute;
    top: 45px;
    left: 30px;
    float:none;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
   }
   .tabs-inner .widget ul#icbabdrop li ul li {
    background: #555;         /* <---------------- background colour of the sub menu items */
    display: block;
    color: #fff;                      /* <----------------  font colour of the sub menu items */
    text-shadow: 0 -1px 0 #000;
   }
   ul#icbabdrop li ul li a{
    color:#fff                      /* <---------------- link colour of the sub menu items */
   }
   .tabs-inner .widget ul#icbabdrop li ul li:hover {
    background: #666;       /* <---------------- background colour when you roll over sub menu items */
   }
   .tabs-inner .widget ul#icbabdrop li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
   }
   
   /* -------------------------------- END DROPDOWN MENU CSS BY icanbuildablog.com  --------------------------------- */
   
2. Edit font colors and menu colors to match your template
1. Look for comments that start with  /* ←  this indicates where to make color changes
2. NOTE: This code uses 3 characters for colors meaning white is #fff instead of #ffffff
3. You can use the advanced customization tool in blogger to find the codes for the colors
   
5. Add CSS code to activate your menu
1. On the Blogger site left hand menu click “Theme”
2. Below the window showing “Live on Blog” click on the Customize button
3. A new window appears. On the top left hand menu click “Advanced”
4. A scrolling menu appears, scroll down to the bottom and click “Add CSS”
5. Paste your customized CSS code in the blank window
6. On the top right hand side click the Apply to Blog button
7. To the left of that button click on the << Back to Blogger link

6. Make your dropdown visible
   Many blogger templates will cut off your dropdown menu, don’t worry it’s easy to fix.
   A very knowledgeable blogger posted instructions on https://goodtipsandmore.blogspot.com in the article https://goodtipsandmore.blogspot.com/2011/11/drop-down-menu-in-blogger-template.html
   
1. On the Blogger site left hand menu click “Theme”
2. Below the window showing “Live on Blog” click on the Edit HTML button
3. Click on the blank space in the HTML body
4. On your keyboard simultaneously press the keys [Ctrl] and [F]
5. A small search window will appear on the top right hand side of the HTML text
6. In that search window text box, type  .tabs-outer { and press enter
1. The first line that appears highlighted should be underneath text that looks like
   /* Tabs
   ----------------------------------------------- */
   
2. Look for the text below
   .tabs-outer {
    overflow: hidden;
    position: relative;
   
7. Change overflow: hidden;  to overflow: visible;
   
1. The new text should look like this:
   .tabs-outer {
    overflow: visible;  ←--- This is what was changed
    position: relative
   
8. Press the Save Theme button
   
7. Congratulations, you are done.
1. NOTE - the blogs I referenced have pictures and instructions if you get lost along the way
2. If you want to change the tabs or dropdowns
1. Go to the blogger menu and choose Layout
2. Find your Drop Down Menu Gadget and click the Edit link
3. You can change that window directly or paste new code like step 2 and 3
   
3. If you want to change the menu colors
1. On the Blogger site left hand menu click “Theme”
2. Below the window showing “Live on Blog” click on the Edit HTML button
3. Click on the blank space in the HTML body
4. On your keyboard simultaneously press the keys [Ctrl] and [F]
5. A small search window will appear on the top right hand side of the HTML text
6. In that search window text box, type  START DROPDOWN MENU CSS and  press enter
1. You will see the code from step 4, make the desired color changes
2. Press the Save Theme button