Menu Drop Down - Kali ini saya akan
membahas Cara Membuat Multi Menu Horizontal Drop Down Di Blog, menu yang
satu ini berbeda dengan menu drop down lainnya, yang satu ini menu drop down
nya bisa bercabang lagi lebih banyak, menu ini lumayan bermanfaat bagi soabt
yang ingin menyimpan link yang cukup banyak. Mau kan? hehehe, mari kita ikuti
bersama :)
Cara Membuat Multi Menu Drop Down :
1. Login ke Blog
sobat.
2. Pilih Menu Edit HTML
3. cari kode ]]></b:skin>
4. Setelah
ketemu letakan kode di bawah ini tepat di atas kode nomor 2 atau ]]></b:skin>
.ddsmoothmenu{font: bold 12px Verdana;background:
#414141; /*background of menu bar (default state)*/width: 100%;}.ddsmoothmenu
ul{z-index:100;margin: 0;padding: 0;list-style-type: none;}/*Top level list
items*/.ddsmoothmenu ul li{position: relative;display: inline;float:
left;}/*Top level menu link items style*/.ddsmoothmenu ul li a{display:
block;background: #414141; /*background of menu items (default state)*/color:
white;padding: 8px 10px;border-right: 1px solid #778;color: #2d2b2b;text-decoration:
none;}* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave
correctly*/display: inline-block;}.ddsmoothmenu ul li a:link, .ddsmoothmenu ul
li a:visited{color: white;}.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically
added to the currently active menu items' LI A element*/background:
black;color: white;}.ddsmoothmenu ul li a:hover{background: black; /*background
of menu items during onmouseover (hover state)*/color: white;}/*1st sub level
menu*/.ddsmoothmenu ul li ul{position: absolute;left: 0;display: none;
/*collapse all sub menus to begin with*/visibility: hidden;}/*Sub level menu
list items (undo style from Top level List Items)*/.ddsmoothmenu ul li ul
li{display: list-item;float: none;}/*All subsequent sub menu levels vertical
offset after 1st level sub menu */.ddsmoothmenu ul li ul li ul{top: 0;}/* Sub
level menu links style */.ddsmoothmenu 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;}/* Holly Hack for IE \*/*
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*//* #########
CSS classes applied to down and right arrow images #########
*/.downarrowclass{position: absolute;top: 12px;right: 7px;}.rightarrowclass{position:
absolute;top: 6px;right: 5px;}/* ######### CSS for shadow added to sub menus
######### */.ddshadow{position: absolute;left: 0;top: 0;width: 0;height:
0;background: silver;}.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/opacity:
0.8;}
4. Selanjutnya cari kode </head>,setelah
ketemu letakan script di bawah ini tepat di atas kode </head>
.ddsmoothmenu{font: bold 12px Verdana;background:
#414141; /*background of menu bar (default state)*/width: 100%;}.ddsmoothmenu
ul{z-index:100;margin: 0;padding: 0;list-style-type: none;}/*Top level list
items*/.ddsmoothmenu ul li{position: relative;display: inline;float:
left;}/*Top level menu link items style*/.ddsmoothmenu ul li a{display:
block;background: #414141; /*background of menu items (default state)*/color:
white;padding: 8px 10px;border-right: 1px solid #778;color: #2d2b2b;text-decoration:
none;}* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave
correctly*/display: inline-block;}.ddsmoothmenu ul li a:link, .ddsmoothmenu ul
li a:visited{color: white;}.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically
added to the currently active menu items' LI A element*/background:
black;color: white;}.ddsmoothmenu ul li a:hover{background: black; /*background
of menu items during onmouseover (hover state)*/color: white;}/*1st sub level
menu*/.ddsmoothmenu ul li ul{position: absolute;left: 0;display: none;
/*collapse all sub menus to begin with*/visibility: hidden;}/*Sub level menu
list items (undo style from Top level List Items)*/.ddsmoothmenu ul li ul
li{display: list-item;float: none;}/*All subsequent sub menu levels vertical
offset after 1st level sub menu */.ddsmoothmenu ul li ul li ul{top: 0;}/* Sub
level menu links style */.ddsmoothmenu 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;}/* Holly Hack for IE \*/*
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*//* #########
CSS classes applied to down and right arrow images #########
*/.downarrowclass{position: absolute;top: 12px;right: 7px;}.rightarrowclass{position:
absolute;top: 6px;right: 5px;}/* ######### CSS for shadow added to sub menus
######### */.ddshadow{position: absolute;left: 0;top: 0;width: 0;height:
0;background: silver;}.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/opacity:
0.8;}
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/><script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt'
type='text/javascript'/>
5. Selanjutnya cari kode yang mirip dengan kode di
bawah ini.
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
type='text/javascript'/><script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt'
type='text/javascript'/>
<div id='header-wrapper'><b:section
class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget
id='Header1' locked='true' title='Blazer Blog (Header)'
type='Header'/></b:section></div>
Kode di atas merupakan kode bagian Header dan untuk
yang berwarna merah biasanya itu adalah judul header blog anda, jadi cari saja
kode yang mirip kayak di atas. Dan setelah ketemu letakan kode di bawah ini
tepat di bawah kode bagian akhir kode header di atas (letakan tepat di bawah
kode yang berwarna biru).
<div id='header-wrapper'><b:section
class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget
id='Header1' locked='true' title='Blazer Blog (Header)'
type='Header'/></b:section></div>