Home / Tutor Blog / Cara membuat menu penuh warna dengan effect jquery di blog

Cara Download Cara membuat menu penuh warna dengan effect jquery di blog Update Terbaru

Sedikit Info Seputar Cara membuat menu penuh warna dengan effect jquery di blog Terbaru 2017 - Hay gaes kali ini team Blog Android, kali ini akan membahas artikel dengan judul Cara membuat menu penuh warna dengan effect jquery di blog, kami selaku Team Blog Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Blog Android. semoga isi postingan tentang Artikel Tutor Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara membuat menu penuh warna dengan effect jquery di blog Terbaru
link: Cara membuat menu penuh warna dengan effect jquery di blog

Berbagi Artikel Tentang Cara membuat menu penuh warna dengan effect jquery di blog Terbaru dan Terlengkap 2017

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>

~ CODE ~

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.

~ CODE ~

<style>     .MBT-Nav-container {      border: 1px solid #cfcfcf;          background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOYsyWPua7xYyQ0MZrsSs9SVCfrh70G5-rLYL-nxFJrorhVLbzGAnBNrsRwHjuFIC8i5dZ9UaSVFzXmWTofOGR7jnbAZiJzxjhDjyLN092Ug-BNigo-4wCg7hhx7ZaG2-S7_v8TXSC4eE/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/AVvXsEhOYsyWPua7xYyQ0MZrsSs9SVCfrh70G5-rLYL-nxFJrorhVLbzGAnBNrsRwHjuFIC8i5dZ9UaSVFzXmWTofOGR7jnbAZiJzxjhDjyLN092Ug-BNigo-4wCg7hhx7ZaG2-S7_v8TXSC4eE/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/AVvXsEjeIGDuks_HpfhTQwzVKJwJAHv6cZpWf9mYJ5gdK42vT1-6SpMLpNUt6-LanVxpAa9PRrsMjtLsJIJmQkcdSqAfhNzzREltswSQGBVr0VN2khCBWuy1yEdoKI0Qm7ZSAdCOO0mrvRpNsiQ/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/AVvXsEg9hIa22f9vcDsvFI1QBqgCjBH53dpS3hXITliaqVkaIMd5Dpip9r9jb20g_GQkf2lzCh7CJ6ax22BWT5NIkayEkkp1TGKL9DgS71aKqhTZoyQrJfdmc0FontRjZJohHip0fLMhRfZysyM/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/AVvXsEg9hIa22f9vcDsvFI1QBqgCjBH53dpS3hXITliaqVkaIMd5Dpip9r9jb20g_GQkf2lzCh7CJ6ax22BWT5NIkayEkkp1TGKL9DgS71aKqhTZoyQrJfdmc0FontRjZJohHip0fLMhRfZysyM/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/AVvXsEiPUPLcgJ16ZgOl6Lq6nvsF0B7j-U039Kd0SlFc1YrXK1qiBgvvUT6uu5aoHwG6pTJ-1pALgGTAcEJ3FpNFBYnpeKEyu7bTv9YGYGxqVWEU1AdEo_Q2OvD5DadayPLJd9zAKm4Mfh4RmQY/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/AVvXsEjuH23vIf_9ZsOMfgsMeoC3tuOIdD8aigd4gTARI3_h9gsDloFRc2ut2HUBAcKYugcVpzH5YFSIar4Oz9HwYOaRPGrS2Ud_ZPsrCl3L8Qj0cpVvLqqKC8XlGdWn5ntuo7wngT3Y9rJbFBI/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/AVvXsEjYOuCOc84JGnZewc9DxswfYCMYJm3Zfr-tKNU4H9MErsdG85qIYbVhAXdQ92v7GyYTdrIgd4uieojBf2ra5QG0jFQtWM7sj9lgSCEcO-nuHQz6rxXBzbmFztzMiuYnkoImtLP6hNFdgWw/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/AVvXsEiNhAiS_eDYiHiSxNPG11lvfDzvsAnz6Sa6ZVokNFcDqKP6aQuLNPrq1iRmberS7SZLpTuT5Of5vbce6_kgQNVPJe_xXvPGggY_ZpBn_hRsNBgGfh4CwfRI7JQud2-CfhhXTU2Z3v4zblw/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/AVvXsEgXtv2h8GwPy3iLFOwy1nvAV8R53qPZfcY65x3IzoKPVC8aEItRSVMrps_OjWcchJcrovEBOlkZ88c1EZdBSg-KV4BY4PeKlanvavAF_v_R9A3DP4MsS4q4kGePw6_tviRa-ZP-UdHgKuE/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><br /><br />    <div class='MBT-Nav-container'><br />    <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><br /><br />                        <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><br />                    </li><li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a><br /><br />                        <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><br />                    </li><li class='top-link' id='link-news'><a href='#'>TAB 3</a><br /><br />                        <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><br />                    </li><li class='top-link' id='link-life'><a href='#'>TAB 4</a><br /><br />                        <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><br />                    </li><li class='top-link' id='link-technology'><a href='#'>TAB 5</a><br /><br />                        <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><br />                    </li><li class='non-vertical-link top-link' id='link-top10'><a href='http://blazerracing.blogspot.com/'>TAB 6</a></li>               <li style='clear: both;'/><br /><br />                </ul></div>

Klik dulu pratinjau dan setelah berhasil baru Simpan Template.

Itulah sedikit Artikel Cara membuat menu penuh warna dengan effect jquery di blog terbaru dari kami

Semoga artikel Cara membuat menu penuh warna dengan effect jquery di blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Blog Android. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Artikel Tentang Cara membuat menu penuh warna dengan effect jquery di blog Terbaru

TOP