CARA MEMBUAT MENU HORIZONTAL MELAYANG DI BLOGGER

بِسْــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم
Selamat sore sobat.... di kesempatan ini KangJuns mau mencoba memperjelas tentang bikin menu Horizontal yang melayang silahkan LIHAT DEMO nya.
 Adapun cara nya sebagai berikut:
Seperti biasa sobat masuk dulu ke Blogger sobat,,pilih TEMPLATE-Edit TEMPLATE cari code seperti ini ]]></b:skin> setelah ketemu coppy code di bawah ini lalu paste kan tepat di atas ]]></b:skin>

#sticky1 { position:fixed;_position:absolute;top:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }#toppic {width:1500px;height:30px;background:#2c2c2c;border-top:0px solid #444;margin:0 auto;padding:0;overflow:hidden;text-shadow:1px 1px 2px #002851} #topwrapper {width:1500px;height:30px;margin:0 auto;padding:0} .clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;} #top {width:100%;} #top, #top ul {padding: 0;margin: 0;list-style: none;} #top a {border-right:1px solid #444;border-left:1px solid #111;text-align:left;display: block;text-decoration: none;padding:6px 12px 8px;font:12px Arial;text-transform:none;color:#eee;} #top a:hover {background:#111;} #top a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-djWDhyw67fhwFqeOXtBNxCSBdPhct0UurFqD8rcTylBrZIyAFRfVKsED3F9NvKrm7oVX-ALqD6udp8HjSukA2B2B7oGawVpzgWJd5VVUYQPaWQ_UipQoNL8rM8afiDuY17EVB2Y3X0/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 6px 24px 8px 12px;background-position: right center;} #top li {float: left;position: relative;} #top li {position: static; width: auto;} #top li ul, #top ul li {width:240px;} #top ul li a {text-align:left;padding: 6px 10px;font-size:13px;font-weight:normal;text-transform:none;font-family:Arial, sans-serif;border:none;} #top li ul {z-index:100;position: absolute;display: none;background-color:#111;margin-left:-60px;padding:10px 0;-moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius:6px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #top li ul li {width:120px;float:left;margin:0;padding:0} #top li:hover ul, #top li.hvr ul {display: block;} #top li:hover ul a, #top li.hvr ul a {color:#ddd;background-color:transparent;text-decoration:none;} #top ul a:hover {text-decoration:underline!important;color:yellow}
 Langkah selanjut ya sobar cari code </body> lalu coppy code di bawah ini dan pastekan di atas code </body>

<div id='sticky1'> <div id='toppic'> <div id='topwrapper'> <ul id='top'> <li class='home'><a href='/'>Home</a></li> <li><a href='#'>Menu 1</a></li> <li><a class='trigger' href='#'>Drop menu 1</a> <ul> <li><a href='/'>Sub menu 1</a></li> <li><a href='/'>Sub menu 2</a></li> <li><a href='/'>Sub menu 3</a></li> <li><a href='/'>Sub menu 4</a></li> </ul> </li> <li><a class='trigger' href='#'>Drop menu 2</a> <ul> <li><a href='/'>Sub menu 1</a></li> <li><a href='/'>Sub menu 2</a></li> <li><a href='/'>Sub menu 3</a></li> <li><a href='/'>Sub menu 4</a></li> <li><a href='/'>Sub menu 5</a></li> <li><a href='/'>Sub menu 6</a></li> </ul> </li> <li><a class='trigger' href='#'>Drop menu 3</a> <ul> <li><a href='/'>Sub menu 1</a></li> <li><a href='/'>Sub menu 2</a></li> <li><a href='/'>Sub menu 3</a></li> <li><a href='/'>Sub menu 4</a></li> <li><a href='/'>Sub menu 5</a></li> <li><a href='/'>Sub menu 6</a></li> <li><a href='/'>Sub menu 7</a></li> <li><a href='/'>Sub menu 8</a></li> </ul> </li> <li><a href='#'>Menu 2</a></li> </ul> </div> </div></div>
 Ganti # , / denagan link menu sobat
Lalu Simpan template dan lihat Hasil nya,,,semoga bermanfa'at,
Share this article :

Post a Comment

Anda telah membaca artikel kangjuns,,,silahkan tinggalkan comentar nya,, .Mohon Jangan Spam dan jangan tinggalkan link aktif....Terima kasih.

 
Support : Modifikation | Template | Kang Juns
Copyright © 2013. KANG JUNS INFO - All Rights Reserved
Template Created by maskolis Published by mas template
Proudly powered by Blogger