1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to Add Drop-Down Menu in Blogger

Discussion in 'HTML & Website Design' started by wo wo, Apr 19, 2013.

  1. #1
    hi,
    my blog: www.bbloggertutorials.blogspot.com
    I want to add drop-down menu in my blog but i can't.

    I want to add it in blogger tools
    this is html code my blog

    Code (Text):
    1. <ul class='mbt-red-grey-menu'>
    2. <li><a href='http://bbloggertutorials.blogspot.com/'>Home</a></li>
    3. <li><a href='http://bbloggertutorials.blogspot.com/'>Blogger Tools</a></li>
    4. <li><a href='http://bbloggertutorials.blogspot.com/p/sitemap.html'>Sitemap</a></li>
    5. <li><a href='http://bbloggertutorials.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
    6. <li><a href='http://bbloggertutorials.blogspot.com/p/contact-me.html'>Contact Me</a></li>
    7. </ul>    
    wo wo, Apr 19, 2013 IP
  2. wo wo

    wo wo Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #2
    Up
    wo wo, Apr 19, 2013 IP
  3. wo wo

    wo wo Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #3
    please help me.
    wo wo, Apr 19, 2013 IP
  4. themes4all

    themes4all Active Member

    Messages:
    535
    Likes Received:
    38
    Best Answers:
    6
    Trophy Points:
    75
    #4
    hello there,
    Please Before testing this Code Make a Backup Of Your Blogger Template From :

    Dashboard ==> Template ==> Backup / Restore (On the Right Corner)

    From your Google Dashboad open Template ==> edit HTML :

    Find This Code :

    Code (Text):
    1. .mbt-red-grey-menu{margin: 0 auto;
    2. padding:0;
    3. clear:both;
    4. }
    5. .mbt-red-grey-menu{
    6. margin:0px;
    7. padding: 0;
    8. float: left; font-weight: 800;
    9. font:14px 'PT Sans Narrow', sans-serif;
    10. width: 100%; text-transform: uppercase;
    11. overflow: hidden;
    12. margin-bottom: 0px;
    13. background:#4486D0;border: 1px solid #BAD6F2;
    14. }
    15. .mbt-red-grey-menu li{
    16. display: inline;
    17. }
    18. .mbt-red-grey-menu li a{
    19. float: left;
    20. color: #fff; font-weight: 800;
    21. padding: 9px 20px;
    22. text-decoration: none;
    23. border-right: 1px solid #3D72C0;
    24. }
    25. .mbt-red-grey-menu li a:visited{
    26. color: #fff;
    27. }
    28. .mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{
    29. color: #fff;
    30. background:#264778;
    Replace It With :

    Code (Text):
    1. .mbt-red-grey-menu{margin: 0 auto;
    2. padding:0;
    3. clear:both;
    4. }
    5. #mbt-red-grey-menu ul,
    6. #mbt-red-grey-menu li,
    7. #mbt-red-grey-menu span,
    8. #mbt-red-grey-menu a {
    9.   margin: 0;
    10.   padding: 0;
    11.   position: relative;
    12. }
    13. #mbt-red-grey-menu {
    14.   height: 49px;
    15. margin:0px;
    16. padding: 0;
    17. float: left; font-weight: 800;
    18. font:14px 'PT Sans Narrow', sans-serif;
    19. width: 100%; text-transform: uppercase;
    20. margin-bottom: 0px;
    21. background:#4486D0;border: 1px solid #BAD6F2;
    22.  
    23.   border-radius: 5px 5px 0 0;
    24.   -moz-border-radius: 5px 5px 0 0;
    25.   -webkit-border-radius: 5px 5px 0 0;
    26.   background: -moz-linear-gradient(top, #32323a 0%, #3D72C0 100%);
    27.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #3D72C0));
    28.   background: -webkit-linear-gradient(top, #32323a 0%, #3D72C0 100%);
    29.   background: -o-linear-gradient(top, #32323a 0%, #3D72C0 100%);
    30.   background: -ms-linear-gradient(top, #32323a 0%, #3D72C0 100%);
    31.   background: linear-gradient(to bottom, #32323a 0%, #3D72C0 100%);
    32.   border-bottom: 2px solid #e00f16;
    33. }
    34. #mbt-red-grey-menu:after,
    35. #mbt-red-grey-menu ul:after {
    36.   content: '';
    37.   display: block;
    38.   clear: both;
    39. }
    40. #mbt-red-grey-menu a {
    41.   background: #3D72C0;
    42.   background: -moz-linear-gradient(top, #32323a 0%, #3D72C0 100%);
    43.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #3D72C0));
    44.   background: -webkit-linear-gradient(top, #32323a 0%, #3D72C0 100%);
    45.   background: -o-linear-gradient(top, #32323a 0%, #3D72C0 100%);
    46.   background: -ms-linear-gradient(top, #32323a 0%, #3D72C0 100%);
    47.   background: linear-gradient(to bottom, #32323a 0%, #3D72C0 100%);
    48.   color: #ffffff;
    49.   display: inline-block;
    50.   font-family: Helvetica, Arial, Verdana, sans-serif;
    51.   font-size: 12px;
    52.   line-height: 49px;
    53.   padding: 0 20px;
    54.   text-decoration: none;
    55. }
    56. #mbt-red-grey-menu ul {
    57.   list-style: none;
    58. }
    59. #mbt-red-grey-menu > ul {
    60.   float: left;
    61. }
    62. #mbt-red-grey-menu > ul > li {
    63.   float: left;
    64. }
    65. #mbt-red-grey-menu > ul > li:hover:after {
    66.   content: '';
    67.   display: block;
    68.   width: 0;
    69.   height: 0;
    70.   position: absolute;
    71.   left: 50%;
    72.   bottom: 0;
    73.   border-left: 10px solid transparent;
    74.   border-right: 10px solid transparent;
    75.   border-bottom: 10px solid #e00f16;
    76.   margin-left: -10px;
    77. }
    78. #mbt-red-grey-menu > ul > li:first-child > a {
    79.   border-radius: 5px 0 0 0;
    80.   -moz-border-radius: 5px 0 0 0;
    81.   -webkit-border-radius: 5px 0 0 0;
    82. }
    83. #mbt-red-grey-menu > ul > li:last-child > a {
    84.   border-radius: 0 5px 0 0;
    85.   -moz-border-radius: 0 5px 0 0;
    86.   -webkit-border-radius: 0 5px 0 0;
    87. }
    88. #mbt-red-grey-menu > ul > li.active > a {
    89.   box-shadow: inset 0 0 3px #000000;
    90.   -moz-box-shadow: inset 0 0 3px #000000;
    91.   -webkit-box-shadow: inset 0 0 3px #000000;
    92.   background: #070707;
    93.   background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
    94.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
    95.   background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
    96.   background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
    97.   background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
    98.   background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
    99. }
    100. #mbt-red-grey-menu > ul > li:hover > a {
    101.   background: #070707;
    102.   background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
    103.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
    104.   background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
    105.   background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
    106.   background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
    107.   background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
    108.   box-shadow: inset 0 0 3px #000000;
    109.   -moz-box-shadow: inset 0 0 3px #000000;
    110.   -webkit-box-shadow: inset 0 0 3px #000000;
    111. }
    112. #mbt-red-grey-menu .has-sub {
    113.   z-index: 1;
    114. }
    115. #mbt-red-grey-menu .has-sub:hover > ul {
    116.   display: block;
    117. }
    118. #mbt-red-grey-menu .has-sub ul {
    119.   display: none;
    120.   position: absolute;
    121.   width: 200px;
    122.   top: 100%;
    123.   left: 0;
    124. }
    125. #mbt-red-grey-menu .has-sub ul li {
    126.   *margin-bottom: -1px;
    127. }
    128. #mbt-red-grey-menu .has-sub ul li a {
    129.   background: #e00f16;
    130.   border-bottom: 1px dotted #ec6f73;
    131.   filter: none;
    132.   font-size: 11px;
    133.   display: block;
    134.   line-height: 120%;
    135.   padding: 10px;
    136. }
    137. #mbt-red-grey-menu .has-sub ul li:hover a {
    138.   background: #b00c11;
    139. }
    140. #mbt-red-grey-menu .has-sub .has-sub:hover > ul {
    141.   display: block;
    142. }
    143. #mbt-red-grey-menu .has-sub .has-sub ul {
    144.   display: none;
    145.   position: absolute;
    146.   left: 100%;
    147.   top: 0;
    148. }
    149. #mbt-red-grey-menu .has-sub .has-sub ul li a {
    150.   background: #b00c11;
    151.   border-bottom: 1px dotted #d06d70;
    152. }
    153. #mbt-red-grey-menu .has-sub .has-sub ul li a:hover {
    154.   background: #80090d;
    155. }
    Now we will Place the Menu :

    Find :
    Code (Text):
    1. <ul class='mbt-red-grey-menu'>
    2. <li><a href='http://bbloggertutorials.blogspot.com/'>Home</a></li>
    3. <li><a href='http://bbloggertutorials.blogspot.com/'>Blogger Tools</a>
    4. <ul>
    5. </ul>
    6. </li>
    7. <li><a href='http://bbloggertutorials.blogspot.com/p/sitemap.html'>Sitemap</a></li>
    8. <li><a href='http://bbloggertutorials.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
    9. <li><a href='http://bbloggertutorials.blogspot.com/p/contact-me.html'>Contact Me</a></li>
    10. </ul>
    and replace It With :

    Code (Text):
    1. <div id='mbt-red-grey-menu'>
    2. <ul>
    3.   <li><a href='http://bbloggertutorials.blogspot.com/'><span>Home</span></a></li>
    4.   <li class='has-sub '><a href='#'><span>Blogger Tools</span></a>
    5.       <ul>
    6.         <li class='has-sub '><a href='#'><span>Tools 1</span></a>
    7.             </ul>
    8.         </li>
    9.         <li class='has-sub '><a href='#'><span>Category With Sub</span></a>
    10.             <ul>
    11.               <li><a href='#'><span>Category 1</span></a></li>
    12.               <li><a href='#'><span>Category 2</span></a></li>
    13.             </ul>
    14.         </li>
    15.       </ul>
    16.   </li>
    17.   <ul><li><a href='http://bbloggertutorials.blogspot.com/p/sitemap.html'><span>Sitemap</span></a></li></ul>
    18. <ul><li><a href='http://bbloggertutorials.blogspot.com/p/privacy-policy.html'><span>Privacy Policy</span></a></li></ul>
    19.   <ul><li><a href='http://bbloggertutorials.blogspot.com/p/contact-me.html'><span>Contact</span></a></li></ul>
    20. </ul>
    21. </div>
    Note :

    <li class='has-sub '><a href='#'><span>Blogger Tools</span></a> This Title don't have a link so you have to Get Your Category Link Then Add To :

    <li class='has-sub '><a href='#'><span>Tools 1 Link</span></a>

    I hope this help and Good Luck !
    themes4all, Apr 19, 2013 IP
  5. wo wo

    wo wo Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #5
    what this?

    [​IMG]
    wo wo, Apr 19, 2013 IP
  6. creativewebmaster

    creativewebmaster Active Member

    Messages:
    641
    Likes Received:
    6
    Best Answers:
    4
    Trophy Points:
    53
    #6
    This video many help you to create drop down menu in blogger.

    creativewebmaster, Apr 19, 2013 IP
  7. wo wo

    wo wo Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #7
    I will try.
    wo wo, Apr 20, 2013 IP
  8. wo wo

    wo wo Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #8
    The problem still.
    wo wo, Apr 20, 2013 IP
  9. GM ORNOB

    GM ORNOB Greenhorn

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #9
    hey wo wo , everybody try to give your solution if you don't understood that please follow the famous site www.mybloggertricks.com/ . it is top blog site for developing and tips for blogger , may be you get help from
    GM ORNOB, Apr 20, 2013 IP
  10. wo wo

    wo wo Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #10
    ok my friend but Where do I put my problem?
    wo wo, Apr 21, 2013 IP
  11. themes4all

    themes4all Active Member

    Messages:
    535
    Likes Received:
    38
    Best Answers:
    6
    Trophy Points:
    75
    #11
    did you copy past the code as is it.. because the one i gave you it's WORKING 100%... It's all what i can do for you!! Goodluck
    themes4all, Apr 22, 2013 IP
  12. wo wo

    wo wo Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #12
    but u seen a problem.
    wo wo, Apr 22, 2013 IP
  13. themes4all

    themes4all Active Member

    Messages:
    535
    Likes Received:
    38
    Best Answers:
    6
    Trophy Points:
    75
    #13
    so just remove the <LI> Marked and that's all!! then test again, because i already tested the code locally and it's work perfectly....
    themes4all, Apr 22, 2013 IP
  14. wo wo

    wo wo Greenhorn

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #14
    ok I will try...
    wo wo, Apr 22, 2013 IP