Jul 18, 2015

How To Create a Drop Down Menu In Blogger

data:blog.title
Blogger is a blog-publishing service that allows multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. Generally, the blogs are hosted by Google at a subdomain of blogspot.com. Blogs can also be hosted in the registered custom domain of the blogger (like www.example.com). So blogspot.com domain publishings will be redirected to the custom domain. A user can have up to 100 blogs per account.
Blogger allows its users to choose from various templates and then customize them. Users may also choose to create their own templates using CSS and HTML so by using these programmings a blogger can change to their templates any time like as menu bar, side bar, nav bar, etc
This post is created for helping you how to create a Drop Menu in blogger. For Create a drop menu in blogger Follow the steps given below in this article>>>


ALSO READ : 35+ INTERACTIVE SITES TO LEARN PROGRAMMING


How To Create a Drop Down Menu In Blogger?

A drop down menu is needed when you have too much content on your blog or you love keeping things organized. To add a drop down menu to your blogger blogs do this:
  1. Go To Blogger > Layout > Add a Gadget
  2. Select a HTML/JavaScript Widget just under the header and paste the following code inside it.


<div id='TFnavbar'> 
      <ul id='TFnav'> 
        <li> 
          <a href='#'>Home</a> 
        </li> 
        <li> 
          <a href='#'>About</a> 
       </li> 
        <li> 
          <a href='#'>Contact</a> 
        </li> 
  <li> 
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
              </ul>
 
        </li>
      </ul> 
    </div>
 Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before </li>
To add another tab just paste this code above </ul>
<li> 
          <a href='#'>Tab Name</a> 
        </li> 
       
    3.   Now Go to Design > Edit HTML
    4.   Backup your template and search for
]]></b:skin>
    5.   Just above it paste the code below,


/*----- TF Drop Down Menu ----*/

#TFnavbar { 
    background: #060505
    width: 960px; 
    color: #FFF; 
        margin: 0px; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}

#TFnav { 
    margin: 0; 
    padding: 0; 

#TFnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 

#TFnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
        border-left:1px solid #333
        border-right:1px solid #333
        height:35px; 

#TFnav li a, #TFnav li a:link, #TFnav li a:visited { 
    color: #FFF
    display: block; 
   font:normal 12px Helvetica, sans-serif;    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
        

#TFnav li a:hover, #TFnav li a:active { 
    background: #BF0100
    color: #FFF
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 10px 12px; 
        
    
        
}
#TFnav li { 
    float: left; 
    padding: 0; 

#TFnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 

#TFnav li ul a { 
    width: 140px; 

#TFnav li ul ul { 
    margin: -25px 0 0 161px; 

#TFnav li:hover ul ul, #TFnav li:hover ul ul ul, #TFnav li.sfhover ul ul, #TFnav li.sfhover ul ul ul { 
    left: -999em; 

#TFnav li:hover ul, #TFnav li li:hover ul, #TFnav li li li:hover ul, #TFnav li.sfhover ul, #TFnav li li.sfhover ul, #TFnav li li li.sfhover ul { 
    left: auto; 

#TFnav li:hover, #TFnav li.sfhover { 
    position: static; 
}
#TFnav li li a, #TFnav li li a:link, #TFnav li li a:visited { 
    background: #BF0100
    width: 120px; 
    color: #FFF
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333;
    

#TFnav li li a:hover, #TFnavli li a:active { 
    background: #060505
    color: #FFF
    display: block;     margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
}

      6.  NOW Make these changes:
  • Change #060505 to change background color of the Main menu
  • Change  the yellow highlighted text to change font color, size and family
  • Change #BF0100 to change the background of a tab on mouse hover
  • Change #BF0100 to change the background color of the drop down menu
  • Change #060505 to change the background color of drop down menu on mouse hover
      7.    Save your template and you are done!

ALSO READ : 5 Best Short URL Websites

Visit your Blogs to see a beautiful Navigation menu just below Header. Have Fun! :)
If you have any questions feel free to post them.
Need Quick Help within 24 Hours? ASK NOW 

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.