Skip to main content

Cara Membuat Colorful JQuery Menu Untuk Blog

Ditulis Oleh Fajar Lesmana | Rabu, 03 Oktober 2012 | 18:01

JQuery - Menu ini merupakan menu yang spesial buat blog kamu. Dengan warna yang berbeda-beda dan menu drop down yang memanjang, karena itulah menu ini diberi nama Colorful JQuery Menu. Menu ini didapatkan dari Mybloggertrick, dan semoga dengan menu ini tampilan blog kamu 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 sajamkode yang nomor 5 tepat di atas ]]></b:skin>
7. Selanjutnya cari kode <body> atau <body expr:class='&quot;loading&quot; + data: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/AVvXsEg7MIHHDFna2m_gsT85EV6uKyCdU3CzmhxeTQnvsjC71kVnRA8GHRvKyd56vYjxovU-KMSuUIVzagWTO_JJjFtzJrauqoNy80sdJHzFnJo81-76Q8JgHDPo970Nuq9A2D2CppIGmooX2xM/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/AVvXsEg7MIHHDFna2m_gsT85EV6uKyCdU3CzmhxeTQnvsjC71kVnRA8GHRvKyd56vYjxovU-KMSuUIVzagWTO_JJjFtzJrauqoNy80sdJHzFnJo81-76Q8JgHDPo970Nuq9A2D2CppIGmooX2xM/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/AVvXsEjBi70yCxG7ckfVAwGPhT6GpCeAOOcaVQRfsCy-QLNzxHUSYcNTjl30kF13IBiusmqFGxi3kUpBVVqJifLaRKdi4eMswr7mr5iRiav8QKNoRLKQjk5zX6v_fs_rWF1NHD54N8E9Td1Mako/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/AVvXsEiZ9z59OZFLTApQFL8tq5Wkmlw_AOvRqp_rq-BT7KbWs-BwwM9axJws9_xTZ3SbgAINUZbnaScuy_ozAmLqk7JlGGDoytesIRUvU_Zs4WKeFX_xX1m-Ay3JVpdCt-N6qVmkfk9411WxuCE/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/AVvXsEiZ9z59OZFLTApQFL8tq5Wkmlw_AOvRqp_rq-BT7KbWs-BwwM9axJws9_xTZ3SbgAINUZbnaScuy_ozAmLqk7JlGGDoytesIRUvU_Zs4WKeFX_xX1m-Ay3JVpdCt-N6qVmkfk9411WxuCE/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/AVvXsEiAlhyphenhyphenK-ov_X3F_BasLwfoQ9N31MA6Xc4PtTWpXJ7lqCaKW_t7TZz63fMVaIfw4u_nJbAivhPGgVsY7Qf-CDHxSE8dZnBNs3sS1H60ekEh26ddC657KLqliXdxkTdKnKUuiMbLGA4TdOUw/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/AVvXsEglmYz26rq6dEQ2Lk0kZn7AvCNFAd17qPVqKITmvoAP4WEApdEReWAFeTs-AuPd-yWZ-3Q2CaSxXm2iXSqS76Sfzv8HUvK0mCi1_QucFJi-rUsfGmYZNcQ5m05ZRCwagjsiI6blf2JdXlQ/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/AVvXsEi5O0HPrjn_ZTB58noU51S3vQVSHD7-iW1TO4kiLi-D2ZO6IGnzirfJ9uVDPaB-OmNA3ZZxrsHmh6fFPMFw_tPcEjxU5JeBelLML5pNnL1-kgImpjQiBi437phYZ4x0tCwJhyphenhyphenN5rDsJOjY/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/AVvXsEiGyK7QAsohCCih5yvg6sZYC_JCSS-BuXliod6Pfu7XeD-sTI_DByfrHrR9WshZY_WsnaJMgObk4AkJwIhhbNqddgEssoLM50n9xE_TmZ0sGne3BClNbT6YNgVASyvdtFNepX1AdWvpNPc/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/AVvXsEiV4MIPYFpIhDU3jZ1X8QitoRiQPqRP9Pwvg6dnuTuBQ5t-AH26yFKb7NtxYl8tPpU0j5PcquGu08N0FZKIwlyxZ2-xV2DxYqGyCMtvi4xLaZy8OFdvJPLOgq1ZFLsZ8NgliDJSa3MIriE/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 pertinjauan setelah berhasil baru Simpan Template.
Labels:

Popular posts from this blog

Cara Membuat Menu Mendatar Di Atas Widget Attribution Dalam Area Footer Halaman Blog

Secara default, Blogger menyediakan sebuah widget ‘Laman’ yang dapat digunakan untuk menampilkan laman mandiri pada sebuah blog dalam bentuk tab menu horizontal seperti yang tampak di bawah bagian header blog ini . Namun dengan berbagai alasan dan tujuan, tidak sedikit pengelola blog yang lebih memilih menggunakan menu horizontal kustom daripada memakai widget ‘Laman’ yang sebenarnya juga dapat dimodifikasi sedemikian rupa sehingga sesuai dengan keinginan kita. Sebagai contoh misalnya adalah penambahan pull-down menu pada tab menu standar Blogger, seperti yang saya uraikan dalam artikel dengan judul “ Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger ”.
Post a Comment
Read More >>

Cara Mengatasi Blackberry Yang Hang

Cara Mengatasi Blackberry Yang Hang Cara Mengatasi Blackberry Yang Hang - Pernah tidak sobat mengalami keadaan di saat lagi BBM-an tiba - tiba hp Blackberry sobat hang total dan tidak bekerja dengan semetinya? Jika pernah, apa yang sobat lakukan? Membawa ke tempat service? maka siaplah untuk kehilangan beberapa lembar dari kantong sobat ( duit ) hehehe. Kali ini saya akan ngasih tips sederhana yang mungkin bisa membantu sobat yang sedang mengalami masalah hang pada BB nya, trik kali ini dijamin tidak akan mengosongkan dompet sobat karna memang tidak ada biaya nya alias gratis. Yang perlu sobat lakukan yaitu hanya duduk menghadap depan layar monitor dan mengikuti tutorial dari saya yang berikut ini.
Post a Comment
Read More >>

Ilmu Sosial Dasar: Ilmu Pengetahuan Teknologi dan Kemiskinan #9

1.  Pengertian Ilmu dan Ilmu Pengetahuan Batas kajian ilmu adalah fakta sedangkan batas kajian filsafat adalah logika atau daya pikir manusia. Ilmu menjawab pertanyaan “why” dan “how” sedangkan filsafat menjawab pertanyaan “why, why, dan why” dan seterusnya sampai jawaban paling akhir yang dapat diberikan oleh pikiran atau budi manusia (mungkin juga pertanyaan-pertanyaannya terus dilakukan sampai never ending) oleh Heidegger, setiap telaah filosofis terdapat unsur metafisik. Ilmu adalah pengetahuan yang bersifat umum dan sistematis, pengetahuan dari mana dapat disimpulkan dalil-dalil tertentu menurut kaidah-kaidah umum. (Nazir, 1988) Konsepsi ilmu pada dasarnya mencakup tiga hal, yaitu adanya rasionalitas, dapat digeneralisasi dan dapat disistematisasi (Shapere, 1974) Pengertian ilmu mencakup logika, adanya interpretasi subjektif dan konsistensi dengan realitas sosial (Schulz, 1962) Ilmu tidak hanya merupakan satu pengetahuan yang terhimpun secara sistematis, tetapi juga ...
Post a Comment
Read More >>