Cara membuat menu penuh warna dengan effect jquery di blog | Science dan blogging Cara membuat menu penuh warna dengan effect jquery di blog | Science dan blogging Cara membuat menu penuh warna dengan effect jquery di blog | Science dan blogging Cara membuat menu penuh warna dengan effect jquery di blog ~ Science dan blogging
» » » Cara membuat menu penuh warna dengan effect jquery di blog

Cara membuat menu penuh warna dengan effect jquery di blog

Menu ini merupakan menu yang spesial buat blog anda. Dengan warna yang berbeda-beda dan menu drop down yang memanjang, karena itulah menu ini diberi nama Colorful JQuery Menu (menu jquery penuh warna). Menu ini didapatkan dari Mybloggertrick, dan semoga dengan menu ini tampilan blog anda lebih profesional.


1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Cari Kode <head>
3. Letakan kode di bawah ini tepat di bawah 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>
4. Selanjutnya cari kode:
body {
----
---
)  

5. Tambahkan kode berikut:
body {
margin:0px
padding:0px;
---
---
}   
6. Jika tidak ada kode body {  letakan saja kode yang nomor 5 tepat di atas ]]></b:skin>
7. Selanjutnya cari kode <body> atau <body expr:class='&quot;loading&     quotdata:blog.mobileClass'>
8. Setelah ketemu letakan kode Menu dan CSS nya di bawah ini tepat di bawah kode nomor 6.

<style>
.MBT-Nav-container {
border: 1px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9vR4G0R3tXaW-bvOtbe1GPhtCFENLXGii0SKn_IU8y0ZY25egAa28F_9ljgf0cSo2SdBXvG2kB-T3an72jrvcPMA0arMZ36siVc1KmygX2BTE4G-4lzT8LVW42_Kp9-8mEiYjUNgxA/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/AVvXsEjwt9vR4G0R3tXaW-bvOtbe1GPhtCFENLXGii0SKn_IU8y0ZY25egAa28F_9ljgf0cSo2SdBXvG2kB-T3an72jrvcPMA0arMZ36siVc1KmygX2BTE4G-4lzT8LVW42_Kp9-8mEiYjUNgxA/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/AVvXsEjpSmYzTpIJqGJlF4x4_wMUTaROj1GrPykJu6ElKf9ikcymA0HMv-UZ4fSjyAXP5UV6Q8LdTNX8fSI37WpN1Fms0rT22KHNYbePs5sWIKw8aDM4LVvDHs0JJSpUr3jM-6KuleAMatXRt8g/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/AVvXsEjSlyEVy6LmsS-upjQzscMoRd3nmDe4m7kNbiYvjzhbaJe-QkuiOZ7wom4wathhgw2H-WAeDUXx7iPgO2Ez4EVAUtr41rdExOH6PUmLq8kYz1mCc8r8iEN6ycIPa5d4DelZiOuCysRsySI/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/AVvXsEjSlyEVy6LmsS-upjQzscMoRd3nmDe4m7kNbiYvjzhbaJe-QkuiOZ7wom4wathhgw2H-WAeDUXx7iPgO2Ez4EVAUtr41rdExOH6PUmLq8kYz1mCc8r8iEN6ycIPa5d4DelZiOuCysRsySI/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/AVvXsEiDpk00H3ermP3hzRD_3sFlXjLMB6_ksDbi31xseFywAqLSjJVAyNBVIsghKPiKbBg_COJ7Hl8Y2uR1M3wgVb2QHYuOsxfyEkgDGmeQECt5kOvvSNl0c-hzr-zEWSDV_jjsT5H_W16siig/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/AVvXsEjeeSXm1DexdmDiDKDJLMtCoTZQgwO-MsSUmDebo5NGIWuXta8yuJ0askd_cb-3Jzdbwkg4OWSEATNhE54zewGHE9CiJ3QYk7Xk-YIVboSvR6-Q4n1eTK1O6o46JtYFkIMUtXliP-DjlA4/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/AVvXsEjJKS5jMCgjg5z1chCawEJh88mE1Xg7OHGPJ-U3rssRN_8n_6s2nbzpzGNcRP5bqOeHToMZ8basDg3WOWqN9NlAN6k_-carTu7vxwkKnizDDXh5WuTYZWGv35T9ZvoKY9Z8LhAhJW2xG68/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/AVvXsEht00emnL1Erpe4EsS0gB6F6TadYRqTmUS24qWZ6U3Ejt4O5HKMRtRqPJk1P4kJcKOq7KBxlWBrTw-doMG76LzfyBGTjOval-gq0kt_r7Wf1eTa5OLNmSY4RCXH3d3OJHWayEwpwdpNznY/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/AVvXsEgIxHV7NX7bd3oN3EfFMM-6XembV9GylqQJumPdEIMPNHN7sa_UPPGk61LzoHvkNP0SqbZfhNEA7E_IOonUPA2HuLzyraaOFtZOtic2vJszf6maJP-9r_zu83y0ZFMVsc5PquecjWSCmWk/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='http://blazerracing.blogspot.com/'>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='http://blazerracing.blogspot.com/'>TAB 6</a></li>

<!--
<li class='non-vertical-link top-link' id='links-1'><a href='http://blazerracing.blogspot.com/'>TAB 7</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-2'><a href='http://blazerracing.blogspot.com/'>TAB 8</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-3'><a href='http://blazerracing.blogspot.com/'>TAB 9</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-4'><a href='http://blazerracing.blogspot.com/'>TAB 10</a></li>
-->
              

                  <li style='clear: both;'/>
            </ul>
</div>

Klik dulu pratinjau dan setelah berhasil baru Simpan Template.

Sumber: Blazzer Blog
Anda menyukai postingan diatas? Silahkan di share.
Science dan blogging Post Author

jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

jalupangna Label: 22.27 6 komentar

6 komentar

  1. Unknown1 Januari 2013 pukul 12.33

    wah keren sekali menu nav nya kang:)
    interesting posts....keep share it

    BalasHapus
    Balasan
    1. jalupangna1 Januari 2013 pukul 21.15

      terima kasih kang hriza udah mampir lagi, thank u so much for your support. saya suka sekali dengan template anda, kalau boleh tahu nama template yang anda pake di blog anda namanya apa? hehe..mhn di maklum lagi banyak belajar dari para master blog spt anda contohnya. :)

      Hapus
  2. Unknown18 Februari 2013 pukul 19.21

    mantab jg nh..bisa berubah2 warna..oke sip..
    visit back http://dangeltoblog.blogspot.com

    BalasHapus
  3. Imron Fhatoni26 April 2013 pukul 10.53

    Nice tutorial makasih pak tutorial nya sangat membantu..
    ditunggu kunjungan baiknya di http://arungjonga.blogspot.com

    BalasHapus
  4. jalupangna26 April 2013 pukul 12.43

    Terima kasih mas imron atas apresiasinya, salam kenal..insya Allah nanti blogwalking ke blog anda.

    BalasHapus

Back to Top