Menu Dropdown
3 Juli 2010 3 Komentar
Banyak sekali pernak-pernik yang ditambahkan para blogger ke falam blog-nya, salah satu yang umum dilakukan ialah Menambahkan Menu Dropdown Horizontal pada header. Selain mempercantik blog, menambahkan menu ini juga merupakan salah satu cara memberikan informasi tersendiri kepada pengunjung. Sobat bisa membubuhkan tentang diri Sobat pada menu ini, atau bahkan iklan-iklan tertentu.Tentunya mengasyikkan . . .
Menu ini cukup panjang dan berhubungan dengan kode-kode pada template. Sebelum melakukan langkah-langkah yang satu ini, sebaiknya Sobat membackup dulu template Sobat sebelum diedit, yaitu dengan cara mendownload template Sobat.
Mari kita langsung ke langkah-langkahnya,
1. Login ke Blogger.
2. Klik Tata Letak.
3. Klik Edit HTML.
4. Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.
5. Centang pada Expand Widget Template.
6. Cari kode </b:skin> dan letakkan kode berikut sebelum kode </b:skin>
.jqueryslidemenu{
font: bold 12px Trebuchet MS; 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;}
7. Kemudian letakkan kode berikut sebelum kode </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’/>
8. Cari kode yang mirip seperti ini
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’Judul Blog Sobat (Header)’ type=’Header’/>
</b:section>
</div>
Warna merah : Judul Blog Sobat
9. Kemudian letakkan kode berikut tepat setelah kode di atas
<div class=’jqueryslidemenu’ id=’myslidemenu’>
<ul>
<li><a href=’http://miscah.blogspot.com’>Home</a></li>
<li><a href=’URL’>Daftar Isi</a></li>
<li><a href=’URL’>Tutorial Blog</a>
<ul>
<li><a href=’URL’>Sub Item 1.1</a></li>
<li><a href=’URL’>Sub Item 1.2</a></li>
<li><a href=’URL’>Sub Item 1.3</a></li>
</ul>
</li>
<li><a href=’URL’>Islam</a></li>
<li><a href=’URL’>Folder 2</a>
<ul>
<li><a href=’URL’>Sub Item 2.1</a></li>
<li><a href=’URL’>Folder 2.1</a>
<ul>
<li><a href=’URL’>Sub Item 2.1.1</a></li>
<li><a href=’URL’>Sub Item 2.1.2</a></li>
<li><a href=’URL’>Folder 3.1.1</a>
<ul>
<li><a href=’URL’>Sub Item 3.1.1.1</a></li>
<li><a href=’URL’>Sub Item 3.1.1.2</a></li>
<li><a href=’URL’>Sub Item 3.1.1.3</a></li>
<li><a href=’URL’>Sub Item 3.1.1.4</a></li>
</ul>
</li>
<li><a href=’URL’>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=’http://prasutan.blogspot.com’>Link Exchange</a></li>
</ul>
<br style=’clear: left’/>
</div>
10.Setelah itu Simpan Template sobat.
Tanda ‘URL’ (warna merah) sobat ganti sendiri dengan url yang Sobat inginkan. Oke sob, selamat mencoba ya !
HIDAYAT Blog's 
