Bikin navigasi menu drop down super keren
Setelah diterbitkan dan dirancang lebih dari 100 + Navigation Menu untuk Blogger , baik dengan daftar horisontal dan vertikal pandangan , hari ini kami ingin berbagi menu yang indah yang tetap pilihan favorit semua klien backlinkpr1 sejauh ini. Menu ini berubah warna untuk setiap tab pada mouse hover . Menggunakan fungsi JavaScript yang sederhana untuk menghasilkan efek transisi rapi dan bersih . Alih-alih menampilkan item menu sub di vertikal drop down tradisional , kita selaras mereka dengan satu sama lain untuk masuk ke dalam satu baris . Tidak seperti menu lainnya , widget ini akan dengan mudah masuk template BlogSpot tanpa konflik desain . Hal ini diposisikan di bagian paling atas dari blog Anda untuk menarik pembaca paling . Langkah-langkah instalasi yang menyenangkan untuk mencoba dan sangat mudah . Menu bekerja dengan baik pada semua browser utama yaitu : IE7 + , Safari , Chrome , Mozilla dan Opera . Mari menambahkannya ke blog Anda dan menyingkirkan setiap menu besar ada yang terbukti tidak kurang dari sebuah masalah.
![Saya]( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHSkH6mVXmMssEBlQNmiZdc3X_apzcHtBKg9C785mwHZSzg5MgTX614Gbgbl6evCFQ0M1HAfUOXf4h3lCZnajJ_AnsDN5an0yOjqXMO9fmzbnfe4bZ5V2QfUp1nqoE_lfVBL6Pafd0dr0/?imgmax=800 )
Menambahkannya ke blogger
Pergi Untuk Blogger > Template
Backup template Anda
Klik Edit HTML > Lanjutkan
Cari Untuk <head > dan tepat di bawah itu sisipkan script ini :
Sekarang mencari body class. yaitu : Tampak seperti ini dengan beberapa kode di dalamnya
body {
----
---
)
Menambahkannya ke blogger
Pergi Untuk Blogger > Template
Backup template Anda
Klik Edit HTML > Lanjutkan
Cari Untuk <head > dan tepat di bawah itu sisipkan script ini :
<script src='http://downloads.mybloggertricks.com/jquery-pack-colourful.js' type='text/javascript'></script><script src='http://downloads.mybloggertricks.com/jcarousel-colourful.js' type='text/javascript'></script><script src='http://downloads.mybloggertricks.com/files/mt-colourful.js' type='text/javascript'></script>
Sekarang mencari body class. yaitu : Tampak seperti ini dengan beberapa kode di dalamnya
body {
----
---
)
sisipkan nilai-nilai berikut :
body {
margin:0px
padding:0px;
---
---
}
Silahkan cari lagi kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'>
Tepat di bawah itu paste kode terkompresi berikut
<!--START OF COLOURFUL TABS BY backlinkpr1.co.vu--><style>/*------- Colourful Tabs Menu by www.MyBloggerTricks.com -------*/.MBT-Nav-container {border: 1px solid #cfcfcf;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXi02rlz5u7Cu7WScV1j67LYHa3i3aC5SFn7c-hzPsZRqPaWsxjFeXfeHvOX5bgRPK9Mx6lRYLSzglbbf6j3ZYFZ3SjsjXKxuh_i-_pQUKBFVUmr9i-cqW7kRQwifSVDwHK_3CjlYPs9k/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/AVvXsEgXi02rlz5u7Cu7WScV1j67LYHa3i3aC5SFn7c-hzPsZRqPaWsxjFeXfeHvOX5bgRPK9Mx6lRYLSzglbbf6j3ZYFZ3SjsjXKxuh_i-_pQUKBFVUmr9i-cqW7kRQwifSVDwHK_3CjlYPs9k/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/AVvXsEiihaRw1KaUKfPigIAJhZHjOqjEeweXh6Cy4i7qA9IRdF65JNcA4yYlhGQBWaOihZpnG3misgo2Yd-588rT6qRVZDwtW5mm0WMTKBfv5Bxrfn0DhSvhh2PolRJ7owu6xGEw1_G8F7GirZA/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/AVvXsEiin-Ukf9hOvHpFMKo6ruT1h-mo63kUf-JH2DArYiCp2Ax4XfkgUE-9RLPlWV1TdeXZALFG1YzGZM_eB57V60iQUbwqhbJaWafFTcen2S8rZTZUNUjtI-XmyEhoKY02SJzit6odme1Hdi0/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/AVvXsEiin-Ukf9hOvHpFMKo6ruT1h-mo63kUf-JH2DArYiCp2Ax4XfkgUE-9RLPlWV1TdeXZALFG1YzGZM_eB57V60iQUbwqhbJaWafFTcen2S8rZTZUNUjtI-XmyEhoKY02SJzit6odme1Hdi0/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/AVvXsEjt7pbBcLZVR7vyG9l_Xet0tbLMdIG7kzmWTBFJiK27BG3o-7sn2j5wbhTFTpDoTLfcqa44YeqSNE9N-qaeOwwcldsD8s118UZfn-3h8XuPPtmgXbzU2DKD7_XdVwn42Mgpv0MyXYcyIOs/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/AVvXsEi0WU8ASiz85HhMECDRmkJymI3IjT-mgfEDLyjzw9giVTQBupyfV-yz2kYtVnst6X9R8BvCRfQw5lGBHDUVOhA5rbZvh6IN0mTw9LoTfmDLhhpXNLcNlIjn0f_Oq-iS7EKOydTP0lROVl8/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/AVvXsEhC7dqBEi9hE-2Jca_etjnXmkR8JPZEuxViQleurEy_JmOt6xDz-w8E42AVzgWnujSaDDKs7RaL3f6Et6sZfjaQLUqIIT-cZw-EGOSeTrbg042gnYQLaFRIjl7tKUQgVIAVw69GAvDzNBg/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/AVvXsEgVQyQg-L2ZcItdxOAhHxwsuY5j8QS9k4mgUsMo46_ndk0TDOgmecNEUe_-Qgtim7_h4C10UBZaVewYftzHzO97kWLTlQz0zlIxUncXY9p-nw2wyWN-8gb9-r7-qtGaZI8u83UfUvEBRes/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/AVvXsEi4jnUmHfRCme_V6xLpwo6tC7IsaJFMuosDo3SC25dQupQ6lMJ3_H_zay62mNjsRR3r3cKDHDF48sSi73PNzRKukkldxlMl4V5dTPOBf5gmAdDxrDTxefKwptsxmus66mzYTZbvfHWde2M/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='#'>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='#'>TAB 6</a></li><!--<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>--><!--<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>--><!--<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li>--><!--<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li>--><li style='clear: both;'/></ul></div><!--END OF COLOURFUL TABS BY backlinkpr1.co.vu-->
Simpan.