Sesuai judul di atas yaitu cara membuat menu dropdown horizontal tampil melayang di blog sobat tau kan seperti apa? itu lohh seperti menu di blog saya ini tuhh liat di atas gimana tertarik ga? baca terus ya?
UNTUK LEBIH JELASNYA LIHAT GAMBAR DI BAWAH...
Ohh ia sebelumnya saya ucapkan permohonan maaf saya kepada pengunjung saya yang menanyakan cara membuat menu dropdown horizontal tampil melayang di blog dan saya baru membalasnya, dikarenakan saya sibuk hee, sekali lagi saya minta maaf kepada admin Blog SDN Kauman.
Oke tanpa panjang lebar langsung saja ke TKP sob.
1. pastinya masuk alias login ke akun blog sobat, klik Rancangan => Elemen Laman
2. klik Tambah Gadget => pilih Html/ JavaScrip dan masukan kode di bawah 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: #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/AVvXsEj3nf55Y0P7nRR87Dup_V0yAFQOAhzEsfSu0AM6uNrkiJymdn_tNVUb9J-52T53wyBSb5-9bHxA5QnZBsas0Me9VJlZBNPhYFCZiM40Onh3zRIvzFB6Slk6p5rXtU8lDmz8RtoOMcWDEdFi/)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='http://theant-budiana.blogspot.com'>Home</a></li>
<li><a href='http://theant-budiana.blogspot.com/2008/12/daftar-isi.html' target='_blank'>Daftar Isi</a></li>
<li><a href='#' target='_blank'>Tutorial</a>
<ul class='children'>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/tips%20dan%20trick'target="_BLANK">BLOGGER</a></li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/tips%20dan%20trick%20wordpress'target="_BLANK">WORDPRESS</a></li>
</ul>
</li>
<li><a href='http://www.theant-budiana.blogspot.com/2011/07/tv-streamings-mivo.html' target='_blank'>TV Online</a>
<li><a href='#' target='_blank'>Software</a>
<ul class='children'>
<li><a href='http://www.theant-budiana.blogspot.com/2011/04/apa-itu-software.html'target="_blank">PENGERTIAN</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/software%20pc'target="_blank">PC</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/symbian'target="_blank">SYMBIAN</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/java'target="_blank">JAVA</a> </li>
</ul>
</li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/islami'>Islami
<li><a href='#' title='lihat yang lainnya juga sob, disini!!!' target='_blank'>Other</a>
<ul class='children'>
<li><a href='https://www.google.com/accounts/newaccount?hl=in&continue=http://www.blogger.com/create-blog.g&service=blogger&naui=8'target="_blank">DAFTAR BLOG</a></li>
<li><a href="http://theant-budiana.blogspot.com/search/label/goresan%20tangan"target="_blank">GORESAN TANGAN</a></li>
<li><a href="http://theant-budiana.blogspot.com/search/label/biantara?&max-results=9"target="_blank">BIANTARA</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Pramuka</a>
<ul class='children'>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/pramuka'target="_blank">Pengertian,Sejarah & Materi</a> </li>
<li><a href="http://www.theant-budiana.blogspot.com/search/label/Pramuka%20Siaga"target="_blank">SIAGA</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/pramuka%20penggalang'target="_blank">PENGGALANG</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/pramuka%20penegak%20dan%20pandega'target="_blank">PENEGAK & PANDEGA</a> </li> </ul>
</li>
<li><a href='http://www.theant-budiana.blogspot.com/2011/10/cara-sederhana-dan-manjur-populerkan.html' target='_blank'><blink>Tukar Link</blink></a></li>
<li><a href='http://theant-budiana.blogspot.com/2011/11/forum-pembicaraan-blog-urang-sunda.html' title='disinilah tempat sobat meninngalkan jejak dengan isi forum atau buku tamu' target='_blank'><blink>Buku Tamu</blink></a></li>
</a></li></li></ul>
</div>
3.klik simpan dan lihat hasilnya...
Warning :
jangan lupa ganti url dan nama kode di atas dengan url dan nama blog sobat.
Selamat mencoba dan jangan lupa tinggalkan pesan sobat, sampai ketemu di postingan saya berikutnya..
UNTUK LEBIH JELASNYA LIHAT GAMBAR DI BAWAH...
Ohh ia sebelumnya saya ucapkan permohonan maaf saya kepada pengunjung saya yang menanyakan cara membuat menu dropdown horizontal tampil melayang di blog dan saya baru membalasnya, dikarenakan saya sibuk hee, sekali lagi saya minta maaf kepada admin Blog SDN Kauman.
Oke tanpa panjang lebar langsung saja ke TKP sob.
1. pastinya masuk alias login ke akun blog sobat, klik Rancangan => Elemen Laman
2. klik Tambah Gadget => pilih Html/ JavaScrip dan masukan kode di bawah 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: #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/AVvXsEj3nf55Y0P7nRR87Dup_V0yAFQOAhzEsfSu0AM6uNrkiJymdn_tNVUb9J-52T53wyBSb5-9bHxA5QnZBsas0Me9VJlZBNPhYFCZiM40Onh3zRIvzFB6Slk6p5rXtU8lDmz8RtoOMcWDEdFi/)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='http://theant-budiana.blogspot.com'>Home</a></li>
<li><a href='http://theant-budiana.blogspot.com/2008/12/daftar-isi.html' target='_blank'>Daftar Isi</a></li>
<li><a href='#' target='_blank'>Tutorial</a>
<ul class='children'>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/tips%20dan%20trick'target="_BLANK">BLOGGER</a></li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/tips%20dan%20trick%20wordpress'target="_BLANK">WORDPRESS</a></li>
</ul>
</li>
<li><a href='http://www.theant-budiana.blogspot.com/2011/07/tv-streamings-mivo.html' target='_blank'>TV Online</a>
<li><a href='#' target='_blank'>Software</a>
<ul class='children'>
<li><a href='http://www.theant-budiana.blogspot.com/2011/04/apa-itu-software.html'target="_blank">PENGERTIAN</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/software%20pc'target="_blank">PC</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/symbian'target="_blank">SYMBIAN</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/java'target="_blank">JAVA</a> </li>
</ul>
</li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/islami'>Islami
<li><a href='#' title='lihat yang lainnya juga sob, disini!!!' target='_blank'>Other</a>
<ul class='children'>
<li><a href='https://www.google.com/accounts/newaccount?hl=in&continue=http://www.blogger.com/create-blog.g&service=blogger&naui=8'target="_blank">DAFTAR BLOG</a></li>
<li><a href="http://theant-budiana.blogspot.com/search/label/goresan%20tangan"target="_blank">GORESAN TANGAN</a></li>
<li><a href="http://theant-budiana.blogspot.com/search/label/biantara?&max-results=9"target="_blank">BIANTARA</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Pramuka</a>
<ul class='children'>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/pramuka'target="_blank">Pengertian,Sejarah & Materi</a> </li>
<li><a href="http://www.theant-budiana.blogspot.com/search/label/Pramuka%20Siaga"target="_blank">SIAGA</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/pramuka%20penggalang'target="_blank">PENGGALANG</a> </li>
<li><a href='http://www.theant-budiana.blogspot.com/search/label/pramuka%20penegak%20dan%20pandega'target="_blank">PENEGAK & PANDEGA</a> </li> </ul>
</li>
<li><a href='http://www.theant-budiana.blogspot.com/2011/10/cara-sederhana-dan-manjur-populerkan.html' target='_blank'><blink>Tukar Link</blink></a></li>
<li><a href='http://theant-budiana.blogspot.com/2011/11/forum-pembicaraan-blog-urang-sunda.html' title='disinilah tempat sobat meninngalkan jejak dengan isi forum atau buku tamu' target='_blank'><blink>Buku Tamu</blink></a></li>
</a></li></li></ul>
</div>
3.klik simpan dan lihat hasilnya...
Warning :
jangan lupa ganti url dan nama kode di atas dengan url dan nama blog sobat.
Selamat mencoba dan jangan lupa tinggalkan pesan sobat, sampai ketemu di postingan saya berikutnya..
Theant Budiana About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya
warning Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.
0 comments:
Post a Comment