Untuk Cara Membuat Menu Drop Down Horisontal Melayang di Blog, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
1. Silahkan >> "Login/Masuk" ke akun blog sobat.
2. Kemudian pilih >> "Rancangan" atau "Tata Letak" >> "Tambah gadget", Lalu pilih >> "HTML/ java script".
<style type="text/css">
#kucopas 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;}#kucopas li .current{color: transparant;}#kucopas li a:hover, #kucopas 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;}#kucopas {width: auto;float: left;margin: 0;padding: 0;}#kucopas {margin: 0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding: 0;}#kucopas li {list-style: none;margin: 0;padding: 0;}#kucopas li a, #kucopas li a:link, #kucopas li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kucopas li a:hover, #kucopas li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kucopas li li a, #kucopas li li a:link, #kucopas 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;}#kucopas li li a:hover, #kucopas 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;}#kucopas li {float: left;padding: 0;}#kucopas li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kucopas li ul a {width: 140px;}#kucopas li ul ul {margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul, #kucopas li.sfhover ul ul, #kucopas li.sfhover ul ul ul {left: -999em;}#kucopas li:hover ul, #kucopas li li:hover ul, #kucopas li li li:hover ul, #kucopas li.sfhover ul, #kucopas li li.sfhover ul, #kucopas li li li.sfhover ul {left: auto;}#kucopas li:hover, #kucopas li.sfhover {position: static;}#footer-column-divide {clear:both;}#kucopas{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvKIvuIVhjWk_jROzSZANJgvwrL6JN1RyWwPFX3Z9vIru9o8aEhmel4vNLs2sR0h3rbqVLPmMWMWdQRfPaxN0frL7xufpSSvLGnpvNFrGeEXLgpMR-z7e8H6i_IOXzlnbhzd6Mgip72Ao/)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='kucopas'>
<ul id='kucopas'>
<li><a href='http://ikrarakbar.blogspot.com/'>Home</a></li>
<li><a href='http://ikrarakbar.blogspot.com' target='_blank'>Blog Keren</a></li>
<li><a href='http://ikrarakbar.blogspot.com/' target='_blank'>Download</a>
<ul class='children'>
<li><a href='http://ikrarakbar.blogspot.com/search/label/Software' target='_blank'>Download Aplikasi</a></li>
<li><a href='http://gamerpub.com/' target='_blank'>Download Game</a></li>
<li><a href='http://findicons.com/' target='_blank'>Download Icon</a></li>
<li><a href='Ganti link sobat' target='_blank'>Download MP3</a></li>
<li><a href='http://mp3skull.com/' target='_blank'>Download Software</a></li>
<li><a href='http://btemplates.com/' target='_blank'>Download Template</a></li>
</ul>
</li>
<li><a href='http://ikrarakbar.blogspot.com/' target='_blank'>VIDEO& FILM</a>
<ul class='children'>
<li><a href='http://www.narutobleachlover.net/' target='_blank'>FILM NARUTO</a></li>
<li><a href='http://yuotube.com' target='_blank'>VIDEO LAGU</a></li>
</ul>
</li>
<li><a href='http://ikrarakbar.blogspot.com' target='_blank'>Tips And Triks</a>
<ul class='children'>
<li><a href='http://ikrarakbar.blogspot.com/search/label/Blogger' target='_blank'>Tips Blogger</a></li>
<li><a href='http://ikrarakbar.blogspot.com/search/label/Facebook' target='_blank'>Trik Facebook</a></li>
<li><a href='http://tips-trik-seputar-ponsel.blogspot.com/' target='_blank'>Trik Handpone</a></li>
<li><a href='http://ikrarakbar.blogspot.com/search/label/Blogger' target='_blank'>Pernak-pernik Blog</a></li>
</ul>
</li>
<li><a href='http://ikrarakbar.blogspot.com/'>Tutorial Blog</a>
<ul class='children' target='_blank'>
<li><a href='http://ikrarakbar.blogspot.com/search/label/Blogger' target='_blank'>Tutorial Blogger</a></li>
<li><a href='http://www.photoshopid.com/' target='_blank'>Tutorial Photosop</a></li>
</ul>
</li>
<li><a href='http://mivo.tv/home.php' title='tv online' target='_blank'>Tv Online</a></li>
<li><a href='http://ikrarakbar.blogspot.com/' target='_blank'><blink>LINK SAHABAT</blink></a>
<ul class='children' target='_blank'>
<li><a href='http://rasmanaquariuz.blogspot.com/' target='_blank'>Rasman Aquariuz</a></li>
<li><a href='http://poetrasmk.com/' target='_blank'>Rasdan Doskhi</a></li>
<li><a href='http://fachrykbmw.blogspot.com/' target='_blank'>Fachryk Bmw</a></li>
</ul>
</li>
<li><a href='www.smkn1tomoni.sch.id' title='SMK NEG. 1 TOMONI' target='_blank'><blink>SMK NEG. 1 TOMONI</blink></a></li>
</ul>
</div>
4. Silahkan sobat Simpan dan Lihat hasilnya.
Keterangan : "copasdit ( Copy-Paste-Edit) Link anda sendiri"
Semoga bermanfaat postingan kali ini..
SALAM "TIPS & TRIK BLOGGER"
Related Articles :
Cara Membuat Tanda Tangan di Blog Mungkin diantara teman-teman blogger yang pernah melihat di blog orang lain ada sebuah gambar tulisan yang se ... 
Membuat Komentar Terbaru dengan Gambar Widget ini menggunakan javascript dan sangat mudah untuk diinstal. Sobat dapat memasang widget ini pada blog anda untuk sekedar ... 
Page Navigasi Untuk BloggerAkhirnya setelah lama menunggu saya mendapatkan hal yang menarik yaitu menampilkan Page Navigasi yang letaknya pada footer. Caranya ... Jquery Multi Level Menu Horizontal Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang ca ...
Cara Custom Domain Di Blogger/blogspot Kali ini kita akan membahas cara custom domain di blogger/blogspot.Yang dimaksud custom domain di blogger dalam posting saya kali in ...
Tidak ada komentar:
Posting Komentar