Wawasan spiritual dan blogging: Cara membuat menu warna-warni tebar pesona dengan effect jquery

Menu ini merupakan menu yang spesial buat blog anda. Dengan warna yang berbeda-beda dan menu drop down yang memanjang, karena itulah menu ini saya beri nama menu warna-warni tebar pesona dengan effect jquery hehe... 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='"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/AVvXsEhkFf89PcscVNoHa59OZpNy46YmxPH6ylcWLdwsrzqQSq0z_mLEo5Us1TMhM8tqJ32KQq_MkgSv547WaeGHovHlJmmSV4FPT11caen60ka0lQw2uAF5JN2ELgZgTn7DnK9G6wGKOuysQ5A/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/AVvXsEhkFf89PcscVNoHa59OZpNy46YmxPH6ylcWLdwsrzqQSq0z_mLEo5Us1TMhM8tqJ32KQq_MkgSv547WaeGHovHlJmmSV4FPT11caen60ka0lQw2uAF5JN2ELgZgTn7DnK9G6wGKOuysQ5A/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/AVvXsEiW701CU-VAO7kBS9f31NcL652leWa9N4-261ty-aHlor3X0lGJxIHChB__R5qGUa95-Tx85qcooPY5okY6DI3wz_SImWDQeZFEurXnNHEgOTPKUK6bWHWsa_U41SgpJTUW9LlTVwREOiI/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/AVvXsEgZMzTZ2iMXp1D3cLvSPOnyZ8NgfXprAdCp42hlTtBdy4u9-9yfP5Hix6N8PH0CqFUgUHQc7ZIffn-O94LHfrF0CWVtpEGwqHxHjLiwdOVbXifrLO0rcIm1m1g8DmZ0sFBjjkuyBWQEhz0/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/AVvXsEgZMzTZ2iMXp1D3cLvSPOnyZ8NgfXprAdCp42hlTtBdy4u9-9yfP5Hix6N8PH0CqFUgUHQc7ZIffn-O94LHfrF0CWVtpEGwqHxHjLiwdOVbXifrLO0rcIm1m1g8DmZ0sFBjjkuyBWQEhz0/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/AVvXsEh4owb1DelVq137kQuE_yIwptd34XTatDwOePrrF2XNPm6NMBhAjorzApZJ0jky84Fu1N5z3Y7ANI7JVDSBBhN9DHRrAAFgTpkpMCPcr4-H_TBqa2jD7UeWra4ORhwpQH7sK0jg44_KGfU/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/AVvXsEjLqXxGvPJih4lLhjPXF8DV1hIHp5-8loYLcZk8V2418INNU20hyphenhyphencdcjoVWbyyXxghe7F2ow37b8pzNuWROBbkto6wNkK5rV2V_SEBpbW6mBZ-R-S8xItP5J-J8GcMIUETFOE9AjbpxSqA/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/AVvXsEiHZ9BL2e2JRwTjeOWcMUCymP2Cw6DUvh2bTDMMT9gEYQpwpZ1PWI9c1JE3et5iZ7_bii0BmuvZ5PNhozILQ0xDwXLr1n-ukSpot2E1aPW_JnV-cSLac6GFS-gwM2gdb_pTIHW0FCJVsBw/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/AVvXsEjvQn01HW6KdTfX_7h6GTc7gq0VT4Nrjeda1iVP45Swukz6FnLSS3vzVnzuHxYjLSYMD_lJqUaZm-H1NhkTtXbezzv5hC5iVATfbaODDRKpGUcGXGprwuFriI6p8FKNXdrriUyE6Nm_fW4/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/AVvXsEjXoOlLVfL0VCmZKV4GIsAVl9b9jad91Xfty2htQNCjpYTNjMNckyviWTuX-Qgg_RcLv9GUDLkJGaa_ZyZGPzezDle87FsU91N2TS97gffT4bJ44dzh_GhA7upFz-9mG9DfAa9dvL1RLPw/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: http://www.mybloggertricks.com
Adapted from: BlazzerBlog

Wawasan spiritual dan blogging

3 Januari 2013

Cara membuat menu warna-warni tebar pesona dengan effect jquery

14 komentar: