Membuat Menu Dropdown Dengan JQuery Warna - Warni

colourful-menu_thumb4
Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode <head>
7. Masukkan script dibawah ini tepat dibawah kode <head>
<script src='http://mybloggertricks.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script> 
    <script src='http://mybloggertricks.googlecode.com/files/jcarousel-colourful.js' type='text/javascript'> </script> 
    <script src='http://mybloggertricks.googlecode.com/files/mt-colourful.js' type='text/javascript'></script>
8. Kemudian cari kode body {
9. Masukkan script dibawah ini tepat dibawah kode body {
margin:0px
padding:0px;
10. Kemudian cari kode berikut
 <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
11. Masukkan script dibawah ini tepat dibawah kode tersebut
<!--START OF COLOURFUL TABS BY DHECUN BLOG-->
<style>
/*------- Colourful Tabs Menu by dhecun.blogspot.com -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg528C6nW1m5VUzu_Ji_yYYfK9_sroN75L3fdjXI6hFURWO6nKju-9Arwb_GpouEZHr0dp1abSOVqM_2mnPaKdQ_vHAesiCU0FCHYmk3YvA2tvdH_FEpI4RGaWTCmEJpdQ5JPkLzF5Bxag/s400/menu-bgd.png) bottom left repeat-x; 
    position: relative; 
      margin: 0;  padding: 0; 
border: 1px solid #cfcfcf;
}
ul#nav { 
    border-left: 1px solid #cfcfcf; 
        border-right: 0px solid #cfcfcf; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg528C6nW1m5VUzu_Ji_yYYfK9_sroN75L3fdjXI6hFURWO6nKju-9Arwb_GpouEZHr0dp1abSOVqM_2mnPaKdQ_vHAesiCU0FCHYmk3YvA2tvdH_FEpI4RGaWTCmEJpdQ5JPkLzF5Bxag/s400/menu-bgd.png) bottom left repeat-x; 
    position: relative; 
    font-size: 12px; font-family: helvetica, arial, sans-serif; 
    list-style: none;  margin: 0 auto;  padding: 0; 
    width: 960px; 
}
#nav ul { 
     margin: 0; 
    
}
:focus { 
    outline: 0; 
}
*html ul#nav { clear: both; height: 1%; } 
ul#nav li a { 
    display: block; 
    float: left; 
    text-transform: uppercase; 
    font-weight: bold; 
    line-height: 33px; 
    padding: 0 13px 0 10px; 
    color: #333; 
    text-decoration: none; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLkCipbs89nk3tOaVPSlJDXlKxs_Td3oJLzuhhBxski_o1GaCJrslJuLHhAZs3RYgCJ_1kfFNGEi4Gwku2U6pb9InUTVmdTwi32ri5-lD-fezifUC65Gp6kzCi9WUPGZyE_rbECN0SVOM/s400/menu-rule.png) right 2px no-repeat; 

*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; } 
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; } 
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; } 
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; } 
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; } 
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; } 
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; } 
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; } 
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; } 
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }

ul#nav li#link-home a { 
    padding: 0 33px 0 10px; 
    text-indent: -9999px; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbnVOFAEnR1pBREZbAW-90PrXKfVwws7Xi3DtQfhgx1DXyT7kNkazvjks4KeL6NNqZpKu_IkVny0W9ToPb0wW_nr5-casU9szT6vSdY26KJ3vgqnoZo9pGFAcapUxoIKJu98GPV83B4Dw/s400/home-icon.png) right 0px no-repeat; 

*html ul#nav li#link-home a { padding: 0; width: 43px; } 
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbnVOFAEnR1pBREZbAW-90PrXKfVwws7Xi3DtQfhgx1DXyT7kNkazvjks4KeL6NNqZpKu_IkVny0W9ToPb0wW_nr5-casU9szT6vSdY26KJ3vgqnoZo9pGFAcapUxoIKJu98GPV83B4Dw/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav { 
    position: absolute; 
    top: 33px; 
    left: -1px; 
    overflow: hidden; 
    width: 960px; 
    display: none; 
    z-index: 999; 
list-style: none; 
  padding-left:0px; 
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5eVQ6ojasna8VWEuCAd_PtsqmSIqTLikWl_2qn3fUXGGlmTnSvANVTsSt1UY0hR56vMPvQg69i8UOYY2U0qSv-JafF2IztKY4z5rC3ed4POsqwpXpiYwrt4w20fBGwUudNSQyp9BPytM/s400/business-subnav-bgd.png) top left repeat-x; } 
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5_appXJGYV6d_bsks3qvWQU9HXBMfTRDvQZGetRsygqB4jqd44kkBKAWLdBnoOARRwdV6XOiG9aeUpyIL9OsplcVVESEDR_bqxR-1ig5Z_PHCPOh1BYZFr6qIOSqL0iFWlKRmLC2Q15c/s400/entertainment-subnav-bgd.png) top left repeat-x; } 
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJnPCUoHq-dfEgOyERLRhiy8NIvZMKye8L0Gltf5llRYENh_H0ijQTWfSbTUctCVA2GZ1VnXM8nXBQncVk26KTXmcbs76AKSieKnW_4yaUwU8bs5LCPSHFiN3r_anMQ4rGRBGJwdXOY28/s400/news-subnav-bgd.png) top left repeat-x; } 
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zqWj1Euq77oQDPOWuhsiFiyn1H7Qce2NRGpmQdvz0988uPe54qnsfoawtmPsr4kFEiGW5z2YHE-cWc4x699SYp3w-fp8QHjdyTtd9aI2gSHLm5OHefrziuFdSJioh-XqFseeGFH6dik/s400/life-subnav-bgd.png) top left repeat-x; } 
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxZvw3PWFbCheZeNkf9TGyIM1MxSBr8i_GDYj3Hs6z8clJtg6tit-hBPryeJYV88PMRn_3wW_Rj7V9B0epvc1it6zmoZ7S2qVD4-DukncFktETilNHCRwCGOYrU2x7WZrbtPGtVojpxkk/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left;   }
ul#nav li ul.sub-nav li a { 
    float: none; 
    background: none; 
    font-size: 11px; 
    text-transform: none; 
    color: #fff; 
    line-height: 25px; 
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; } 
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; } 
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; } 
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; } 
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-nav-container'> 
<ul id='nav'> 
                
               <li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li> 

                <li class='top-link' id='mbt'><a href='#'>TAB 1</a> 
                    <ul class='sub-nav'>  
                    <li><a href='#'>SUB TAB 1.1</a></li> 
                    <li><a href='#'>SUB TAB 1.2</a></li> 
                    <li><a href='#'>SUB TAB 1.3</a></li> 
                    <li><a href='#'>SUB TAB 1.4</a></li> 
                    </ul> 
                </li> 

                <li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>
                    <ul class='sub-nav' style='display: none;'>  
                    <li><a href='#'>SUB TAB 2.1</a></li> 
                    <li><a href='#'>SUB TAB 2.2</a></li> 
                    <li><a href='#'>SUB TAB 2.3</a></li> 
                    <li><a href='#'>SUB TAB 2.4</a></li> 
                    <li><a href='#'>SUB TAB 2.5</a></li> 
                    </ul> 
                </li> 

                <li class='top-link' id='link-news'><a href='#'>TAB 3</a> 
                    <ul class='sub-nav' style='display: none;'>  
                    <li><a href='#'>SUB TAB 3.1</a></li> 
                    <li><a href='#'>SUB TAB 3.2</a></li> 
                    <li><a href='#'>SUB TAB 3.3</a></li> 
                    <li><a href='#'>SUB TAB 3.4</a></li> 
                    </ul> 
                </li> 

                <li class='top-link' id='link-life'><a href='#'>TAB 4</a> 
                    <ul class='sub-nav' style='display: none;'>  
                    <li><a href='#'>SUB TAB 4.1</a></li> 
                    <li><a href='#'>SUB TAB 4.2</a></li> 
                    <li><a href='#'>SUB TAB 4.3</a></li> 
                    <li><a href='#'>SUB TAB 4.4</a></li> 
                    <li><a href='#'>SUB TAB 4.5</a></li> 
                    <li><a href='#'>SUB TAB 4.6</a></li> 
                    <li><a href='#'>SUB TAB 4.7</a></li> 
                    </ul> 
                </li> 

                <li class='top-link' id='link-technology'><a href='#'>TAB 5</a> 
                    <ul class='sub-nav' style='display: none;'>  
                    <li><a href='#'>SUB TAB 5.1</a></li> 
                    <li><a href='#'>SUB TAB 5.2</a></li> 
                    <li><a href='#'>SUB TAB 5.3</a></li> 
                    <li><a href='#'>SUB TAB 5.4</a></li> 
                    <li><a href='#'>SUB TAB 5.5</a></li> 
                    </ul> 
                </li> 

<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li> 

<!--
<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>
--> 
<!--
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>
--> 
<!--
<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li> 
-->
<!--
<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li> 
-->
                

                  <li style='clear: both;'/> 
            </ul> 
</div>
<!--END OF COLOURFUL TABS BY DHECUN BLOG--><div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-menu-dropdown-dengan-jquery.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
Keterangan :
- Ganti kode warna merah dengan alamat link yang anda inginkan.
- Ganti tulisan warna biru dengan teks yang anda inginkan.

12. Klik simpan template

Semoga bermanfaat...!!!


Subscribe

0 Komentar Blogger
Komentar Facebook

0 komentar:

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers