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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlMNE4m0r1gahyUMcSeR4AkIeLWUW3tENCNLjxWgjlom3vvAvWqBr5veV758s1dtbpVV0ngtgnQTBffb-HG8B-MMq5pqqQ3z__cGvsRXdhI6hizkvNT4NlpAM_4xNpC9ISckKB99-S3E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOLugroyPHeq9cKnvAEFthDErQ-au_WBqPFW6YME2501QtZrA1HzQnzc7JzJP6KEaov-o327rm4CnHDpGOlnvnxmYu-NbNxMh4LDSSsZgCam7iFwg5yUH9fwzfSyHqBMG5DxtTG5iqq4E/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlMNE4m0r1gahyUMcSeR4AkIeLWUW3tENCNLjxWgjlom3vvAvWqBr5veV758s1dtbpVV0ngtgnQTBffb-HG8B-MMq5pqqQ3z__cGvsRXdhI6hizkvNT4NlpAM_4xNpC9ISckKB99-S3E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOLugroyPHeq9cKnvAEFthDErQ-au_WBqPFW6YME2501QtZrA1HzQnzc7JzJP6KEaov-o327rm4CnHDpGOlnvnxmYu-NbNxMh4LDSSsZgCam7iFwg5yUH9fwzfSyHqBMG5DxtTG5iqq4E/) 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjJtBRsW-9Z7Km1QFN4NX85FL-GZltgbRdkBWQ5kgnH_xg8me_PW_e_a_RCpW5lNUuBMamiKX_HQVuWuSUO9FzL9S9t_x-v2V5FuToLHoKST2l1rDOdLFbhvSfG1akw2O4hPpkfJzvsIw/?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.

»»  Read more

How to Create Email Form Subscription

The function of Email Form Subscription is to let your loyal visitors to subscribe your new article/posting in to their email.
Here the trick to create Email Form Subscription

1. visit this site : http://www.feedburner.com
2. You will see a box to enter your blog feeds. enter your blog feeds in to the box. Usually your blog feeds is like this : http://YOURBLOGNAME.blogspot.com/feeds/posts/default
3. If you have video file in your blog content, check on the "I am a podcaster"box, If not, it’s unnecessary. Then click "Next" Button.
4. After that, you must to fill a form, fill it with your information then click on the "Activate Feed"
5. If you’re succeed, you will see "Congrats your....." notificaton.
6. On the buttom you will see a "Next" Button and a link "Skip directly to feed management", choose this link & now  You will see some menus on top. Choose "Email Subscription" menu.

7. On the left you will see some menu again, now click on the "Email Subscriptions"
8. Then click on the "Activate" button.
9. You will some code on the boxes. Choose code in the "Subsciption Form Code" box, and copy it. then click "Save" Button.

10. To plug it on your blog, go to "Layout-->>Add Page element-->HTML/Javascript" paste your code on the box.

»»  Read more

Blogger Template : Grunge Style

Download

»»  Read more

Blogger Template : Fashion Week

Download

»»  Read more

How to Google Translate Flags Widget For Installing Blogger

I’m sure that we are all not from the same country, and we all can’t understand all languages in the world . To day I explain how to add Google Translate Widget in the form of nations’ flags .

Widget Features :

• This Widget Auto detect your blog language and translate it to the readers chosen language.
• Support 12 different languages, English, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, French, Germany, Arabic And Chinese.

If you are interested in add Google Translate Widget, then you follow the simple steps :

• Login to blogger with your ID , then Click Layout.
• Click Page Element tab.
• then Click Add A Gadget .
• Click HTML/JavaScript

• Copy and paste the Google Translate code into the available area :

<style>



.google_translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.google_translate:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

.google_translatextra:hover img {

filter:alpha(opacity=0.30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

</style>



<div>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBTrcS3kRjK7F27N7UKFlqHPIpnYm8x6Qgd1wWftcDscC8tyfJ_X6zydLAIgqzvOtglua7hDQPXYkENX9t7M2O9H_P2fXj1n1WJBpuhQwk106vHcAICk1fjL_08p2EjHNuhFNup0jzj9Y/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNE0kroVzlgx_dk2M3Lfs_JeK1b0UteZrysIulqBf6ZBmpv_cSNBcEGyeruaq-Z9zNxQm6DXHaxfXaNzXGbWUrqUTTVQGPTld7RhvTF_LkLumOnAht2iwOMV8SW_gjbaIcnOher9-rojs/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-Rla6EdL9ItxVQvaXfZpqUqqETk3rGD9njZzZUp06o9RF-kt6tsdentqxPCsrHVK-vM1w0wMrUVir-NZpSVlEuF-znOQf8VsD94VVE_VCFJsSKrUURufodIqXxn73KGMCGrDh9byMd8N/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWE7FordmLP6VvIFbId55oWYC_-Dh3uxon6rLLLFAbg3_ODleIYD5nGiEpHA4t8lwIbQrn-tBdJ5ACoNrIRS79zZ2_nFG5UcDNyFQvAfuxjiSQiMLKlh-8Mf4EwvYRwm94bGvb3kGrKVpG/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR2FYWfdq-uJANkGKjtO8EuocCxhWJTt1iAIlMFiNCgyhCtY5LHh6xFJ2P5nv9aOZMb_hLQELv96NQhKDArnk5a8tlEUPpscfQDJnTlF61cj4gKMplilub3jwSXMq0OJABmyNSy65bgD8/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1lMDUhYGBtBMfiD7qLz1IbwS0Bz7k24W40VPz671ZlbGmjuHLOwityPQtg8-rxcUqgf7E-RxWoRwWXhNoejLF317KABCLFRTX2gMQgFUI8F-yVr2jtjuf00e3R1q8IJO4uiplaEXA48/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<br/><br/>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYfmMZGdDDH9xETmtohprU0WtrR3PzYJ7nF7lCD5wu2sMRqmKcX-uP46PM6QYcoTXWktnbhsCWsw4u-wLIt-lF-FYiNMvxAm928CbhAMNKHs_xT_yUmyAHE26uBL2r_utah5wUB_GBn0/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifbOp1ckJR1H3i8krgr57q1_jGlSO_bPXBgWLK-sWcD4Ml7NE1ptC6TOkgNO7qA52D2LuriAfZ-Jt3wi6-ZccFo28Eld_xCvZUqqcQwzi6CkDnznEmRZyec6_84t9q-fKEiSYmMnqjpPM/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg95RGjDomgu6lrx5hqG0VYzr_-ergfvKTWhm1M42bnO1wrTMlbE8p1lNb7j-F5MLvUeWS_oRv-1SZfFsaa3b4wdngNr2ucUQyDA6JtUVpjZUqnaoChBQxt8z0ZUiNt_XttwNWvW667a1RM/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiNS9tiKpssJxOZgiDqWqUygE7vsKqfWq_YBM2SRzDOhjTeuYWsAcpmP5u_SpwQpJMJ5Ws83P_MJU4DzopRtpA4ax2OSlEj-EfY06JpPKZyDRTievPivOXvCtSC7-b5M0_yO7APmpZ7BM/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXjieCxhHRnjlGAtFTQvzhMS7vyR2FjdqWHeCo4WD4BLw398lWVJA0aKDcnlRqUrZNPFmFj6dacLwgA4ITHeOgmJNU42RR5i8KwR3FhtHPVbj3AYUSZsgGr4wV02fyWpgEAn9ufK9yNE/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvzjOSU_IQtyQQK3T2FnCVy_QlFTaye7HIgBQBDHMptaNXv5euk6tGNKhaEgF_L76nfn65qPJ88jwLNlj3JhZeKXrNeNo02dnHFPB-Wuor9MHv67Jsa-WpbU1Z8wRZgO8xPFeijwrNac/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>



</div><div style="font-size:10px;margin:10px 0px 3px 0px">



Widget By : <a href="http://www.digitalblog24.blogspot..com">Digital Blog</a>

</div>

• And finally Click Save Templates

It is very easy , keep trying

»»  Read more