Cara Membuat DropDown Menu Warna Warni Keren Di Blog - Tutorial kali ini keren banget. Beruntung! Sobat bisa membaca tutorial kali ini. Menu dropdown warna warni pada blog ini dibuat sekeren mungkin.
Buat sobat yang belum ngerti apa itu Menu dropdown. Menu dropdown adalah tempat alternatif link yang sudah dikategorikan kebawah. Menu dropdown ini akan keluar jika kita mengkategorikan kemudian mengkategorikan lagi kategori yang tadi.
Buat sobat yang belum ngerti apa itu Menu dropdown. Menu dropdown adalah tempat alternatif link yang sudah dikategorikan kebawah. Menu dropdown ini akan keluar jika kita mengkategorikan kemudian mengkategorikan lagi kategori yang tadi.
Buat sobat yang benar-benar bingung penjelasan saya diatas, saya akan jelasakan lebih jelas lagi. Coba kita liat animasi diatas, terdapat kategori: BLOGGING, ENTERTAINMENT, dan lain-lain. Nah, didalam kategori BLOGGING di bagi menjadi kategori lagi seperti: SEO, MBT Tools, dan lain-lain. Itu yang disebut menu dropdown.
Tapi jangan salah, Cara Membuat Menu DropDown Keren Di Blog ini dibuat sekeren mungkin. Ini sangat keren. Coba aja, liat blog orang lain yang hanya mempunyai menu dropdown sederhana. Disini menu dropdown nya keren dan responsive.
1. Sign in Blogger
2. Template
3. Edit HTML
4. Cari kode
<head> (agar mempermudah pencarian, klik kotak edit HTML lalu tekan Ctrl+F serentak pada keyboard) 5. Setelah ketemu kode <head> letakkan kode dibawah ini tepat DIBAWAH kode <head> yang sudah sobat cari
<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> <body expr:class='"loading 7. Setelah ketemu kode <body expr:class='"loading letakkan kode dibawah ini tepat DIBAWAH kode <body expr:class='"loading
<style type="text/css">
<style>
.MBT-Nav-container {
border: 1px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXn7j0LcKciACBKWPJAo56KZzupyh8pvZWkAXSBAMqqusKgXXB7Cmphyphenhyphen3Kq2-ugeyf7qCtQkQNzMj6DZbbyMWnPVWkihfSBRg_mDt0d7EIdXKM3HEoXqOxByDfZf0aUUsEWk9nh-1ww7s/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/AVvXsEiXn7j0LcKciACBKWPJAo56KZzupyh8pvZWkAXSBAMqqusKgXXB7Cmphyphenhyphen3Kq2-ugeyf7qCtQkQNzMj6DZbbyMWnPVWkihfSBRg_mDt0d7EIdXKM3HEoXqOxByDfZf0aUUsEWk9nh-1ww7s/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/AVvXsEhcDAy9yx0I9WhxYVXm81-MVy_iBJES8CeW7y4Us-WS8agE2bTET2hUfBcRMbnyPFH7upfEkbAptw0IASMkE5TdKXcmU_IiYPJZTt7ZkgfCgtm4xzZ2rzr5Pi2P4W00Nzp-S5GtM1bsGkI/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/AVvXsEgGlRRdUT6yl2u4j1WHU2LP5lfo6kiYdnVia9RiyBeJNfisgFs9b1yrI9ZOMEp0uYBJGBhyJqTVrYtc6gK50ddVBmwJNxSv5AqeoKvnqskD5qKMNq2e-YT70iiC4lGRQH2b9dMqRTchLOM/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/AVvXsEgGlRRdUT6yl2u4j1WHU2LP5lfo6kiYdnVia9RiyBeJNfisgFs9b1yrI9ZOMEp0uYBJGBhyJqTVrYtc6gK50ddVBmwJNxSv5AqeoKvnqskD5qKMNq2e-YT70iiC4lGRQH2b9dMqRTchLOM/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/AVvXsEikGgEVuO3BkkVnFzEh4XKZeyEhdthatsfBgiVponrLmoBRK6k-v75owf2W8LvApxQPFEySX3lYJpMZkljUHDeFsNIOtbcbZMHhpIn__4RF8dfpRlkqSWnVJtxfxxoN5XjrH5wZkRhEPQ4/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/AVvXsEiSvwwN4LcEfRKXQ_Tueq52YCET9JTnHWXlw2Mmu6FcPpNLs78gYTNn2tDR6d4YU7I05A7e6pFgsmq7UZzDQNE1tg0PZsMKcReM6ZOp_IOGPo0xjGm8wlT5Aledz_O-cPhXnlm0Ovu1zio/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/AVvXsEg9UYnb9zmmUHSEFBAdnu7r-B044ijVcVN29mOQCYqYUQF9gqZ_5x-FuD30lEXOmeHCVR1vFiATUI08Bx_hqgKlTGVfpr_Y4pt6a32e-mwPwLPpUfKhlehmS8XDHt5XrXKak-JBrtwJkqI/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/AVvXsEgnH7_4PEYaQaIQVqR9Aeyq8ihgME3FiTnG_U4_dT7lV7vZ5X7BoOmyTqFfnuRExVNFePgZsA4eJRh4P2vvF1NCvHPMs67FMu1yMM52Paq_VHpauiXyVc94glVcGcR8X69Kp7UlTqLan-E/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/AVvXsEjBw9LGchW0vBeuQmH5I8OMNaxoLyUqXmFiJ-jsr3dmR1y03_lA5jLS70YPyKUUrDJ1-5k-TeM8oUSBoLDD1CklDa4Bgh2n58SzcGCqBRQ1yAkEb9l2-0FGbIngmpuhor7KbW8itxevERI/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='http://fahmifanirius.gq'>TAB 1</a>
<ul class='sub-nav'>
<li><a href='http://fahmifanirius.gq'>SUB TAB 1.1</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 1.2</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 1.3</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 1.4</a></li>
</ul>
</li>
<li class='top-link' id='link-entertainment'><a href='http://fahmifanirius.gq'>TAB 2</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='http://fahmifanirius.gq'>SUB TAB 2.1</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 2.2</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 2.3</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 2.4</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 2.5</a></li>
</ul>
</li>
<li class='top-link' id='link-news'><a href='http://fahmifanirius.gq'>TAB 3</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='http://fahmifanirius.gq'>SUB TAB 3.1</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 3.2</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 3.3</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 3.4</a></li>
</ul>
</li>
<li class='top-link' id='link-life'><a href='http://fahmifanirius.gq'>TAB 4</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='http://fahmifanirius.gq'>SUB TAB 4.1</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 4.2</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 4.3</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 4.4</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 4.5</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 4.6</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 4.7</a></li>
</ul>
</li>
<li class='top-link' id='link-technology'><a href='http://fahmifanirius.gq'>TAB 5</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='http://fahmifanirius.gq'>SUB TAB 5.1</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 5.2</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 5.3</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 5.4</a></li>
<li><a href='http://fahmifanirius.gq'>SUB TAB 5.5</a></li>
</ul>
</li>
<li class='non-vertical-link top-link' id='link-top10'><a href='http://fahmifanirius.gq'>TAB 6</a></li>
<li class='non-vertical-link top-link' id='links-1'><a href='http://fahmifanirius.gq'>TAB 7</a></li>
<li class='non-vertical-link top-link' id='links-2'><a href='http://fahmifanirius.gq'>TAB 8</a></li>
<li class='non-vertical-link top-link' id='links-3'><a href='http://fahmifanirius.gq'>TAB 9</a></li>
<li class='non-vertical-link top-link' id='links-4'><a href='http://fahmifanirius.gq'>TAB 10</a></li>
<li style='clear: both;'/>
</ul>
</div>
9. Simpan perubahan
| Judul | Cara Membuat DropDown Menu Warna Warni Keren Di Blog |
| Deskripsi | Cara membuat dropdown menu warna warni keren di blog membuat kemudahan pengunjung Anda untuk melihat semua laman blog Anda. Menu dropdown disertai CSS warna-warni yang super keren. |
| Author | |
| Author Rating | 87%/ 100% Suara Dari 2314 votes |
Post a Comment