Cara Pasang UvumiTools Dropdown Menu

Ditulis oleh Kian pada 17:34 | 25 Nov 2010

Apa itu UvumiTools Dropdown Menu.? UvumiTools Dropdown Menu adalah menu navigasi horizontal yang memiliki efek halus dalam menampilkan sub menu atau cabang dari menu utama (Seperti yang digunakan blog saya ini). Ketika saya sedang blogwalking ke tempat teman blogger yang lain, saya melihat menu ini terpasang di salah satu blog dari teman saya itu. Langsung terpikir dalam otak saya untuk bisa memasangnya di blog saya. Sangat mudah untuk bisa mendapatkan deretan kode dari menu tersebut, hanya tekan CTRL+U dan cari kata kunci yang di pakainya, dan Taraaaaa kita bisa melihat kode-kode tersebut. Namun cara memasang dan menyesuaikannya yang sedikit memakan waktu (Maklum, saya masih pemula hehe). Bagi yang ingin memasang menu tersebut silahkan ikuti langkah-langkah berikut.

- Pertama log in dulu ke blogger
- Kemudian klik Rancangan atau Design dan klik Edit HTML (Biasakan untuk memback up template sebelum melakukan pengeditan, klik Download Template Lengkap).
- Lalu Coppas kode script dibawah ini ke dalam tag head atau dibawah kode <head>

- Kemudian coppas kode dibawah ini diatas kode ]]></b:skin>

.NavbarMenu { background:#191B1D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXNMVcx0bUDqBTDuyjn8B7DdoWG6E1hOza_SmHvdhNsQxzDvg-eRjjLjOgCnzU9vG6twngNS3A8vtNu3lWEMYfFSSzqvKegJA5BwEX_OEv01O4xMvA1-GARXpabWVqbwqN8eQdmyQqJl4/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/AVvXsEi9brf2yu_j0T8XAqTeYPD_t7gJ67kh8yH1OrUoMOfjN4bsFtktdF68s2MAVfAkKx_0qrSZkaqjsM15PDO5v4QgyRKXFXGonckE1k-QZmoV-Quj70N1h1yRytSypiaF6yBk7pf7a592O6o/) 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/AVvXsEhXNMVcx0bUDqBTDuyjn8B7DdoWG6E1hOza_SmHvdhNsQxzDvg-eRjjLjOgCnzU9vG6twngNS3A8vtNu3lWEMYfFSSzqvKegJA5BwEX_OEv01O4xMvA1-GARXpabWVqbwqN8eQdmyQqJl4/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/AVvXsEi9brf2yu_j0T8XAqTeYPD_t7gJ67kh8yH1OrUoMOfjN4bsFtktdF68s2MAVfAkKx_0qrSZkaqjsM15PDO5v4QgyRKXFXGonckE1k-QZmoV-Quj70N1h1yRytSypiaF6yBk7pf7a592O6o/) 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; }

- Kemudian cari kode yang mirip seperti ini (Saya katakan mirip, karena sedikit berbeda kodenya untuk setiap blog).

<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>

- Lalu coppas kode dibawah ini, tepat dibawah kode tadi

<div class='NavbarMenu'> <div class='NavbarMenuleft'> <ul class='nav' id='dropdown-menu'> <li><a href='http://deafile.blogspot.com/'>Home</a></li> <li><a href='#'>Page &#160;&#160;&#8595;</a> <ul> <li><a href='#'>Sub Page 1&#160;&#160;&#187;</a> <ul> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> <li><a href='http://deafile.blogspot.com/'>Dea Punya | Blogger Ciamis</a></li> </ul></li> <li><a href='#'>Sub Page 2&#160;&#160;&#187;</a> <ul><li> <a href='#'>Sub sub Page 1</a></li> <li><a href='http://deafile.blogspot.com/'>Sub sub Page 2</a></li> <li><a href='http://deafile.blogspot.com/'>Sub sub Page 3</a></li> <li><a href='http://deafile.blogspot.com/'>Sub sub Page 4</a></li> <li><a href='http://deafile.blogspot.com/'>Sub sub Page 5</a></li> </ul></li> <li><a href='#'>Sub Page 3</a></li> </ul> </li> <li><a href='#'>Edit Me</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/AVvXsEhliIyQuFZ7bZyfePvin0SD0IRiD4xXM-5o5YKAMk8F7diUWtCHN1DBwz6xJFRuacMRhOjvtSXMeUW8zr_BrXQQGhKCsZJumXR0f55Ul2nVcEggsS-1w4bCq4GSo_PPGjZjQiqz5SNYHoA/?imgmax=800' type='image' value='Go'/> </form> </div></div>

- Dan klik save..

Jika ingin lebih enak dilihat, sesuaikan dengan template blog yang kamu punya. Jangan lupa untuk mengganti setiap link yang ada sesuai dengan yang kamu inginkan. Dan jika kamu menghargai artikel ini, sertakan link blog saya kemudian beri komentar pada artikel ini, maka saya akan memasang kembali link blog kamu (Sekalian tukeran link gituu, hehe). Semoga artikel ini bermanfaat bagi yang membutuhkannya.

25 Nov 2010

Cara Pasang UvumiTools Dropdown Menu

Artikel Terkait

12 Komentar:

Postingan Populer

Ikuti Blog ini

Profil Admin

Kotak Diskusi