Colorfull jQuery Menu Horizontal - YHS Rider_Community

Jumat, 12 Oktober 2012

Colorfull jQuery Menu Horizontal

di 16.02

Huappppssss...Bosan dengan tips yang ini?. Heheh oke sob, jika merasa bosan dengan tips menu navigasi, silahkan baca tulisan kami yang lain di TIPS untuk Blogger. Saya jamin anda akan mendapatkan tips yang lain dan yang pastinya anda suka.

Oke kembali pada tips Membuat menu navigasi horizontal dengan keunikan:

Mempunyai background yang berwarna-warni (Colorfull)
Mempunyai satu cabang cabang (level)
Cabang (level) berbentuk horizontal juga
Yang pastinya sangat elegant jika dipasang pada blog anda.

Oke sobat blogger, mambaca keterangan di atas, saya rasa sobat blogger sudah tertarik untuk membuatnya pada blog anda. Pada tips ini saya akan memberikan sedikit tips kepada sobat blogger masalah menu navigasi ini. Sebenarnya setiap blog itu mempunyai tampilan yang berbeda-beda, sehingga menu navigasi banyak sekali macamnya. Maka untuk itu sobat blogger harus menentukan menu navigasi yang pas dengan tampilan blog sobat, supaya singkron kaya gitu maksud saya. Untuk memilih menu navigasi lainnya silahkan lihat macam-macam menu navigasi.

Untuk menampilkan menu yang ini anda hanya butuh mengikuti dan melakukan langkah-langkah berikut ini:

1. Login ke blogger dengan account anda.

2. Pilih Template => Edit HTML => Lanjutkan

3. Jangan lupa centang Expand Template Widget.

4. Silahkan letakkan kode berikut 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>

5. Kemudian cari kodeyang mirip seperti ini

body {
----
---
)

6. Kemudian tambahkan atribut berwana biru mnjadi seperti berikut

body {
margin:0px
padding:0px;
---
---
}

Note: Jika kode body { tidak ada silahkan letakkan kode pada langkah 6 diatas kode ]]></b:skin>
7. Kemudian cari kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'>
8. Letakkan kode CSS berikut di bawah kode tersebut:

<style>
.MBT-Nav-container {
border: 1px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWXPLShXsvsBy6muKy-aeC_tqoyoE-CxCTR9TVa25fPviiRq89YIlBu59Tsz1VbgooUgxYqqfdc1mWLoz78iVuUVcg0T0ENehbp08C12vV2oM7eBAtEF7Ep-lD5o92AIyc5gfhN8wZx8/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/AVvXsEiKWXPLShXsvsBy6muKy-aeC_tqoyoE-CxCTR9TVa25fPviiRq89YIlBu59Tsz1VbgooUgxYqqfdc1mWLoz78iVuUVcg0T0ENehbp08C12vV2oM7eBAtEF7Ep-lD5o92AIyc5gfhN8wZx8/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/AVvXsEh4vaBbukfnpSD4CbRne_kUIpdvPNzomRSlLFFgycaXk6r-Ku1mEkRMyNejTOV21Ela-0rvGBEQbdjQE1v4VSvTMp9ofAjfSd_68bywgLYkkMtoBf8_p-_2rpq_78AevwybAoGNQIyup24/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/AVvXsEhaVpRQob5tTDOTezYNCwzgd4CcJ3zwSXyFkkVl4yqCyd3v6KvP8UXy4YStuaotOBCuAFIrBBj-BrC_loDsKW7LYggJmj7Id-p49BlXQaWJBypuii1nef17FeZTVYiCnSVKZe_zn6hwlr4/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/AVvXsEhaVpRQob5tTDOTezYNCwzgd4CcJ3zwSXyFkkVl4yqCyd3v6KvP8UXy4YStuaotOBCuAFIrBBj-BrC_loDsKW7LYggJmj7Id-p49BlXQaWJBypuii1nef17FeZTVYiCnSVKZe_zn6hwlr4/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/AVvXsEhXVXIyMmvqc1S9BaV8cJVNz6uzHUZf_VWGOj_nkJq8roJEFXNX2yhbLwhvl3ra2yw6YEKl3U0TZ2pWgvkM-CyHOci1UuP5KB1_j855OqdIRrr65zHG78DXFUzrzgz1davLJEhSLOCId4E/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/AVvXsEg7y08m7eTUgxQvUd2_b9UAhpSHb1UjAtxX4FBXMV2KrVP3SDiQACWarBpUpDXquzCn1IXQ5XKhmurX3gKG23oPE36igYHkcizQjRxxD0HiofLT5l4q-UMR95XJzGf24X3NV9rfP5cqD6w/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/AVvXsEg4IFsG0tUVP4BjSsJ4SmdMQ7j8kfzx3M_wUrVVxaCj3ayNcvecYNXEkcc-7Yd7lw5J95M5MeDaMHnKtbgMgFYAbpOH4uEhzJej9HggQ6RHPghN3Jh8UBzw1b6iSK-DkHfqVwwzRfUWnqY/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/AVvXsEgjgRZ1rLm0WBa5hliSVEE6cAoudQM9gN0ZG65U3sBevqrlQDdk9eNIGpDygt0UvuUACrMQMazGJwLNZTPaq4b0rJuE1Q_7hlVNMk-pelm18R1aTHP2jIUHvdqXg6_amOVgFEziyEnXub8/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/AVvXsEhKBGMRzVlxkmHyoxuEjCoI71WseO_6OTMX6ufyktBH0Q0H7Jj9kigeQfUPu3mclugrfWevTJG5SFb47fTntQmrizXWTO3nx6palO1MVmbJymj2eYkE7tEzingTvNbOOUiK8BUkeLjuH_M/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://tips-untuk-blogger.blogspot.com/'>TAB 6</a></li>







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

Note: Silahkan edit menu navigasinya sesuai dengan kebutuhan blog anda.

9. Kemudian Simpan Template dan lihat perubahanny (Jika tidak lakukan pratinjau dulu)
Semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)

0 komentar em “Colorfull jQuery Menu Horizontal”

Posting Komentar

Langganan: Posting Komentar (Atom)

This is featured post 1 title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is featured post 2 title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is featured post 3 title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is featured post 4 title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is featured post 5 title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

YHS Rider_Community Copyright © 2012 Fast Loading -- Powered by Blogger