UvumiTools Drop down Menu

Menepati janji yang kemarin bahwa akan mencoba untuk eksis kembali dalam menulis artikel yang berhubungan dengan blog tutorial. Posting kali ini kang Rohman akan mencoba membahas tentang Navigasi yang bernama UvumiTools Drop Down Menu.

 

uvumitools-drop-down-menu

 

Keunggulan dari UvumiTools Drop Down Menu terletak pada gerakan drop down menu yang begitu halus nan eksotis ketika membuka serta menutup menu karena menggunakan Mootools Javascript FrameWork sehingga akan membuat blog anda tampil lebih Profesional di banding sebelumnya.Original tutorial dari UvumiTools Drop Down Menu bisa anda baca pada halaman ini, dan tutorial yang ada pada halaman ini sedikit berbeda pada tampilan menu yang telah kang rohman poles agar tampil lebih menarik.

 

demo

 

Perlu di ingatkan bahwa desain dari satu template dengan template yang lain adalah berbeda, oleh karena itu anda dituntut untuk menyesuaian dengan template yang anda gunakan saat ini dengan cara sedikit memodifikasi pada file CSS yang di berikan.

Persiapan dalam membuat UvumiTools Drop Down Menu :

 

  • Keyword

Keyword yang di maksud disini adalah tulisan yang ingin terlihat dalam menu navigasi. Sebagai contoh, kang Rohman ingin menggunakan keyword Home, Free Template, Blog Tutorial, Business Guide, dan lain-lain.

 

  • Link

Link yang di maksud disini adalah alamat URL yang diinginkan dibuka saat pengunjung meng-klik tombol navigasi yang ada. Alamat URL bisa menuju blog yang lain. Contoh :

 

http://template-tutorial.com

http://www.blogspottutorial.com

http://www.life4business.com

 

Alamat URL bisa juga membuka halaman yang ada dalam blog anda sendiri, misalkan halaman postingan ataupun halaman kategori, Yang masih bingung tentang cara mengetahui alamat dari URL dalam blg anda sendiri, silahkan baca artikel tentang Tutorial Membuat Horizontal Navigasi, contoh :

 

http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html

http://kolom-tutorial.blogspot.com/2008/03/free-template-magazine-template-1.html

http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html

 

Perlu di ingat kembali bahwa desain template antara yang satu dengan yang lain sangatlah berbeda, sehingga sangat besar kemungkinan apa yang kang Rohman terangkan berbeda dengan template yang anda gunakan. Untuk itu kang Rohman menyarankan agar anda membuat satu blog percobaan, agar jika terjadi kesalahan tidak merusak blog utama anda, silahkan pilih template  white minima yang biasa.

 

Mari kita mulai percobaannya ;

 

  1. Silahkan login ke blogger dengan ID anda
  2. Klik Tata Letak.

  3. Klik tab Edit HTML.

    tata letak

  4. Cari Kode kode ]]></b:skin>

  5. Copy paste kode berikut persis di atas kode ]]></b:skin>    
      

    .NavbarMenu {
        background:#191B1D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWI5NuZzhO8xlwCvvCi5DOHXNNLLz6gHkEXz5ZSJbpPcxWKqRKFCKe7xxAy_bk7b_XtP6dyxSXTCK3W21QrMrHyvbqkOktBw_dyHnkEjOPLCJJAtL5TgtGD6VfunSs68M0iKnVe1-xzg/s400/button1.gif) repeat-x top left;
        width: 100%;
        height: 37px;
        color: #FFFFFF;
        margin: 0 auto;
        padding: 0;
        font: bold 8px Arial, Tahoma, Verdana;
        clear:both;
        border-left:1px solid #333;
        border-right:1px solid #333
    }
    .NavbarMenuleft {
        width: 75%;
        float:left;
        margin:0;
        padding:0;
    }
    .nav {
        margin:0;
        padding:0;
    }
    .nav ul {
        float: left;
        list-style:none;
        margin:0;
        padding:0;
    }
    .nav li {
        list-style:none;
        margin:0;
        padding:0;
    }
    .nav li a, .nav li a:link, .nav li a:visited {
        color:#fff;
        display:block;
        text-transform:capitalize;
        margin:0;
        padding:11px 10px 8px;
        font:normal 12px Georgia, Times New Roman;
        text-decoration: none;
    }
    .nav li a:hover, .nav li a:active {
        background:#102427 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwTpBo1j-yAJRdU3saKNG1pI-5AYhKeoXdF0WF-q1qQ57EHbLcEG55SSJkrb1z9pDHSau8LuGyguudgxi4wboeX3G-WmpZ_93RswsRCotT5Phk8dE5WoJk8IhoEQwv9t-C4YnZPHrtaqY/) repeat-x top left;
        ;
        color:#FFF;
        margin: 0;
        text-decoration: none;
    }
    .nav li li a, .nav li li a:link, .nav li li a:visited {
        background:#2C5F24 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZWI5NuZzhO8xlwCvvCi5DOHXNNLLz6gHkEXz5ZSJbpPcxWKqRKFCKe7xxAy_bk7b_XtP6dyxSXTCK3W21QrMrHyvbqkOktBw_dyHnkEjOPLCJJAtL5TgtGD6VfunSs68M0iKnVe1-xzg/s400/button1.gif) repeat-x top left;
        width:200px;
        color:#fff;
        text-transform:capitalize;
        float:none;
        margin:0;
        padding:7px 10px;
        border-bottom:1px solid #0d2601;
        border-left:1px solid #0d2601;
        border-right:1px solid #0d2601;
        font: normal 14px Georgia, Times New Roman;
    }
    .nav li li a:hover, .nav li li a:active {
        background:#102427 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwTpBo1j-yAJRdU3saKNG1pI-5AYhKeoXdF0WF-q1qQ57EHbLcEG55SSJkrb1z9pDHSau8LuGyguudgxi4wboeX3G-WmpZ_93RswsRCotT5Phk8dE5WoJk8IhoEQwv9t-C4YnZPHrtaqY/) repeat-x top left;
        color:#fff;
    }
    .nav li {
        float:left;
        padding:0;
    }
    .nav li a.enclose, .nav li a.enclose:visited {
        border-top:1px solid #000;
    }
    .nav li ul {
        z-index: 9999;
        position:absolute;
        left:-999em;
        height:auto;
        width:170px;
        margin:0;
        padding:0;
    }
    .nav li ul a {
        width: 140px;
    }
    .nav li ul ul {
        margin: -1px 0 0 220px;
    }
    .nav li:hover ul ul, .nav li:hover ul ul ul, .nav li.sfhover ul ul, .nav li.sfhover ul ul ul {
        left:-999em;
    }
    .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 {
        left:auto;
    }
    .nav li:hover, .nav li.sfhover {
        position:static;
    }
    #search {
        width: 25%;
        font-size: 11px;
        float: right;
        margin: 0;
        padding:0;
    }
    #searchform {
        margin:0;
        padding:0;
        overflow:hidden;
        display:inline;
    }
    #searchbox {
        background:#ddd;
        padding:0;
        margin:0;
    }
    #search input {
        background:transparent;
        color:#fff;
        float:left;
        font-size:12px;
        margin: 7px 0 0 10px;
        width: 110px;
        padding:3px 7px;
        border: 1px solid #fff;
        font: normal 10px arial, verdana, Times New Roman;
    }
    #search .btn {
        margin:7px 0 0;
        padding:0;
        width:auto;
        border:0;
    }





  6. Copy paste kode berikut persis di atas kode </head> 

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



  7. Sedikit ke bagian bawah, lalu cari kode seperti berikut ini : 

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



  8. Copy paste code berikut persis di bawah kode yang tadi : 

            
    <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>        
    <ul>       
    <li><a href='#' rel='nofollow'>Magazine Template Series&#160;&#160;&#187;</a>      
    <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&#160;&#160;&#187;</a>        
    <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...'/>      
    <input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQHxdm7En4KN5NgW0XHQHw-ln_y9ef6z4Xkd82E5jCWZU-c0NIokBPG3h-vMi7xsHx0iFNTiR_g-HIveu7XVuvQvceRRcRs2xBoAqC_-AtMONHRoRC4p1fViMpdtrj4QgrOUwHU-UZno/?imgmax=800' type='image' value='Go'/>      
    </form>        
    </div></div>



  9. Klik tombol SIMPAN TEMPLATE.


  10. Selesai.



Untuk tahap awal mungkin ini sudah selesai, pekerjaan anda selanjutnya adalah mengganti link-link yang kang Rohman cetak merah dengan link atau alamat URL milik anda sendiri, serta keyword yang diberi warna hijau perlu juga diganti sesuai dengan keinginan anda.



Tentunya kang Rohman yakin anda harus melakukan sedikit editing di bagian kode CSS agar sesuai dengan karakteristik template anda.



 



Yang memerlukan file mentah dari file CSS serta JavaScript UvumiTools Drop Down menu, silahkan download disini!



 



Selamat mencoba!