Penting untuk diperhatikan !
Save-As Copy template anda sebelum mengotak-atik kode HTML di blog anda. Untuk menghindari hal-hal yang tidak diinginkan.. |
Langsung ke topic ya..
Login ke bloger dan langsung masuk ke Edit HTML.
Cari kode </b:skin>
Copy paste kode dibawah ini diatas kode </b:skin>
.jqueryslidemenu{ font: bold 12px Verdana; background: #414141; width: 100%; } .jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #414141; /*background of tabs (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; } * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; } .jqueryslidemenu ul li a:hover{ background: black; /*tab link background during hover state*/ color: white; } /*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #eff9ff; color: black; } /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position: absolute; top: 12px; right: 7px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; } |
Cari code </head>
Copy paste code dibawah ini sebelum code </head>
<!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script src=' http://h1.ripway.com/anshul555/slidemenu_horiz.js ' type='text/javascript'/> |
Cari code seperti dibawah ini :
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/> </b:section> </div> |
Copy paste code dibawah ini setelah code tersebut diatas :
<div class='jqueryslidemenu' id='myslidemenu'> <ul> <li><a href='http://maguwo.blogspot.com/'>Home</a></li> <li><a href='#'>Tentang Kami</a></li> <li><a href='#'>Tutorial Blog</a> <ul> <li><a href='#'>Sub Item 1.1</a></li> <li><a href='#'>Sub Item 1.2</a></li> <li><a href='#'>Sub Item 1.3</a></li> <li><a href='#'>Sub Item 1.4</a></li> </ul> </li> <li><a href='#'>Tutorial</a></li> <li><a href='#'>Folder 2</a> <ul> <li><a href='#'>Sub Item 2.1</a></li> <li><a href='#'>Folder 2.1</a> <ul> <li><a href='#'>Sub Item 2.1.1</a></li> <li><a href='#'>Sub Item 2.1.2</a></li> <li><a href='#'>Folder 3.1.1</a> <ul> <li><a href='#'>Sub Item 3.1.1.1</a></li> <li><a href='#'>Sub Item 3.1.1.2</a></li> <li><a href='#'>Sub Item 3.1.1.3</a></li> <li><a href='#'>Sub Item 3.1.1.4</a></li> <li><a href='#'>Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href='#'>Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href='http://maguwo.blogspot.com/'>Link another Web</a></li> </ul> <br style='clear: left'/> </div> |
Terus di SAVE, Selamat Mencoba
Tidak ada komentar:
Posting Komentar