Cara Membuat Menu Drop Down Horizontal Melayang Di Blog

Pada Tutotial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Tentang Bagaimana Cara Membuat Sudut Blog Menjadi Tumpul.Dan Pada Tutorial Yg Sama Juga Yaitu Tutorial Blog Saya Akan Menjelaskan Pada Sobat Tentang Bagaimana Cara Membuat Menu Drop Down Horizontal Melayang Di Blog. Menu Drop Down Ini Banyak Menggunakan CSS,Dan Tidak Menggunakan Link Gambar. Melainkan CSS Gradient, Menu Drop Down Melayang Ini Sudah Saya Praktekan Di Blog Saya Yang Berjudul Website Nokia Center Muhammadsuteja. Kalau Sobat Semua Mau Melihat Bagaimana Bentuk Menu Drop Down Melayang Ini ,..Sobat Semua Bisa
 Mengikuti Langkah Langkah Yg Akan Saya Buat Nanti,..
Dan Bila Sobat Semua Penasaran Bagaimana Jadinya  Sobat Semua Bisa Melihat Demonya Dengan Cara Klik
Disini

Baiklah Saya Akan Langsung Memulai Langkah-langkahnya:

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan -->Tambah Gadget  Dan Pilih HTML Java Script
3. Dan Copy Paste Kode Berikut Tepat Didalamnya

<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: #4B0082;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: #00FFFF;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/AVvXsEhLbYTkoU3OkHcXDE_V_qlVfohrD_KMkiI_ow93VBgIY4RTqQGJgbHLPONz19F4zm-95MgQebvsCm7ewo15pzFY5MIv0gP5OPDstoaPpdW2YpQ6khUOxET4W4YJb6HnOqSJdW_5zLLeE6_a/)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='Disini letak link sobat'>Home</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Daftar Isi</a></li>
<li><a href='http://tejahtc.blogspot.com/' target='_blank'>Download</a>
<ul class='children'>
<li><a href='Disini letak link sobat' target='_blank'>Download Aplikasi</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Download Game</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Download Icon</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Download MP3</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Download Software</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Download Template</a></li>
</ul>
</li>
<li><a href='http://tejahtc.blogspot.com/' target='_blank'>Pantun</a>
<ul class='children'>
<li><a href='Disini letak link sobat' target='_blank'>Pantun Agama</a></li>
<li><a href='Disini letak link sobat' target='_blank'>pantun Humor</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Pantun Romantis</a></li>
</ul>
</li>
<li><a href='Disini letak link sobat' target='_blank'>Tips And Triks</a>
<ul class='children'>
<li><a href='Disini letak link sobat' target='_blank'>Tips Blogger</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Trik Facebook</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Trik Handpone</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Pernak-pernik Blog</a></li>
</ul>
</li>
<li><a href='http://tejahtc.blogspot.com/'>Tutorial</a>
<ul class='children' target='_blank'>
<li><a href='Disini letak link sobat' target='_blank'>Tutorial Blog</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Tutorial Photosop</a></li>
</ul>
</li>
<li><a href='Disini letak link sobat' title='tv online' target='_blank'>Tv Online</a>
<ul class='children'>
<li><a href='Disini letak link sobat'>Antv</a></li>
<li><a href='Disini letak link sobat' target='_blank'>Tv One</a></li>
</ul>
</li>
<li><a href='Disini letak link sobat' target='_blank'><blink>Tukar Link</blink></a></li>
<li><a href='http://ojelhtc.blogspot.com' title='htc' target='_blank'><blink>HTC</blink></a></li>
</ul>
</div>

 

  4.Simpan Dan Lihat Hasilnya

SELAMAT MENCOBA DAN SEMOGA BERHASIL

Artikel Terkait :

Tips Mempercantik Blog

• Karakter guru galak dan guru baik hati dibutuhkan di setiap sekolah
• Cara Mudah Memasang Kotak Komentar Facebook Di Blog
• Mengganti Kata SAID Yang Ada Pada Komentar blog
• Cara Membuat Foto/gambar Efek Memutar-mutar Dan Membesar Saat Disorot Mouse
• Cara Membuat Balon Tooltip Otomatis Ke semua Title Yg Ada Di Blog
• Cara Membuat Kotak Area Dengan Efek Membesar Saat Disorot Mouse
• Cara Membuat Widget Update Status twitter di blog
• Membuat Widget Menghilang Dan Berpindah Di Blog
• Membuat Menu Slide melayang di bagian kiri blog dengan css
• Cara Baru Membuat Slide Profil Di Blog Dengan Css
• Cara membuat menu warna-warni saat mouse menyorotnya Dengan Css
• cara membuat widget tersembunyi dengan css3
• cara membuat menu slide info di blog dengan css
• Cara Membuat Efek Blur Pada Semua Gambar Yang Ada Di Blog Dengan Css
• Cara Membuat Screensaver Dengan Css
• Cara Membuat Link Bergoyang Dengan Javascript
• Cara membuat form komentar klasik di atas kotak komentar Blog
• Cara Membuat Post Hover di Blog Dengan CSS
• Rounded Corner | Membuat Sudut menjadi Tumpul
• Menghilangkan Garis Bintik-bintik Jejak Link
• Membuat Efek Animasi Blur Otomatis Di Blog
• Cara Membuat Link Blog Mengeluarkan Cahaya Kuning
• Cara Baru Membuat Daftar Isi Jquery Accordion Di Blog
• Cara Membuat Toolbar Atau Navbar Melayang Di Blog

Diposting oleh learning di 06.29