[Update] Make/Add Drop Down Menu in Blogger

drop down menu

blogger template has not drop down
menu as default , you have to add it.
if you had made a daily updated blog
and had multi content blog, you may
need of drop down menu so you can
manage your content easily.there will
be a simple menu and drop down menu
facbook , twitter icon on top and
search box at right side.adding drop
down menu is very beneficial it design 
your blog .blogger design is very simple
and design is very significant part in
blog your blog design should be easy to
use .

how to add or make drop down menu n blogger

step1: first login to your blogger and go to 

template and edit html.

step2: click any where inside code area and

press ctrl+f

step3: search this code.

</header>

step4: just above  </header> paste given code

<div id='contact-links'> <div id='my-links'> <a href='#'>About</a> <a href='#'>Contact</a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5uPAIOJutj0ysn6CPy8AlW3vks07CZGOBNvddhsAKHn1_q5YKy8EhDZtZrMDFpbzKiv7yU2H3c51EIN6T289OFGmjfV83l4x3XFlE5VPobs0cAi_leB4I12LnphJf1yXhDNjLcdHC4iM/s1600/facebook-icon.png' title='Facebook' width='18px'/></a><a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJOQV5BInHmkThXAb3wCF27V_pr-r2IWuitq2KXQUC2M6kwDET1QuYPkdXdPkwrgch9eQDJ4OWMZxZM4ZzEzkcDKEowSCP_mi7AzLuOgZpQD79sTCQkz_G8ay5bGeIJc7oS-gAlgKSx5I/s1600/twitter.png' title='Twitter' width='18px' /></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrpLwlT8qLZNcR4WNUOOGwxTWK65piglrXU5t6omwKOatmc5QjLvtU1uLoqpOTbNGANYsHG9JHb8x-uDKSgZuOc1VJus0HrcZ9T9ZjaoXOYj3eOcJqxaZRmBcw21O-DzgBQPCpq3n59ZfN/s1600/google-plus-icon.png' title='Google' width='18px'/></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9CHMlKfJ0xvot4bqbvCLqkyNeTg6H3tNM-uEkuJmGXst-B7DnORjhPjdzDQXLOdPJAhHEi7dCQrsmdQDivJ5omxpH7SaL_mOkJpxqYzWdX81eNNa8LyzAK4zYIvtMa0H8me91NX_hBGP/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a> </div><div id='menu-container'> <nav id='neat-menu'> <ul><li class='active'><a href='/'>Home</a></li><li><a href='#'>Dropdown</a> <ul><li><a href='#'>Menu element 1</a></li><li><a href='#'>Menu element 2</a></li><li><a href='#'>Menu element 3</a></li><li><a href='#'>Menu element 4</a></li><li><a href='#'>Menu element 5</a></li></ul></li><li><a href='#'>Dropdown</a> <ul><li><a href='#'>Menu element 1</a></li><li><a href='#'>Menu element 2</a></li><li><a href='#'>Menu element 3</a></li><li><a href='#'>Menu element 4</a></li><li><a href='#'>Menu element 5</a></li></ul></li><li><a href='#'>Dropdown</a> <ul><li><a href='#'>Menu element 1</a></li><li><a href='#'>Menu element 2</a></li><li><a href='#'>Menu element 3</a></li><li><a href='#'>Menu element 4</a></li><li><a href='#'>Menu element 5</a></li></ul></li><li><a href='#'>Single Menu</a></li><li><a href='#'>Single Menu</a></li><li><a href='#'>Dropdown</a> <ul><li><a href='#'>Menu element 1</a></li><li><a href='#'>Menu element 2</a></li><li><a href='#'>Menu element 3</a></li><li><a href='#'>Menu element 4</a></li><li><a href='#'>Menu element 5</a></li></ul></li></ul></nav> <!-- menu-search form --> <div id='menu-search'> <form method='get' action='/search'> <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/> </form></div></div></div>


replace # with your link and replace text in blue.

step5: now search this code

]]></b:skin>

step6: above it past give code

#contact-links { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); margin: auto; position: relative; width: 100%; } #contact-links a { color: #4C9FEB; } #contact-links a:hover { color: #3D85C6; } #my-links { float: right; font-size: 12px; margin: 4px 10px; overflow: hidden; text-shadow: 0 1px 0 #FFFFFF; } #my-links a { margin-left: 7px; padding-left: 8px; text-decoration: none; } #my-links a:first-child { border-width: 0; } #menu-container { background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 ); border-radius: 0 0 4px 4px; border:1px solid rgba(0,0,0,0.1); box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset; clear: both; height: 46px; padding-top: 1px; } #neat-menu { float: left; } #neat-menu a { text-decoration: none; } #neat-menu ul { list-style: none; margin: 0; padding: 0; } #neat-menu > ul > li { float: left; padding-bottom: 12px; } #neat-menu ul li a { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset; border-color: #D1D1D1; border-image: none; border-style: solid; border-width: 0 1px 0 0; color: #333333; display: block; font-size: 14px; height: 25px; line-height: 25px; padding: 11px 15px 10px; text-shadow: 0 1px 0 #FFFFFF; } #neat-menu ul li a:hover { background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 ); } #neat-menu > ul > li.active > a { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); border-bottom: 1px solid #2D81CC; border-top: 1px solid #4791D6; box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; color: #FFFFFF; margin: -1px 0 -1px -1px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #neat-menu > ul > li.active > a:hover { background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 ); } #neat-menu > ul > li:first-child > a { border-radius: 0 0 0 5px; } #neat-menu ul ul { background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 ); border-radius: 5px 5px 5px 5px; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 #FFFFFF inset; height: 0; margin-top: 1px; opacity: 0; overflow: hidden; width: 240px; padding: 0; position: absolute; visibility: hidden; z-index: 1; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #neat-menu ul li:hover ul { margin-top: 0\2; height: auto; opacity: 1; visibility: visible; } #neat-menu ul ul a { border-right-width: 0; border-top: 1px solid #D1D1D1; box-shadow: 0 1px 0 #FFFFFF inset; color: #444444; height: 24px; line-height: 24px; padding: 7px 12px; text-shadow: 0 1px 0 #FFFFFF; } #neat-menu ul ul a:hover { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); border-top: 1px solid #4791D6; box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #neat-menu ul ul li:first-child a { border-top-width: 0; } #menu-search { margin:8px 10px 0 0; float: right; } #menu-search form { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZaf8-Kx5tbTEBFx9WpVyKU8SOenkrlRQgdDVsfFdKsszwgANMInxxCQaw4ZTPoMwE8Q1cqyWO6-GVhDjrKAeGxSjGO11ZLrYWs_-xPrWRY3_t6ynaqySMuAWZz-lmMAh4ANwPlQTkdqD/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent; border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF; height: 26px; padding: 0 25px; position: relative; width: 130px; } #menu-search form:hover { background-color: #F9F9F9; } #menu-search form input { color: #999999; font-size: 13px; height: 26px; text-shadow: 0 1px 0 #FFFFFF; background: none repeat scroll 0 0 transparent; border: medium none; float: left; outline: medium none; padding: 0; width: 100%; } #menu-search form input.placeholder, #menu-search form input:-moz-placeholder { color: #C4C4C4; }


save your template and your drop down
menu is added. visit your blog to confirm

Share this post