How to setup UvumiTools Drop down Menu

For those who are interested in installing the navigation on a blog, maybe you are interested in this drop down menu called UvumiTools Drop Down Menu.

Let’s get started:



1. Please login to blogger with your ID
2. Click Layout
3. Click Edit HTML.

Edit HTML

4. Find the code ]]></b:skin>
5. Copy and paste the code below exactly above the code ]]></b:skin>

.NavbarMenu {<br /> background:#191B1D url(http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top left;<br /> width: 100%;<br /> height: 37px;<br /> color: #FFFFFF;<br /> margin: 0 auto;<br /> padding: 0;<br /> font: bold 8px Arial, Tahoma, Verdana;<br /> clear:both;<br /> border-left:1px solid #333;<br /> border-right:1px solid #333<br /> }<br /> .NavbarMenuleft {<br /> width: 75%;<br /> float:left;<br /> margin:0;<br /> padding:0;<br /> }<br /> .nav {<br /> margin:0;<br /> padding:0;<br /> }<br /> .nav ul {<br /> float: left;<br /> list-style:none;<br /> margin:0;<br /> padding:0;<br /> }<br /> .nav li {<br /> list-style:none;<br /> margin:0;<br /> padding:0;<br /> }<br /> .nav li a, .nav li a:link, .nav li a:visited {<br /> color:#fff;<br /> display:block;<br /> text-transform:capitalize;<br /> margin:0;<br /> padding:11px 10px 8px;<br /> font:normal 12px Georgia, Times New Roman;<br /> text-decoration: none;<br /> }<br /> .nav li a:hover, .nav li a:active {<br /> background:#102427 url(http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif) repeat-x top left;<br /> color:#FFF;<br /> margin: 0;<br /> text-decoration: none;<br /> }<br /> .nav li li a, .nav li li a:link, .nav li li a:visited {<br /> background:#2C5F24 url(http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top left;<br /> width:200px;<br /> color:#fff;<br /> text-transform:capitalize;<br /> float:none;<br /> margin:0;<br /> padding:7px 10px;<br /> border-bottom:1px solid #0d2601;<br /> border-left:1px solid #0d2601;<br /> border-right:1px solid #0d2601;<br /> font: normal 14px Georgia, Times New Roman;<br /> }<br /> .nav li li a:hover, .nav li li a:active {<br /> background:#102427 url(http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif) repeat-x top left;<br /> color:#fff;<br /> }<br /> .nav li {<br /> float:left;<br /> padding:0;<br /> }<br /> .nav li a.enclose, .nav li a.enclose:visited {<br /> border-top:1px solid #000;<br /> }<br /> .nav li ul {<br /> z-index: 9999;<br /> position:absolute;<br /> left:-999em;<br /> height:auto;<br /> width:170px;<br /> margin:0;<br /> padding:0;<br /> }<br /> .nav li ul a {<br /> width: 140px;<br /> }<br /> .nav li ul ul {<br /> margin: -1px 0 0 220px;<br /> }<br /> .nav li:hover ul ul, .nav li:hover ul ul ul, .nav li.sfhover ul ul, .nav li.sfhover ul ul ul {<br /> left:-999em;<br /> }<br /> .nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li.sfhover ul, .nav li li.sfhover ul, .nav li li li.sfhover ul {<br /> left:auto;<br /> }<br /> .nav li:hover, .nav li.sfhover {<br /> position:static;<br /> }<br /> #search {<br /> width: 25%;<br /> font-size: 11px;<br /> float: right;<br /> margin: 0;<br /> padding:0;<br /> }<br /> #searchform {<br /> margin:0;<br /> padding:0;<br /> overflow:hidden;<br /> display:inline;<br /> }<br /> #searchbox {<br /> background:#ddd;<br /> padding:0;<br /> margin:0;<br /> }<br /> #search input {<br /> background:transparent;<br /> color:#fff;<br /> float:left;<br /> font-size:12px;<br /> margin: 7px 0 0 10px;<br /> width: 110px;<br /> padding:3px 7px;<br /> border: 1px solid #fff;<br /> font: normal 10px arial, verdana, Times New Roman;<br /> }<br /> #search .btn {<br /> margin:7px 0 0;<br /> padding:0;<br /> width:auto;<br /> border:0;<br /> } 

Copy and paste the code below exactly above the code
</head>

<script type="text/javascript" src="http://uvumitools.googlecode.com/files/mootools-for-dropdown.js"> </script> <br /> <script type="text/javascript" src="http://uvumitools.googlecode.com/files/UvumiDropdown-compressed.js"> </script> <br /> <script type="text/javascript"> var myMenu = new UvumiDropdown("dropdown-menu"); </script>

Scroll down your mouse and then find the code similar with:

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <br /> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> <br /> </b:section> <br /> </div>

Copy and paste the code below exactly under the code:

<div class='NavbarMenu'><div class='NavbarMenuleft'><ul id='dropdown-menu' class='nav'><li><a href='http://kolom-tutorial.blogspot.com/' rel='nofollow'>Home</a></li> <li><a href='http://kolom-tutorial.blogspot.com/search/label/download%20gratis' rel='nofollow'>Free Template</a> <br /> <ul><li><a href='#' rel='nofollow'>Magazine Template Series  »</a> <br /> <ul><li><a href='http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html'>Magazine Template R.1</a></li> <li><a href='http://kolom-tutorial.blogspot.com/2008/03/free-template-magazine-template-1.html' rel='nofollow'>Magazine Template 1</a></li> <li><a href='http://kolom-tutorial.blogspot.com/2008/09/free-template-magazine-template-2.html' rel='nofollow'>Magazine Template 2</a></li> <li><a href='http://kolom-tutorial.blogspot.com/2009/03/free-template-magazine-template-3-hijau.html' rel='nofollow'>Magazine Template 3</a></li> <li><a href='http://kolom-tutorial.blogspot.com/2009/03/free-template-magazine-template-3-biru.html' rel='nofollow'>Magazine Template 3.2</a></li> </ul></li> <li><a href='#' rel='nofollow'>Magazine Template R Series  »</a> <br /> <ul><li><a href='http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html'>Magazine Template R.1</a></li> <li><a href='http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r12.html'>Magazine Template R.1.2</a></li> <li><a href='http://kolom-tutorial.blogspot.com/2009/04/magazine-template-r13.html'>Magazine Template R.1.3</a></li> <li><a href='http://kolom-tutorial.blogspot.com/2009/04/free-magazine-template-r14.html'>Magazine Template R.1.4</a></li> <li><a href='http://kolom-tutorial.blogspot.com/2009/07/free-magazine-template-r15.html'>Magazine Template R.1.5</a></li> </ul></li> <li><a href='#' rel='nofollow'>Templates Gallery</a></li> </ul></li> <li><a href='http://www.blogspottutorial.com/' rel='nofollow'>Blog Tutorial</a></li> <li><a href='http://www.life4business.com/' rel='nofollow'>Business Guide</a></li> </ul></div><div id='search'><form action='/search/' id='searchform' method='get' style='display:inline;'><input id='searchbox' maxlength='160' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <br /> <input class='btn' name='' src='http://lh4.ggpht.com/_pt7i0nbIOCY/ScdxoASk9rI/AAAAAAAABoM/3qt9F1KUH_s/views-24_thumb%5B1%5D.png?imgmax=800' type='image' value='Go'/> <br /> </form></div></div>

9. Click SAVE TEMPLATE.
10. Done

For the first step, you have done it, and for the next step, you simply replace the red-printed links with your own links, and the keywords as viewed in green should be replaced with your own as well.