Kali ini saya akan share artikel tentang Cara membuat Menu di Blog, Namun menu yang akan saya kasih triknya ini sangat mudah untuk membuat dan memasangnya di blog, karena sobat tidak akan menggunakan Edit Template, cukup hanya dipasang pada Tata Letak Atau Rancangan Blog saja, Menu yang saya maksud adalah Menu Drop Down Horisontal Melayang Di Blog.
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".
3. Langkah selanjutnya silahkan sobat masukkan semua kode script berikut di bawah ini:
<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/AVvXsEjd3ofYNxpjvPNogeD4ozXo4RzmExWx60H-kelWOYoRfCgjL5FXG3Pktif7h5JkqCJIUILt83THmlJGoNWuyc9sxm0sbGOJmGrMXnT8F0GHh65HDmHZAwRwzMam_VHMNhTuRWBPp-MltaHF/)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://bagong-kewez.blogspot.com/'>Home</a></li>
<li><a href='Ganti link sobat' target='_blank'>Daftar Isi</a></li>
<li><a href='http://bagong-kewez.blogspot.com/search/label/Tutorial%20Blog' target='_blank'>Tutorial Blog</a>
<ul class='children'>
<li><a href='Ganti link sobat' target='_blank'>Download Aplikasi</a></li>
<li><a href='Ganti link sobat' target='_blank'>Download Game</a></li>
<li><a href='Ganti link sobat' target='_blank'>Download Icon</a></li>
<li><a href='Ganti link sobat' target='_blank'>Download MP3</a></li>
<li><a href='Ganti link sobat' target='_blank'>Download Software</a></li>
<li><a href='Ganti link sobat' target='_blank'>Download Template</a></li>
</ul>
</li>
<li><a href='http://bagong-kewez.blogspot.com/p/about-me.html' target='_blank'>About Me</a>
<ul class='children'>
<li><a href='Ganti link sobat' target='_blank'>VIDEO FILM</a></li>
<li><a href='Ganti link sobat' target='_blank'>VIDEO ORKES</a></li>
<li><a href='Ganti link sobat' target='_blank'>VIDEO LAGU</a></li>
</ul>
</li>
<li><a href='Ganti link sobat' target='_blank'>Tips And Triks</a>
<ul class='children'>
<li><a href='Ganti link sobat' target='_blank'>Tips Blogger</a></li>
<li><a href='Ganti link sobat' target='_blank'>Trik Facebook</a></li>
<li><a href='Ganti link sobat' target='_blank'>Trik Handpone</a></li>
<li><a href='Ganti link sobat' target='_blank'>Pernak-pernik Blog</a></li>
</ul>
</li>
<li><a href='http://bagong-kewez.blogspot.com/'>Tutorial Blog</a>
<ul class='children' target='_blank'>
<li><a href='Ganti link sobat' target='_blank'>Tutorial Blogger</a></li>
<li><a href='Ganti link sobat' target='_blank'>Tutorial Photosop</a></li>
</ul>
</li>
<li><a href='Ganti link sobat' title='tv online' target='_blank'>Tv Online</a>
<ul class='children'>
<li><a href='Ganti link sobat'>INDOSIAR</a></li>
<li><a href='Ganti link sobat' target='_blank'>RCTI</a></li>
</ul>
</li>
<li><a href='http://bagong-kewez.blogspot.com/p/tukar-link.html' target='_blank'><blink>Tukar Link Blog</blink></a></li>
<li><a href='http://bagong-kewez.blogspot.com/2012/04/informasi-pasang-iklan.html' title='GEONG GEONG' target='_blank'><blink>GEONG GEONG</blink></a></li>
</ul>
</div>
Keterangan :
- Silahkan sobat ganti Link Url nya yang berwarna BIRU dengan URL yang sobat inginkan.
- Warna MERAH adalah Menu yang akan di tampilkan, silahkan sobat ganti.
4. Silahkan sobat Simpan dan Lihat hasilnya.
12 comments
nice post
IZIN COPAS
@Pramu Wibawanto : silahkan gan , tapi jangan lupa pasang sumber link .
izin copas agann
silahkan sob tapi jangan lupa pasang link aktif
thanks sob
waahh Nice info... :)
Makasih ya informasi'y
jangan lupa mampir kesini ya..
http://quantamultimedia.com/
terimakasih ^_^
sama - sama gan .
mantap nih gan.. makasih
Sama - sama gan .
Tutorialnya keren, Thanks ilmunya sdh di share.
Lebih keren lagi Admin nya :D . sama - sama sob . salam kenal dari admin
Bijaklah dalam berkomentar
EmoticonEmoticon