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

Ilmu Sosial Dasar: Pertentangan Sosial dan Integrasi Masyarakat #8

Integrasi Sosial Integrasi sosial adalah jika yang dikendalikan, disatukan, atau dikaitkan satu sama lain itu adalah unsur-unsur sosial atau kemasyarakatan. Suatu integrasi sosial di perlukan agar masyarakat tidak bubar meskipun menghadapi berbagai tantangan, baik merupa tantangan fisik maupun konflik  yang terjadi secara sosial budaya.  Menurut pandangan para penganut fungsionalisme struktur sistem sosial senantiasa terintegrasi di atas dua landasan berikut : Suatu masyarakat senantiasa terintegrasi di atas tumbuhnya konsensus  (kesepakatan) diantara sebagian besar anggota  masyarakat tentang nilai-nilai kemasyarakatan yang bersifat fundamental. Masyarakat terintegrasi karena berbagai anggota masyarakat sekaligus menjadi anggota dari berbagai kesatuan sosial ( cross-cutting affiliation ). Setiap konflik yang terjadi di antara kesatuan sosial dengan kesatuan sosial lainnya akan segera dinetralkan oleh adanya loyalitas ganda ( cross-cutting loyalities ) d...
Post a Comment
Read More >>

Ilmu Sosial Dasar: Warga Negara dan Negara #5

A. Pengertian Hukum Secara Umum : Hukum adalah keseluruhan norma yang oleh penguasa masyarakat yang berwenang menetapkan hukum, dinyatakan atau dianggap sebagai peraturan yang mengikat bagi sebagian atau seluruh anggota masyarakat tertentu, dengan tujuan untuk mengadakan suatu tata yang dikehendaki oleh penguasa tersebut. E. Pengertian Negara Negara berasal dari kata state (Inggris), staat (Belanda), dan etat (Prancis) yang sama-sama asalnya dari bahasa latin status atau statum yang berarti keadaan atau sesuatu yang bersifat yang tegak dan tetap.Berikut pendapat para tokoh mengenai definisi negara. Menurut John Locke (1632-1704) dan Rousseau (1712-1778), negara adalah suatubadan atau organisasi hasil dari pada perjanjian masyarakat. Menurut Max Weber, negara adalah suatu masyarakat yang mempunyai monopolidalam penggunaan kekerasan fisik secara sah dalam suatu wilayah Menurut Mac Iver, suatu negara harus mempunyai tiga unsur pokok, yaitu wilayah, rakyat dan pemerint...
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 >>