menu drop down diatas header v.2

cara buat menu drop down diatas header
selamat malam sobat ,apa kabarrnya ,,untuk membuat menu seperti gambar berikut cukuplah mudah sobat .. tidak perlu edit html segala ..untuk demonya ada dibawah :

seperti biasa sobat login ke blog sobat .
masuk ke tata letak - add gadget - pilih html javascript -masukkin scrip dibawah ini :

 <style type="text/css"> #msuteja ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#msuteja li .current{color: transparant;}#msuteja li a:hover, #msuteja li a:active {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-H1lyDTbgPy-yKfcTqGUsgxOzyk5N2Fqnxya84EZC5dtnFtKRgvwdQLGHLt7HoI-qWl0nrRpZwCna3Yiuy27fdaiLHfWP0ZH3x1mz5RplHmGpsxMh9sRQHubAdLOHG4xRTU_8MtTLgQI/s1600/background-judul-posting.gif);background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#msuteja {width: auto;float: left;margin: 0;padding: 0;}#msuteja {margin: 0;padding: 0;}#msuteja ul {float: left;list-style: none;margin: 0;padding: 0;}#msuteja li {list-style: none;margin: 0;padding: 0;}#msuteja li a, #msuteja li a:link, #msuteja li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#msuteja li a:hover, #msuteja li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#msuteja li li a, #msuteja li li a:link, #msuteja li li a:visited {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-H1lyDTbgPy-yKfcTqGUsgxOzyk5N2Fqnxya84EZC5dtnFtKRgvwdQLGHLt7HoI-qWl0nrRpZwCna3Yiuy27fdaiLHfWP0ZH3x1mz5RplHmGpsxMh9sRQHubAdLOHG4xRTU_8MtTLgQI/s1600/background-judul-posting.gif);background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#msuteja li li a:hover, #msuteja li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#msuteja li {float: left;padding: 0;}#msuteja li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#msuteja li ul a {width: 140px;}#msuteja li ul ul {margin: -32px 0 0 171px;}#msuteja li:hover ul ul, #msuteja li:hover ul ul ul, #msuteja li.sfhover ul ul, #msuteja li.sfhover ul ul ul {left: -999em;}#msuteja li:hover ul, #msuteja li li:hover ul, #msuteja li li li:hover ul, #msuteja li.sfhover ul, #msuteja li li.sfhover ul, #msuteja li li li.sfhover ul {left: auto;}#msuteja li:hover, #msuteja li.sfhover {position: static;}#footer-column-divide {clear:both;}#msuteja{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnUI1dCFsWWEh2RdkxhiF5c5G0YCp5hksQxTcz_RyszO8AESODTtDParW5XJTGq5L4g9N6QdGVnrWBpLRd2Vp2CbGAacgY97kIDzT8yqUMNObWTcsW02-kQMSOabgQ3U61AtTcyaRXQ4Ie/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> <div id='msuteja'> <ul id='msuteja'> <li><a href='URL'>Menu</a></li> <li><a href='URL'>Menu</a> <ul class='children'> <li><a href='#' target='_blank'>Menu 2.1</a></li> <li><a href= '#'target='_blank'>Menu 2.2</a></li> </ul> </li> <li><a href='URL'>Menu</a> <ul class='children'> <li><a href='#' target='_blank'>Menu 3.1</a></li> <li><a href='#' target='_blank'>Menu 3.2</a></li> </ul> </li> <li><a href='URL '> Menu</a></li> <li><a href='URL '> Menu</a></li> <li><a href='URL'>Menu </a></li> <li><a href='URL'>Menu </a></li> <li><a href='URL'>Menu</a></li> <li><a href='URL'target'_blank'><blink>Menu</blink></a></li> </ul></div> 

 Lalu save & lihat hasilnya xD

Related Posts

Trik Blog

• Mengapa Lantarandigital.co.id adalah Senjata Rahasia Digital Marketing Anda
• Cara membuat populer post slider
• Connect warna HTML
• Cara Membuat Tulisan Bervariasi di Buku Tamu/CBox
• Efek Ringan
• jQuery Carousel dengan UI Kit untuk Blogger
• Membagi Sidebar Menjadi 2 Kolom di Blogspot
• Modifikasi Sidebar di Blogspot
• Memasang Menu Slide-In di Blogspot
• Cara Merubah Lebar Kolom Template
• Cara Membuat Spolier Di Blogspot
• Membuat Border Dan Background Template Blogger
• Mengganti Pager Link Blogger Dengan Icon
• Modifikasi Blockquote Di Blogspot
• Membuat Tombol Back To Top Di Blogger
• Membuat Widget Hanya Tampil di Halaman Tertentu
• Menghilangkan Link Posting Lama dan Posting Baru di Blog
• Membuat Menu dTree di Blogger
• Cara Membuat Read More Otomatis Versi 3
• Pasang Banner di Header Blog
• Membuat 3 Kolom di Bawah Header Blogspot
• Tutorial Membuat Text Area
• Membuat Tab View di Blogspot
• Membuat Menu Drop Down di Blogspot

Anda sedang membaca artikel tentang menu drop down diatas header v.2 dan anda bisa menemukan artikel menu drop down diatas header v.2 ini dengan url http://blackyz-art.blogspot.com/2013/06/menu-drop-down-diatas-header-v2.html. Anda boleh menyebarluaskan atau mengcopy artikel menu drop down diatas header v.2 ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.